如何取消或重置特定的表單值？

我有這樣的代碼如何取消或重置特定的表單值？

<html> 
    <body> 
    <form name="form" action="" method="POST"> 
     <div align="center"> 
    <br> 
    <input type="text" name="a" size="25" value="1"><br> 
    <input type="text" name="b" size="25" value="2"><br> 
    <input type="text" name="c" size="25" value="3"><br> 

    <input type="submit" value="Submit"> 
    <input type="button" value="Cancel"><br> 
     </div> 
    </form> 
    </body> 
</html>

，我想取消按鈕，僅恢復c的默認值。

這怎麼辦？

更新：它不必是一個按鈕，<a href="">鏈接就可以。

來源

2011-04-19 Sandra Schlichting

你熟悉jQuery嗎？你會更容易理解。 – ryryan 2011-04-19 13:43:08

從其他重複問題鏈中找到這個問題。這似乎是最古老的，我可以找到哪些仍然相對活躍（在過去的一年中，其他人從'12和之前的3年沒有活動）。請參閱[我的答案]（http://stackoverflow.com/a/34916946/4342563）瞭解替代方案，更新（一些HTML5，ES5等）方法 – 2016-01-21 07:22:16

只需將控制值設置爲它的defaultValue：

<input type="button" value="Reset c" onclick=" 
    var el = this.form.elements['c']; 
    el.value = el.defaultValue; 
">

來源

2011-04-19 13:33:55 RobG

它可以擴展到重置C和B，以這種方式可以縮放到許多應該重置的值？ – 2011-04-19 14:33:17

避免內聯點擊處理程序，讓它的JavaScript – Fatih 2011-04-19 14:56:34

首先，我建議你使用一個按鈕，而不是重置按鈕。然後，你可以試試這個

document.getElementById('button').onclick = function() { 
    var inputs = document.getElementsByName('s'); 
    for (var i = 0; ii = inputs.length; i < ii; i++) { 
     inputs[i].value = ''; 
    } 
}

但是，如果你想使用一個復位按鈕，你應該阻止它的默認操作通過調用event.preventDefault()功能。

來源

2011-04-19 12:56:42 Fatih

當加載頁面，你會需要收集所有的值在JavaScript陣列

var defaults = new Array(); 
var elements; 
window.onload = function(){ 
    elements = document.getElementsByTagName("input"); 
    for (i=0; i<elements.length; i++) { 
     defaults[elements[i].name] = elements[i].value; 
    } 
}

，並返回到默認的按鈕被點擊

時取消

var cancel = document.getElementById('cancel'); 
cancel.onclick = function() { 
    for(i=0; i<elements.length; i++) { 
     elements[i].value = defaults[elements[i].name]; 
    } 
}

編輯：復位按鈕你可以使用

<input type="button" id="reset" />

編輯2：如果你只想重置值，如果INP UT c您可以使用此：

var cancel = document.getElementById('cancel'); 
cancel.onclick = function() { 
    for(i=0; i<elements.length; i++) { 
     if (elements[i].name == "c") { 
      elements[i].value = defaults[elements[i].name]; 
     } 
    } 
}

來源

2011-04-19 13:02:50 Teneff

只有這個缺陷是OP僅對違約名稱爲'c'的輸入值。但我認爲這種方法是最好的。 – sholsinger 2011-04-19 13:13:59

我喜歡Teneff的回答是最好的，但是他的執行是有缺陷的，因爲它不符合要求只有選定的輸入被重置爲默認值。目前還不清楚OP是否希望其他輸入被清除，所以我創建了clearNonDefaults變量。當設置爲true時，這將清除其他輸入的值。

document.getElementById('button').onclick = function() { 
    form.elements['c'].value = form.elements['c'].defaultValue; 
}

但首先要確保你給你的元素按鈕的ID，如：

<input id="button" type="button" value="Cancel" />

通過使用此代碼

// make sure Mozilla's very handy array extension is implemented 
if(Array.prototype.indexOf === undefined) 
{ 
    Array.prototype.indexOf = function(val) 
    { 
     for (var i = 0; i < this.length; i++) 
     { 
      if(this[i] == val) 
       return i; 
     } 
     return -1; 
    }; 
} 

var inputsToRestore, clearNonDefaults, defaults = [], elements = []; 

// if you want to empty the values of inputs other than those listed in inputsToRestore, set to true. 
clearNonDefaults = false; 

// if you ever want to add more, just place the name in this array. 
inputsToRestore = ['c']; 

function onLoadHandler() { 
    elements = document.getElementsByTagName('input'); 
    for (i=0; i<elements.length; i++) { 
    if(inputsToRestore.indexOf(elements[i].name) > -1) { 
     defaults[elements[i].name] = elements[i].value; 
    } 
    } 
} 

function resetHandler() { 
    for(i=0; i<elements.length; i++) { 
    if(inputsToRestore.indexOf(elements[i].name) > -1) { 
     elements[i].value = defaults[elements[i].name]; 
    } else if(clearNonDefaults === true) { 
     elements[i].value = ''; 
    } 
    } 
} 
window.onload = onLoadHandler; 
document.getElementById('reset').onclick = resetHandler;

來源

2011-04-19 13:36:08 sholsinger

這可以通過使用此代碼來完成，你基本上說在這個表單中有任何具有c屬性的元素，重置爲它所具有的默認值。

請參閱this jsFiddle。

這將適用於您的示例代碼。但是，如果您有多個需要重置的項目，則可能不會;這是Javascript變得混亂的地方。

對於需要重置爲默認值的多個項目，jQuery將會簡單得多。

這裏有一個簡單的方法來設置jQuery中值：

$('input.reset').live('click', function() { 

    $('input.3').val('3'); 

});

在哪裏，你需要確定你想在這個jQuery代碼的價值，jQuery是非常簡單易懂。 A

請參閱this jsFiddle。

來源

2011-04-19 14:28:52 ryryan

如何取消或重置特定的表單值？

回答

相關問題