javascript - 为什么这个ajax表单没有重置？

Question

我有一个 headless WordPress 网站。我正在处理事件处理程序以提交联系表单。我正在使用 Contact Form 7。我尝试过使用 vanilla JS，我在这里使用 jQuery，因为它似乎是一个更好的选择，但我已经失去了理智。

本质上，表单已提交，但字段不清晰。我尝试过 JS 中的 form.reset() 、jQuery 中的 $('#formid')[0].reset() 以及下面的代码。我不知道为什么这不起作用，而且结果确实不太理想。有什么想法吗？

我完全承认，我在 javascript 中工作比在 jQuery 中工作更舒服，所以我可能会错过一些明显的东西。

如果我没有将 iframe 设置为表单目标，页面将重定向到包含 JSON 数据的白色页面。我是否遗漏了有关 event.preventDefault() 的内容？根据我的经验，它没有按应有的方式工作。

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

有几个单独的问题:

• .done(resetForm()) 不正确，因为它立即调用resetForm()并设置返回值 em> 来自该调用作为事件处理程序。
• 您需要在 resetForm() 方法调用中发送 $form 参数，因此请为 done() 提供完整的功能 block > 处理程序，包括该参数
• 在 jQuery AJAX 调用中发送 FormData 对象时，您需要将 processData 和 contentType 设置为 false，以便正确编码数据。
• jQuery 没有 :tel 和 :file 伪选择器。相反，您可以使用 :input 选择所有 input、textarea 和 select 元素来重置其值。
• 即使没有上述一点，也没有必要将日期控件的type更改为文本，然后再返回日期。

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