Tengo un sitio de WordPress sin cabeza. Estoy trabajando en el controlador de eventos para enviar el formulario de contacto. Estoy usando el Formulario de contacto 7. Intenté usar Vanilla JS, estoy usando jQuery aquí porque parece una mejor opción y me estoy volviendo loco.
Esencialmente, el formulario se envía pero los campos no se borran. form.reset() en JS, $('#formid')[0].reset() en jQuery y el siguiente código. No sé por qué esto no funciona y el resultado es realmente subóptimo. ¿Algunas ideas?
Admitiré plenamente que me siento más cómodo trabajando en javascript que en jQuery, por lo que es posible que me esté perdiendo algo obvio.
Si no tengo el iframe configurado como destino del formulario, la página se redirige a una página blanca con datos JSON. ¿Me estoy perdiendo algo sobre event.preventDefault() ? No está funcionando como debería, y según mi experiencia, lo ha hecho.
$(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>En su código, está llamando a resetForm y asignando lo que devuelve al controlador de eventos hecho. No está llamando a esa función cuando se llama a done.
Tampoco está pasando la referencia del formulario a la función. Así que tendrás un mensaje de error en tu consola.
$(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'); } });