Solution 1 :

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

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

Solution 2 :

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>

Problem :

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

Comments

Comment posted by Demiah

Thank you, I edit that, but still, whatever I input in the prompt the text area is cleared

Comment posted by stackoverflow.com/questions/8664486/…

That’s probably because clicking a button inside a

Comment posted by Demiah

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

Comment posted by Puk

Sure, I added it for you!

By

Leave a Reply

Your email address will not be published. Required fields are marked *