How to empty form after submit

Question

Hi everyone, it's a bit complicated form, so I managed to send a message after sending it to alert msg, how would it be the simplest time to erase the whole form after it was sent?

This is my HTML Form and js code, here I need after sending, emptying all fields!

$(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 -->

But I'd like to keep this button, not to add an input field, or to change something in html.

Thank you all for help

1. Move e.preventDefault(); to the top of the submit to make sure the form does not submit in case of errors. 2. `$('#my-form')[0].reset();` after your alert — mplungjan, May 16 '18 at 06:51
@mplungjan Hi, thank you very much, that's exactly what I was up to — Mara, May 16 '18 at 06:54

score 7 · Accepted Answer · edited May 16 '18 at 07:48

7

You can use reset() after your successful completion of ajax call like following:

$(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();
            }
        })
    })
})

edited May 16 '18 at 07:48

mplungjan

169,008
28
173
236

answered May 16 '18 at 06:51

Sudhir Ojha

3,247
3
14
24

1

Have a vote for the comment you didnt write as answer ;-) – GhostCat Jun 18 '19 at 12:25

How to empty form after submit

1 Answers1