重置輸入和Textarea字段而不使用form.reset

Question

由於一些原因，我在頁面上沒有<form>標記，但是我確實有<form>元素，例如<input> ， <textarea>和<button> 。 我有一個重置按鈕，當我單擊該按鈕時，我需要重置輸入和文本區域內的所有內容。 還有很多輸入框。

另外，有一個php腳本，它在<span>標記中填充了所請求的信息，當我按下按鈕時，我也想再次使其空白。

下面的一些示例代碼

的HTML

<button id="reset" onclick="resetFields()">Reset Fields</button>

<input id="myID" type="text">

<input id="myID2" type="text">

<span id="mySpan">Some text here</span>
<span id="mySpan2">Some text here</span>

Answer 1

我認為這就是您想要的：

function resetFields(){
    var inputArray = document.querySelectorAll('input');
    inputArray.forEach(function (input){
        input.value = "";
    });

    var textAreaArray = document.querySelectorAll('textArea');
    textAreaArray.forEach(function (textArea){
        textArea.innerHTML = "";
    });

    var spanArray = document.querySelectorAll('span');
    spanArray.forEach(function (span){
        span.innerHTML = "";
    });

}

Answer 2

http://jsbin.com/gamubageke/edit?html,js，控制台，輸出

<script>
function resetFields() {
  var x = document.querySelectorAll(".resettable");
  x.forEach(el => {
    el.value='';
    el.innerHTML='';
  })
}

</script>

<body>
<button id="reset" onclick="resetFields()">Reset Fields</button>

<input id="myID" type="text" class="resettable">

<input id="myID2" type="text" class="resettable">

<span id="mySpan" class="resettable">Some text here</span>
<span id="mySpan2" class="resettable">Some text here</span>
</body>

Answer 3

如果您使用jquery，則可以執行以下操作

$("input[type='text'],textarea").val('');
$("#mySpan,#mySpan2").text('');

重置輸入和Textarea字段而不使用form.reset

問題描述

3 個解決方案

解決方案1
4 已采納 2017-01-12 22:16:44

解決方案2
1 2017-01-12 22:20:58

解決方案3
1 2017-01-12 22:30:07

重置輸入和Textarea字段而不使用form.reset

問題描述

3 個解決方案

解決方案1 4 已采納 2017-01-12 22:16:44

解決方案2 1 2017-01-12 22:20:58

解決方案3 1 2017-01-12 22:30:07

解決方案1
4 已采納 2017-01-12 22:16:44

解決方案2
1 2017-01-12 22:20:58

解決方案3
1 2017-01-12 22:30:07