html - 单击按钮时清除文本字段

Question

我有两个文本标签：

<div>           
    <input type="text" id="textfield1" size="5"/>
</div>

<div>          
    <input type="text" id="textfield2" size="5"/>           
</div>

我想要一个名为“清除”的按钮，可以删除这两个字段。

据我所知，我知道要实现一个按钮，我应该使用如下代码：

<div>      
    <input type="button" value="Clear Fields" onclick=SOMETHING />
</div>

关于如何实施的任何线索SOMETHING？

Answer 1

一个简单的 JavaScript 函数就可以完成这项工作。

function ClearFields() {

     document.getElementById("textfield1").value = "";
     document.getElementById("textfield2").value = "";
}

只需让您的按钮调用它：

<button type="button" onclick="ClearFields();">Clear</button>

Answer 2

一个简单的重置按钮怎么样？

<form>

  <input type="text" id="textfield1" size="5">
  <input type="text" id="textfield2" size="5">

  <input type="reset" value="Reset">

</form>

Answer 3

如果你想重置它，那么简单的使用：

<input type="reset" value="Reset" />

但请注意，它不会清除具有 default 的文本框value。例如，如果我们有以下文本框，并且默认情况下，它们具有以下值：

<input id="textfield1" type="text" value="sample value 1" />
<input id="textfield2" type="text" value="sample value 2" />

因此，要清除它，请使用 javascript 对其进行补充：

function clearText()  
{
    document.getElementById('textfield1').value = "";
    document.getElementById('textfield2').value = "";
}  

并将其附加到onclick重置按钮：
<input type="reset" value="Reset" onclick="clearText()" />

Answer 4

像这样的东西会添加一个按钮，让你用它来清除值

<div>           
<input type="text" id="textfield1" size="5"/>         
</div>

<div>          
<input type="text" id="textfield2" size="5"/>           
</div>

<div>
    <input type="button" onclick="clearFields()" value="Clear">
</div>


<script type="text/javascript">
function clearFields() {
    document.getElementById("textfield1").value=""
    document.getElementById("textfield2").value=""
}
</script>

Answer 5

If you are trying to "Submit and Reset" the the "form" with one Button click, Try this!

Here I have used jQuery function, it can be done by simple JavaScript also...

        <form id="form_data">
           <input type="anything"  name="anything" />
           <input type="anything"  name="anything" />

             <!-- Save and Reset button -->
           <button type="button" id="btn_submit">Save</button>
           <button type="reset" id="btn_reset" style="display: none;"></button>
        </form>

<script type="text/javascript">
$(function(){
    $('#btn_submit').click(function(){
        // Do what ever you want
       $('#btn_reset').click();  // Clicking reset button
    });
});
</script>