Why isn't this ajax form resetting?

Question

I have a headless WordPress site. I'm working on the event handler to submit the contact form. I'm using Contact Form 7. I've tried using vanilla JS, I'm using jQuery here because it seems like a better option, and I'm losing my mind.

Essentially, the form submits but the fields do not clear. I've tried form.reset() in JS, $('#formid')[0].reset() in jQuery, and the code below. I don't know why this isn't working and the result is really suboptimal. Any ideas?

I will fully admit that I am more comfortable working in javascript than jQuery so I might be missing something obvious.

If I don't have the iframe set as the form target, the page redirects to a white page with JSON data. Am I missing something about event.preventDefault()? It's not working the way it should, and has in my experience.

$(document).ready(function() {
  $('#formElem').on('submit', function(event) {
    event.preventDefault();
    let request = $.ajax({
      url: "https://api.chloemedranophotography.com/wp-json/contact-form-7/v1/contact-forms/54/feedback",
      type: "post",
      data: new FormData(this)
    }).done(resetForm());
  })

  function resetForm($form) {
    $form.find('input:text, input:tel, input:file, select, textarea').val('');
    $('datePicker').val('').attr('type', 'text').attr('type', 'date');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="https://api.chloemedranophotography.com/wp-json/contact-form-7/v1/contact-forms/54/feedback" id="formElem" name="contactForm" method="post" class="contact__form" target="formtarget">
  <h3 class="contact__form--heading">Contact</h3>
  <p class="contact__form--paragraph">Currently operating out of Minot, North Dakota. Soon to be in South Korea!</p>
  <input id="your-name" class="contact__form--input" type="text" name="your-name" placeholder="Name">
  <input id="your-email" class="contact__form--input" type="text" name="your-email" placeholder="Email">
  <input id="your-tel" class="contact__form--input" type="tel" name="your-tel" placeholder="Phone">
  <input id="preferred-date" class="contact__form--input" placeholder="Select session date" type="date" name="preferred-date">
  <textarea id="your-info" class="contact__form--input" placeholder="Tell me about yourself!" name="your-info"></textarea>
  <textarea id="services" class="contact__form--input" placeholder="What services are you interested in booking?"></textarea>
  <textarea id="how-heard" class="contact__form--input" placeholder="How did you hear about my business?" name="how-heard"></textarea>
  <input id="btnSubmit" class="contact__form--input btn-contact" type="submit" name="submit">
  <div id="messageArea"></div>
  <iframe class="formtarget" name="formtarget"></iframe>
</form>

Answer 1

There's several separate issues:

• .done(resetForm()) is incorrect as it immediately calls resetForm() and sets the returned value from that call as the event handler.
• You need to send the $form argument in the resetForm() method call, so provide a full function block to the done() handler, including that argument
• When sending a FormData object in a jQuery AJAX call you need to set processData and contentType to false so the data is encoded correctly.
• jQuery does not have :tel and :file pseudo selectors. Instead you can use :input to select all input, textarea and select elements to reset their values.
• Changing the type of the date control to text and then back to date is not necessary, even without the above point.

$(document).ready(function() {
  const $form = $('#formElem').on('submit', function(e) {
    e.preventDefault();
    let data = new FormData(this);

    let request = $.ajax({
      url: "https://api.chloemedranophotography.com/wp-json/contact-form-7/v1/contact-forms/54/feedback",
      type: "post",
      data: data,
      contentType: false,
      processData: false
    }).done(function() {
      resetForm($form)
    });
  })

  function resetForm($form) {
    $form.find(':input').val('');
    
    // alternatively to reset the form to original state, not wipe all fields use this
    // $form.get(0).reset();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="https://api.chloemedranophotography.com/wp-json/contact-form-7/v1/contact-forms/54/feedback" id="formElem" name="contactForm" method="post" class="contact__form" target="formtarget">
  <h3 class="contact__form--heading">Contact</h3>
  <p class="contact__form--paragraph">Currently operating out of Minot, North Dakota. Soon to be in South Korea!</p>
  <input id="your-name" class="contact__form--input" type="text" name="your-name" placeholder="Name">
  <input id="your-email" class="contact__form--input" type="text" name="your-email" placeholder="Email">
  <input id="your-tel" class="contact__form--input" type="tel" name="your-tel" placeholder="Phone">
  <input id="preferred-date" class="contact__form--input" placeholder="Select session date" type="date" name="preferred-date">
  <textarea id="your-info" class="contact__form--input" placeholder="Tell me about yourself!" name="your-info"></textarea>
  <textarea id="services" class="contact__form--input" placeholder="What services are you interested in booking?"></textarea>
  <textarea id="how-heard" class="contact__form--input" placeholder="How did you hear about my business?" name="how-heard"></textarea>
  <input id="btnSubmit" class="contact__form--input btn-contact" type="submit" name="submit">
  <div id="messageArea"></div>
  <iframe class="formtarget" name="formtarget"></iframe>
</form>

Answer 2

In your code you are calling resetForm and assigning what it returns to the done event handler. It is not calling that function when done is called.

You also are not passing the form reference to the function. So you will have an error message in your console.

$(document).ready(function() {
  $('#formElem').on('submit', function(event) {
    var form = this;
    event.preventDefault();
    let request = $.ajax({
      url: "https://api.chloemedranophotography.com/wp-json/contact-form-7/v1/contact-forms/54/feedback",
      type: "post",
      data: new FormData(form)
    }).done(function () { resetForm(form); });
  })

  function resetForm($form) {
    $form.find('input:text, input:tel, input:file, select, textarea').val('');
    $('datePicker').val('').attr('type', 'text').attr('type', 'date');
  }
});