Home > Blockchain >  Issues with prompt and function
Issues with prompt and function

Time:02-24

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 {
      }
    }

CodePudding user response:

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.

CodePudding user response:

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

  • Related