提交后如何清除表单字段的pre-post值，并用空白字段重新填写表单答案

【问题标题】：How to clear the pre-post values of form fields after submit, and fill the form again with the blank fields提交后如何清除表单字段的pre-post值，并用空白字段重新填写表单
【发布时间】：2017-10-23 05:52:58
【问题描述】：

这是我的网站http://exmaple.com/schedule-appointment/，我在其中应用了一个脚本来在提交后清除表单字段值。基本上当您第一次预约并完成时。您再次返回同一页面进行另一个约会，然后您会看到表格的所有字段都已填写。所以我不希望这种情况发生在实时网站上。我使用了一个脚本来清除字段，但它在 firebug 控制台上运行，但在实时网站上没有运行。我之前做的有什么不对吗以下是我使用并提交给服务器的脚本。

<script type="text/javascript">
jQuery(document).ready(function (){
    jQuery('.form-horizontal').each(function(){ 
        alert("hello");
        this.reset(); 
    }); 
});
</script>

请帮助我们如何第二次清除表单字段以进行预约。

非常感谢！

【问题讨论】：

试试$('input,textarea').val(''); 或$('form').reset()
$('form').find('input, textarea, select').val('') 这样做。如果您有自定义控件，则重置功能不起作用。注意选择，如果您没有定义value="" 的选项，则将选择第一个条目。
你可以使用这个链接w3schools.com/jsref/tryit.asp?filename=tryjsref_form_reset
@mtizziani，嗨，伙计，我将在文件中添加什么代码来清除表单字段。
@Campy 查看 Aknosis 的回答，要重置您的表单，您可以使用：jQuery('.form-horizontal')[0].reset()

标签： javascript php jquery html forms

【解决方案1】：

可能是由浏览器自动完成引起的？尝试将autocomplete="off" 添加到您的form 标签中。

https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

【讨论】：

嘿，你能看看这里 saloon.ekvitech.com/schedule-appointment 我用过这个脚本警告框正在工作，但表单无法清除其字段。请帮忙。

【解决方案2】：

<!DOCTYPE html>
<html>
  <head>
    <title>your page</title>
  </head>
  <body>
    <form action="">
      <div>
        <input type="text" id="sngl_txt">
      </div>
      <div>
        <textarea id="mlt_txt"></textarea>
      </div>
      <div>
        <select id="selection">
          <option value="">no selection (default)</option>
          <option value="1">option 1</option>
          <!-- and so on -->
        </select>
      </div>

      <div>
        <button type="button" id="rst_btn">reset form</button>
      </div>
    </form>
  </body>

<script type="text/javascript" src="link.to.your.jquery.library"></script>
<script type="text/javascript">

$(document).on('ready', function(){

  // prepare with sample values
  $('form').find('#sngl_txt').val('sample text');
  $('form').find('#mlt_txt').val('Lorem ipsum ....");
  $('form').find('#selection').val(1);

  var reset = function(){
    $('form').find('input, textarea, select').val('');
  }


  $('form').find('#rst_btn').on('click', reset);

  // or
  // $('form').find('#rst_btn').on('click', function(){
  //   reset();
  // });
  // if you don't want to use the reset funtion as listener

});

</script>
</html>

我知道在这个示例中，一个简单的按钮 type="reset 也可以工作"，但我经常需要使用自定义控件，并且必须手动将值设置为空字符串。

你可以试试$('form').reset()而不是$('.form-horizontal').reset()，效果和reset一样

【讨论】：

我目前正在本地工作，如果代码执行得很好，那么我会将我的代码提交到开发服务器。我使用了这个脚本，警报功能有效，但脚本没有清除字段。
嘿，你能看看这里saloon.ekvitech.com/schedule-appointment 我已经使用了这个脚本
警告框正在工作，但表单无法清除其字段。请帮忙。