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

Posted 2023-02-22

【中文标题】提交后如何清空表单[重复]

【英文标题】：How to empty form after submit [duplicate]

【发布时间】：2018-10-26 02:37:41

【问题描述】：

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

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

谢谢大家的帮助

【问题讨论】：

1.移动 e.preventDefault();到提交的顶部，以确保表单在出现错误时不会提交。 2. $('#my-form')[0].reset(); 提醒后

@mplungjan 嗨，非常感谢，这正是我的目标

【参考方案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();
            
        )
    )
)

【讨论】：

投票给你没有写的评论作为答案;-)