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) — user5734311
– user5734311, Commented May 26, 2020 at 22:14
Thank you, I edit that, but still, whatever I input in the prompt the text area is cleared — Demiah
– Demiah, Commented May 26, 2020 at 22:18
That's probably because clicking a button inside a <form> will submit the form, which will effectively reload the page (thus "clearing" the text area). See here: stackoverflow.com/questions/8664486/… — user5734311
– user5734311, Commented May 26, 2020 at 22:21

Tom Adams · Accepted Answer · 2020-05-26 22:31:14Z

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, 2020 at 22:31

answered May 26, 2020 at 22:19

Tom Adams

614 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Puk · Accepted Answer · 2020-05-26 22:51:51Z

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

Collectives™ on Stack Overflow

JavaScript to clear text area after user input

2 Answers 2

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Linked

Related