javascript - 提交后如何清空表格

<分区>

大家好，有点复杂的表格，所以我发完了就发了一条消息给alert msg，请问发完后把整个表格擦掉最简单的时间是什么时候？

这是我的 HTML 表单和 js 代码，发送后我需要在这里清空所有字段!

$(document).ready(function() {
  $('#my-form').submit(function(e) {

    $.ajax({
      type: "POST",
      url: "handler.php",
      data: $("#my-form").serialize(),
      success: function(data) {
        alert("Vielen Dank für Ihre Anfragen, wie werden Sie so rasch wie möglich kontaktieren!");
      }
    })
    e.preventDefault();
  })
})

<!-- Start Contact Form -->
<div class="triangle"></div>
<div id="cform" class="container">
  <div class="row">
    <h3 class="my-title contact-title">Kontaktformular</h3>
    <hr>
    <div class="col-md-12">
      <form id="my-form" method="post" action="handler.php">
        <ul class="contact-form">
          <li>
            <div class="col-md-6">
              <input name="name" placeholder="Name" required="required" size="8" type="text">
            </div>

            <div class="col-md-6">
              <input name="email" placeholder="E-Mail" required="required" size="8" type="email">
            </div>
          </li>
          <li>
            <div class="col-md-6">
              <input name="telefon" placeholder="Telefon" size="8" type="text">
            </div>
            <div class="col-md-6">
              <input name="firma" placeholder="Firma" size="8" type="text">
            </div>
          </li>
          <li>
            <div class="col-md-6">
              <label>Ihr Budget</label>
              <div id="slider-range-min" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
                <div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 1%;">
                </div><span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 8%;"></span></div>
            </div>
            <div class="col-md-6">
              <input name="amount" id="amount" readonly>
            </div>
          </li>
          <li>
            <div class="col-md-12">
              <textarea class="span12" name="details" placeholder="Ihre Projektbeschreibung" required="required"></textarea>
            </div>
          </li>

          <li>
            <div class="col-md-12">
              <button id="my-btn" type="submit">Senden <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span></button>
              <span id="status"></span>
            </div>
          </li>
        </ul>
      </form>
    </div>

  </div>
</div>

<!-- End Contact Form -->

但我想保留此按钮，而不是添加输入字段或更改 html 中的某些内容。

谢谢大家的帮助

最佳答案

您可以在成功完成 ajax 调用后使用 reset()，如下所示:

$(document).ready(function() {
    $('#my-form').submit(function(e){
        e.preventDefault(); // this belongs here in case of errors
        $.ajax ({
            type : "POST",
            url : "handler.php",
            data : $("#my-form").serialize(),
            success : function(data){
                alert("Vielen Dank für Ihre Anfragen, wie werden Sie so rasch wie möglich kontaktieren!");
                $("#my-form").reset();
            }
        })
    })
})

关于javascript - 提交后如何清空表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50364128/

上一篇：javascript - 求和 html 输入中的数字，Javascript

下一篇：javascript - 为什么这段 JavaScript 代码的输出是 'undeclared'？

jquery 表 onclick 特定列

javascript - Ajax 请求未拉起 jQuery 对话框窗口

javascript - 为什么点击div后形成循环？

javascript - 使用 React Redux 对登录用户进行 post 调用

javascript - 悬停元素之前的目标元素(类似 netflix 的悬停效果)

javascript - 在按键上更改类名

Javascript:如何获取函数的值？

具有 name 属性的元素的 jQuery 选择器

javascript - jquery - 垂直 Accordion 导航菜单