提交后如何清空表单[重复]

Question

大家好，表格有点复杂，所以我在发送警报消息后设法发送消息，发送后如何删除整个表格最简单？

这是我的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 中的某些内容。

谢谢大家的帮助

Answer 1

您可以在成功完成 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();
            }
        })
    })
})