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

Java腳本

 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語句。 但是，我會說使用更靈活的解決方案。