清除表单中的文本字段并重新提交

Question

我在html中生成一个表单（在php中生成），其中还包含一个文本字段。 要提交表单，我使用提交按钮，结果显示在页面的左侧。现在，我想添加另一个按钮来清理文本字段 中的文本，然后重新提交表单（在文本字段中输入value=""）。你有什么想法如何做到这一点？ 简单<input type="reset">不提交表格。

Answer 1

您的按钮应该是这样的：

<input type="button" onclick="DeleteText();" value="Delete text" /> 

和JavaScript代码：

function DeleteText() { 
    document.getElementById('my_text_input_id').value = ''; 
    document.getElementById('my_form_id').submit(); 
} 

Answer 2

假设文本框获得id="myText"和新的按钮有id="clearBtn"，并在窗体有id=myForm。您可以执行以下操作：

$(#clearBtn).on("click",function() { 
    $('#myText').val(""); 
    document.forms["myForm"].submit(); 
}) 

这是未经测试的，但提出了一个想法。此外，这是一个jQuery的解决方案，我推荐在大多数情况下纯JavaScript。

Answer 3

HTML5为我们带来了“占位符”属性，它允许纯CSS实现此功能。

<input type="text" name="focus" required class="search-box" placeholder="Enter search term" /> 

我已经成功地使用Shidhin的解决方案，在这里找到：

http://codepen.io/shidhincr/pen/ICLBD