JavaScript重置某些表单域 [英] javascript reset certain form fields

问题描述

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

以下是其中一个窗口的代码（我将保留代码为尽可能短）：

 < div class =modal hide fadeid =myPreadviceModal> 
< div class =modal-body> 
< form class =wellaction =method =POSTid =modalFormname =modalForm> 
 
< label>容器< / label>从主页面传递
 / *** class =container*** / 
< input type =textname =containerid =containerclass =containerreadonly /> 
 
< label> BOL< / label> 
 / *** class =bol从主页面传递*** / 
< input type =textname =bolid =bolclass =bolreadonly /> 
 
< label>使用者名称< / label> 
< input type =textid =usernamename =username/> 
 
< label>电子邮件< / label> 
< input type =textid =emailname =email/> 
 
< input type =submitid =modalSubmitname =submitPreadvicehref =＃value =Submit/> 
 
 / ***这是复位按钮*** / 
< input type =resetid =resetvalue =Reset/> 
 
< / form> 
< / div> 
< / div> 
  

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

对于完全独立的表单，我有另一个javascript函数，但我需要将其更改为适合需要重新设置模式表单，并且我有大约8种不同的模式表单。

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

 < script type =text / javascript> 
函数resetForm（filterForm）
 {
 var myForm = document.getElementById（filterForm）; （'var'= 0; i< myForm.elements.lengths; i ++）
 'reset'！= myForm.elements [i] .type）
 {
 myForm.elements [i] .checked = false; 
 myForm.elements [i] .value =''; 
 myForm.elements [i] .selectedIndex = 0; 
} 
} 
} 
< / script> 
  

如何利用和修改这段JavaScript的各种模式形式，重置从父页面传递的数据，但重置所有其他字段？

请帮助。

谢谢如果你能够并愿意向用户可编辑的字段中添加类，你可以使用类似于

HTML



 < label> BOL< /标签> 
 / *** class =bol从主页面传递*** / 
< input type =textname =bolid =bolclass =bolreadonly /> 
 
< label>使用者名称< / label> 
< input type =textid =usernamename =usernameclass =userdata/> 
 
< label>电子邮件< / label> 
< input type =textid =emailname =emailclass =userdata/> 
  

Javascript


  function resetForm（filterForm）
 {
 var myForm = document.getElementById（filterForm）; （'var'= 0; i< myForm.elements.lengths; i ++）
 
'reset'！= myForm.elements [i] .type&& 
 myForm.elements [i] .className&& 
 myForm.elements [i] .className。子字符串（
 myForm.elements [i] .className.lastIndexOf（userdata）
）==userdata
）
 {
 myForm.elements [i ] .checked = false; 
 myForm.elements [i] .value =''; 
 myForm.elements [i] .selectedIndex = 0; 
 
 
 
 code $ 
 $ b现在，如果你知道确保你永远不会在你的用户可编辑输入中有任何其他的类名，你可以通过添加 
 
 
  myForm.elements [i] .className ==userdata
  
添加到您当前的 if 语句。不过，我会说更灵活的解决方案。
 
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.
解决方案
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.

                        
这篇关于JavaScript重置某些表单域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！