在没有 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,console,output

<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('');

在没有 form.reset 的情况下重置输入和文本区域字段

Reset Input and Textarea fields without form.reset

javascript

html

button

reset