JavaScript to clear text area after user input

Question

I am trying to create an HTML form which consists of title, text area , post button and clear button. My aim is to clear the text area if the user clicks the Clear button, but before that an alert to appear asking the user if he is sure he wants to clear the text. If the user Types OK, the text area to be erased, if the user types Cancel, the method to be cancelled.

I tried the following code, but I have noticed that whatever input I type, or button I press, the text in the text area is erased by default. How do I prevent that and therefore make it work?

  <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>

    <link rel="stylesheet" href="global.css">


</head>

<body>


<form >

    <input type="text" id="title" name="title">

<textarea id="blog_textarea" name="blog" placeholder="Your Text">

  </textarea>
   <br><button type="submit" id="post" name="submission" value="Submit">Post</button>
  <button id="clear_button" onclick="clearFun()" >Clear</button>
</form>


<p id="demo"></p>
<script>


    function clearFun() {
        var par_output="";

  var txt = prompt("To confirm, please type OK, or to stay type Cancel ");
  if (txt == "OK" || "ok") {
     document.getElementById("blog_textarea").value = "";
  } else {
    par_output = "Please type OK to confirm or Cancel";
  }
 document.getElementById("par_output").innerHTML = demo;
}
    </script>

</body>
</html>

Also there is Jsfiddle if that helps

Many Thanks guys

`if (txt == "OK" || txt == "ok") {` (you need to state each condition in full, or JS is evaluating `"ok"` as true, which makes the expression true regardless of `txt`'s value) — , May 26 '20 at 22:14
Thank you, I edit that, but still, whatever I input in the prompt the text area is cleared — Demiah, May 26 '20 at 22:18
That's probably because clicking a button inside a `
` will submit the form, which will effectively reload the page (thus "clearing" the text area). See here: https://stackoverflow.com/questions/8664486/javascript-code-to-stop-form-submission — , May 26 '20 at 22:21

Tom Adams · Answer 1 · 2020-05-26T22:31:14.067

1

you need to write both condition seperatly and form tag is also effect to clear it

if (txt == "OK" ||txt == "ok")

edited May 26 '20 at 22:31

answered May 26 '20 at 22:19

Tom Adams

61
4

Puk · Answer 2 · 2020-05-26T22:51:51.003

This should work:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <textarea id="textarea"></textarea>
    <br />
    <button id="clearbutton">Clear</button>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
      $('#clearbutton').click(async () => {
        const clear = await prompt('Clear? Type ok');

        if (clear.toLowerCase() === 'ok') {
          $('#textarea').val('');
        }
      });
    </script>
  </body>
</html>

In plain JavaScript:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <textarea id="textarea"></textarea>
    <br />
    <button id="clearbutton">Clear</button>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
      document
        .getElementById('clearbutton')
        .addEventListener('click', async () => {
          const clear = await prompt('Clear? Type ok');

          if (clear.toLowerCase() === 'ok') {
            document.getElementById('textarea').value = '';
          }
        });
    </script>
  </body>
</html>

I checked that in jQuery and it seems to work, is there any chance you can show the same code in plain javascript as that is what I use and not good in jQuery still — Demiah, May 26 '20 at 22:46

JavaScript to clear text area after user input

2 Answers2