PDA

View Full Version : Form onreset Event after the form reset



Rain Lover
02-08-2014, 07:39 PM
Here's a sample form:


<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Form onreset</title>
</head>

<body>
<form onreset="myFunction();">
<input type="text" name="fname">
<input type="text" name="lname">
<button type="reset" value="Reset">Reset</button>
</form>
<script>
function myFunction() {
alert("The form was reset!");
}
</script>
</body>

</html>

When I click the reset button, the form onreset event fires first, i.e. the alert message appears before resetting the form fields. How can it happen after the form fields rest?

Beverleyh
02-08-2014, 09:08 PM
Maybe use a setTimeout method and change your form so the reset becomes a function fired onclick of a input reset?

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Form onreset</title>
</head>

<body>
<form id="myForm">
<input type="text" name="fname">
<input type="text" name="lname">
<input type="button" onclick="myFunction();" value="Reset">
</form>
<script>
function myFunction() {
document.getElementById("myForm").reset();
setTimeout(function(){alert("The form was reset!")}, 1000);
}
</script>
</body>

</html>

Rain Lover
02-09-2014, 03:27 AM
Maybe use a setTimeout method and change your form so the reset becomes a function fired onclick of a input reset?

Good idea! I'll give it a try.
Thanks! :)

jscheuer1
02-09-2014, 04:18 AM
Or:


<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Form onreset</title>
</head>

<body>
<form onreset="myFunction();">
<input type="text" name="fname">
<input type="text" name="lname">
<button type="reset" value="Reset">Reset</button>
</form>
<script>
function myFunction() {
setTimeout(function(){alert("The form was reset!");}, 0);
}
</script>
</body>

</html>

Rain Lover
02-09-2014, 05:06 AM
How about not using setTimeout?


<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Form onreset</title>
</head>

<body>
<form id="myForm">
<input type="text" name="fname">
<input type="text" name="lname">
<button type="button" onclick="myFunction();">Reset</button>
</form>
<script>
function myFunction() {
document.getElementById("myForm").reset();
alert("The form was reset!");
}
</script>
</body>

</html>

Beverleyh
02-09-2014, 08:28 AM
That version (no setTimeout) didn't work when I was playing around on iPhone lastnight. The alert still fires first.

You've plucked out my interim test on the path to the setTimeout version though. From your original example, I logically thought "make the reset part of the function and put it after the alert" (like in your example), but that didn't work (not on iPhone anyway), so then I thought "what happens with a setTimeout on the alert?", which DID work, so that's the one I posted.

My brain stopped processing at that point. Saturday night TV was calling :)

I think with a bit more pondering I'd have worked around to John's example - "try the original form with setTimeout" - but I'd got far too distracted by the TV. LOL

Rain Lover
02-09-2014, 09:54 AM
Thank you and John, anyway! :)

jscheuer1
02-09-2014, 04:14 PM
What I would be thinking about is not whether there's a timeout or not. I would want to know, if javascript is unavailable, will the form still reset? And do I want it to? With the method from my previous post it will. With methods that depend solely upon form.reset() to reset the form, it will not.

Rain Lover
02-09-2014, 06:14 PM
What I would be thinking about is not whether there's a timeout or not. I would want to know, if javascript is unavailable, will the form still reset? And do I want it to? With the method from my previous post it will. With methods that depend solely upon form.reset() to reset the form, it will not.

You're right. I'd better stick to type="reset".
Thanks for the pointer! :)