Javascript reset certain form fields

Question

I have various modal windows that accept the values ​​passed from its parent page. Each modal contains a form with a specific function that the user must fill out and submit.

Here is the code for one of the windows (I will keep the code as short as possible):

<div class="modal hide fade" id="myPreadviceModal"> <div class="modal-body"> <form class="well" action="" method="POST" id="modalForm" name="modalForm"> <label>Container</label> /*** class="container" is passed from main page ***/ <input type="text" name="container" id="container" class="container" readonly /> <label>BOL</label> /*** class="bol" is passed from main page ***/ <input type="text" name="bol" id="bol" class="bol" readonly /> <label>User Name</label> <input type="text" id="username" name="username" /> <label>Email</label> <input type="text" id="email" name="email" /> <input type="submit" id="modalSubmit" name="submitPreadvice" href="#" value="Submit" /> /*** this is the reset button ***/ <input type="reset" id="reset" value="Reset" /> </form> </div> </div> 

Currently, the reset button above clears the entire form. But I do NOT want to clear the whole form. Only the user entered the data. Data that is transmitted from the parent page must remain in form.

I have another javascript function for a completely separate form, but I need to change it to fit the need to reset the modal form, and I have about 8 different modal forms.

Here is the javascript for my previous unrelated form:

  <script type="text/javascript"> function resetForm(filterForm) { var myForm = document.getElementById(filterForm); for (var i = 0; i < myForm.elements.lengths; i++) { if ('submit' != myForm.elements[i].type && 'reset' != myForm.elements[i].type) { myForm.elements[i].checked = false; myForm.elements[i].value = ''; myForm.elements[i].selectedIndex = 0; } } } </script> 

How can I use and modify this piece of javascript for my various modal forms so that it does not reset the data from the parent page, but reset all other fields?

Please, help.

Thanks.

Answer 1

If you are able and want to add classes to user-editable fields, you can have something like this

HTML

  <label>BOL</label> /*** class="bol" is passed from main page ***/ <input type="text" name="bol" id="bol" class="bol" readonly /> <label>User Name</label> <input type="text" id="username" name="username" class="userdata" /> <label>Email</label> <input type="text" id="email" name="email" class="userdata" /> 

Javascript

  function resetForm(filterForm) { var myForm = document.getElementById(filterForm); for (var i = 0; i < myForm.elements.lengths; i++) { if ('submit' != myForm.elements[i].type && 'reset' != myForm.elements[i].type && myForm.elements[i].className && myForm.elements[i].className.substring( myForm.elements[i].className.lastIndexOf("userdata") ) == "userdata" ) { myForm.elements[i].checked = false; myForm.elements[i].value = ''; myForm.elements[i].selectedIndex = 0; } } } 

Now, if you know for sure that you will never have other class names on the user-editable input, you can simplify this a bit by simply adding

 myForm.elements[i].className == "userdata" 

into the current if . However, I would say go with a more flexible solution.