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