重置输入和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