How to maniplate values in input boxes with JavaScript?

Question

I was developing a feedback system in my webpage, in which the user inputs name, email adress, and the feedback.

I made a "Discard" button in it. On clicking it, you get a confirmation message saying "Discard this draft?". I wanted the values in input boxes to be cleared if "Ok" is clicked, and the values to remain the same if "Cancel" is clicked.

But whether I click "Ok" or "Cancel", the input boxes always go blank.

Here's the code:

document.getElementById("discard").onclick = function() {
  var choice = confirm("Discard this draft?");

  var Name = document.getElementById("name");
  var Email = document.getElementById("email");
  var Feedback = document.getElementById("feedback");

  var nameValue = Name.value;
  var emailValue = Email.value;
  var feedbackValue = Feedback.value;

  if (choice == null) {
    Name.value = nameValue;
    Email.value = emailValue;
    Feedback.value = feedbackValue;
  } else if (choice != null) {
    Name.value = "";
    Feedback.value = "";
    Email.value = "";
  }
}

<form>
  <input type="email" id="email" placeholder="Enter your email" required><br><br>
  <input type="text" id="name" placeholder="Enter your name (optional)"><br><br>
  <textarea type="text" id="feedback" placeholder="Enter the feedback..." required></textarea><br><br>
  <button id="discard">Discard</button>
  <button id="send">Send feedback</button>
</form>

What is wrong?

Resetting the values does not make any sense, or am I missing something? — ferikeem
– ferikeem, Commented May 25, 2021 at 13:09
To ferikeem's point - you only need to handle the "OK" for discard - no need to set the values to themselves if the user cancels. — chazsolo
– chazsolo, Commented May 25, 2021 at 13:13

Omicron · Accepted Answer · 2021-05-25 13:08:35Z

3

confirm() returns true or false so your choice value will be boolean.

That's why choice != null is always true and your input boxes always go blank.

answered May 25, 2021 at 13:08

Omicron

3554 silver badges10 bronze badges

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

Comments

yadejo · Accepted Answer · 2021-05-25 13:09:56Z

0

The result of confirm will never be null

confirm returns a boolean (true or false) indicating whether OK or Cancel was pressed.

Your if-statement has to be updated:

 if (choice === false) {
     Name.value = nameValue;
     Email.value = emailValue;
     Feedback.value = feedbackValue;
 }
 else {
     Name.value = "";
     Feedback.value = "";
     Email.value = "";
 }

answered May 25, 2021 at 13:09

yadejo

1,96815 silver badges28 bronze badges

2 Comments

Saadat khurshid Kitab Over a year ago

Thanks for the answer. But I think you mean "choice == false" instead of "choice === false".

yadejo Over a year ago

I don't :) developer.mozilla.org/en-US/docs/Web/JavaScript/…

user15786743 · Accepted Answer · 2021-05-25 13:24:48Z

Instead of null use false. So your code should be like this

document.getElementById("discard").onclick = function() {
  var choice = confirm("Discard this draft?");

  var Name = document.getElementById("name");
  var Email = document.getElementById("email");
  var Feedback = document.getElementById("feedback");

  var nameValue = Name.value;
  var emailValue = Email.value;
  var feedbackValue = Feedback.value;

  if (choice == false) {
    Name.value = nameValue;
    Email.value = emailValue;
    Feedback.value = feedbackValue;
  } else {
    Name.value = "";
    Feedback.value = "";
    Email.value = "";
  }
}

<form>
  <input type="email" id="email" placeholder="Enter your email" required><br><br>
  <input type="text" id="name" placeholder="Enter your name (optional)"><br><br>
  <textarea type="text" id="feedback" placeholder="Enter the feedback..." required></textarea><br><br>
  <button id="discard">Discard</button>
  <button id="send">Send feedback</button>
</form>

Collectives™ on Stack Overflow

How to maniplate values in input boxes with JavaScript?

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related