javascript重置某些表单字段

Question

我有各种模式窗口，它们接收从其父页面传递的值。每个模态都包含一个具有特定功能的表单，用户必须填写并提交。

这是其中一个窗口的代码（我会尽量缩短代码）：

 <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>  

目前，上面的重置按钮将清除整个表单。但我不想清除整个表格。只是用户输入数据。从父页面传递的数据必须保留在表单中。

我有另一个用于完全独立表单的 javascript 函数，但我需要更改它以适应重置模态表单的需要，并且我有大约 8 种不同的模态表单。

这是我之前不相关表单的 javascript：

 <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>   

如何在不重置从父页面传递的数据，但重置所有其他字段的情况下，为我的各种模式表单使用和更改这段 javascript？

请帮忙。

谢谢。

Answer 1

如果您能够并且愿意将类添加到用户可编辑的字段中，您可以拥有这样的东西

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;
     }
   }
 }

现在，如果您确定您的用户可编辑输入中永远不会有任何其他类名，您可以通过添加来简化这一点

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

到您当前的if 声明。不过，我想说的是更灵活的解决方案。