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声明。但是，我会说更灵活的解决方案。

javascript重置某些表单字段

1 个答案: