'Issues with prompt and function

I have a page with two forms where a user is to input their email and password. Upon entering the information correctly, the user will click on the Submit button then see a prompt that asks if they are sure with proceeding, if the user types in "Yes", the data in the email/password fields will be cleared. If they answer "No" then the information will stay. The issue I am having is that any response will clear all fields, when only the response "Yes" should do that. I can't seem to figure this out even though it seems very simple. Keep in mine please I am still a novice to HTML/Javascript.

Code for "Submit" button:

<button onclick="Submit()">Submit</button>

Code for function that decides whether the information is to be cleared or not: function Submit() {

var ques = window.prompt("Are you sure?");
      if ((ques = "Yes")) {
        form.style.display = "none";
      } else {
      }
    }
javascripthtml


Solution 1:[1]

Please find below solution to clear inputs of form

<body style="height: 100%">
    <form id="form" name='name' style='width: 100%; height: 60%;'>
        <input type="email" name="email"/>
        <button onClick='Submit()'>Click me</button>
    </form>
    <script>
    function Submit() {
    var ques = window.prompt("Are you sure?");
        if (ques === "Yes") {
            var inputs =document.querySelectorAll('input');
            inputs.forEach(input =>  input.value = '');
        } else {
              alert("hai");
        }
    }
    </script>
</body>

I would suggest confirm over prompt for better user experience.

Solution 2:[2]

  • Don't use prompt() it's bad UX even in a test environment.
  • Submit event involves
    • The form sending data to a server
    • The data is from all values of fields that have names (except buttons and outputs).
    • If there's no instructions to get the server response a blank page is returned. In the example the page doesn't go blank becauase the response is handled in iframe.

After rereading question I'm still not sure if you know what a submit event does. I'll assume that you want to interupt the submit event and give the user a choice of having the fields cleared of data or keeping the data after a submit event. If I got it wrong I'm sure you can swap the parts in my example to get the opposite effect.

This example:

  • posts to a live test server
  • has an iframe to display server response
  • has only a click handler registered on the form
  • has normal buttons not submit types
  • first button opens a modal
  • second button is on the modal "Yes" to keeping the data
    • closes the modal
    • uses the .submit() method to submit form
  • third button is on the modal "No" to keeping data
    • does the same as "Yes"
    • and it uses the .reset() method to clear the inputs

Example

const form = document.forms[0];
form.onclick = xModal;

function xModal(e) {
  const io = this.elements;
  const clk = e.target;
  if (clk.matches('.trg')) {
    io.modal.classList.toggle("show");
  }
  if (clk.matches('.yes')) {
    io.modal.classList.toggle("show");
    this.submit();
  }
  if (clk.matches('.no')) {
    io.modal.classList.toggle("show");
    this.submit();
    this.reset();
  }
};
body {
  position: relative;
}

.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: scale(1.1);
  transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}

legend {
  background: white;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 1rem 1.5rem;
  width: 12rem;
  border-radius: 0.5rem;
}

.show {
  opacity: 1;
  visibility: visible;
  transform: scale(1.0);
  transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

iframe {
  width: 100%;
}
<form action='https://httpbin.org/post' method='post' target='response'>

  <label>E-mail: 
  <input name='email' type='email'> Password: 
  <input name='pass' type='password'>
  <button class='trg' type='button'>Send</button>
</label>
  <iframe src='about:blank' name='response'></iframe>

  <fieldset name='modal' class='modal'>
    <fieldset class='content'>
      <legend>Page Will Reload</legend>
      <p>Do you wish to preserve entered data?</p>
      <button class='yes' type='button'>Yes</button>
      <button class='no' type='button'>No</button>
    </fieldset>
  </fieldset>
</form>

Solution 3:[3]

I made a little HTML snippet where a button makes a form disapear. I also used return false with the onsubmit attribute to prevent page reload, which could've been your problem.

<body style="height: 100%">
    <form onsubmit='return false' id="form" style='width: 100%; height: 60%; background-color: red;'>

        <button onClick='Submit()'>Click me</button>
    </form>
    <script>
        function Submit() {

            document.getElementById("form").style.display="none"
        }
    </script>
</body>
<body style="height: 100%">
    <form onsubmit='return false' id="form" style='width: 100%; height: 60%; background-color: red;'>

        <button onClick='Submit()'>Click me</button>
    </form>
    <script>
        function Submit() {

            document.getElementById("form").style.display="none"
        }
    </script>
</body>

enter code here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 jeesj
Solution 2
Solution 3 Dharman

Related Questions