清除按钮单击上的文本字段

Question

我有两个文字标签：

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

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

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

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

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

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

Answer 1

如何只是一个简单的重置按钮？

<form>

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

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

</form>

Answer 2

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

function ClearFields() {

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

只需按下按钮即可：

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

Answer 3

如果要重置它，那么简单使用：

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

但要注意，它不会清除具有默认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

如果您尝试单击一次按钮“提交并重置”“表单”，请尝试此操作！

这里我使用了jQuery函数，它也可以通过简单的JavaScript来完成...

        <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>