javascript reset某些表單域

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

現在，如果你確定知道你永遠不會有其他任何課程名稱您的用戶可編輯的輸入S，你可以僅僅通過增加

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

到您當前if聲明這簡化了一下。不過，我想說的是更靈活的解決方案。