چند ساعت پیش ایمیلی از دوستی دریافت کردم که سوالی در مورد ریست کردن چند فرم مختلف کرده بودند.

"من یه فرم درست کردم که توش چند تا فرمه و هر کدوم از این فرم ها یه دکمه ریست داره، یه دکمه ریست کلی هم برای همشون می خوام. ریست تک ها جواب می دن ولی ریستی که برای کل صفحه است جواب نمی ده!خیلی ممنون میشم اگه کمکم کنید"

خب خیلی سادس این کار فقط با HTML امکان پذیر نیست، زیرا در HTML دکمه ها تنها در درون یک فرم تعریف شده اند و تاثیر آنها درون فرم است، برای اینکه بتوانیم یا یک دکمه چند فرم را ریست کنیم یا تغییری در آنها ایجاد کنیم باید دست به دامان جاوااسکریپت شویم و هنگام فشرده شدن دکمه تک تک فرم ها را ریست کنیم.
برای اینکار دکمه ریست را بصورت زیر تعریف می کنیم.


<input type="button" onclick="formReset()" value="Reset All">

و به هر فرم یک id یکتا نسبت می دهیم، حال باید تابع formReset() را تعریف کنیم. درون تابع می بایست تک تک فرم های مورد نظر را ریست کنیم.


function formReset()
{
document.getElementById("form1").reset();// reset form 1
document.getElementById("form2").reset();// reset form 2
document.getElementById("form3").reset();// reset form 3
}

حال با کلیک روی دکمه Reset All تمامی فرم ها ریست می شوند. کد نهایی ما شبیه کد زیر خواهد بود.


<script>
function formReset() {
     document.getElementById("form1").reset();// reset form 1
     document.getElementById("form2").reset();// reset form 2
     document.getElementById("form3").reset();// reset form 3
}
</script>
<form id="form1">
     First name: <input type="text" name="fname"><br>
     Last name: <input type="text" name="lname"><br><br>
</form>
<form id="form2">
     First name: <input type="text" name="fname"><br>
     Last name: <input type="text" name="lname"><br><br>
</form>
<form id="form3">
     First name: <input type="text" name="fname"><br>
     Last name: <input type="text" name="lname"><br><br>
     <input type="button" onclick="formReset()" value="Reset All">
</form>

همچنین می توانید دکمه Reset All را بیرون فرم تعریف کنید، زیرا به فرم مربوط نیست و هنگام فشرده شدن تابع جاوااسکریپت را فراخوانی می کند.


<script>
function formReset() {
     document.getElementById("form1").reset();// reset form 1
     document.getElementById("form2").reset();// reset form 2
     document.getElementById("form3").reset();// reset form 3
}
</script>
<form id="form1">
     First name: <input type="text" name="fname"><br>
     Last name: <input type="text" name="lname"><br><br>
</form>
<form id="form2">
     First name: <input type="text" name="fname"><br>
     Last name: <input type="text" name="lname"><br><br>
</form>
<form id="form3">
     First name: <input type="text" name="fname"><br>
     Last name: <input type="text" name="lname"><br><br>
</form>
<input type="button" onclick="formReset()" value="Reset All">