javascript reset certain form fields

问题

I have various modals windows that take in values passed from it's parent page. Each modal has contains a form with a certain function that a 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 will clear out the entire form. But I DO NOT want to clear out the entire form. Just the user entered data. The data that is passed from the parent page must remain in the form.

I have another javascript function for a completely separate form, but I need to alter it to fit the need of resetting 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 utilize and alter this piece of javascript for my various modal forms in a way that it doesn't reset the data passed from the parent page, but reset all other fields?

Please help.

Thank you.

回答1:

If you are able and willing to add classes to the user-editable fields, you could 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 are never going to have any other class names on your user-editable input, you could simplify this a bit by just adding

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

to your current if statement. However, I'd say go with the more flexible solution.

来源：https://stackoverflow.com/questions/22697157/javascript-reset-certain-form-fields

标签

javascript

html

reset