After validating & submitting form, reset form + change some css styles

Question

I have a simple html contact form with validation check.

I would like to have some commands executed after a successful form submission. But the way I've set this whole thing up... I can't make it work.

HTML contact form:

<form id="mycontact_form" name="form_name" method="post" onsubmit="return validateForm();" action="https://domain.tld/cgi-bin/sendformmail.pl">

validateForm.js:

function validateForm() {
  //validating input fields
  if (!valid){
    return false;
  } else {
    if(condition1 == true)
     {
        document.form_name.submit(); return;
     }
    else {
        // doing stuff to form content
        document.form_name.submit(); return;
    }
    }
}

When the submit button is pressed, the form is validated and will be submitted to the perl script sendformmail.pl which return a HTML Status 204 so the user stays on this page and is not redirected (that's the only way I got this part to work).

Now what I would like to have after a successful submission is:

• clear/reset the form and
• some minor UI stuff: change background of 2 elements + placeholder/inner text of 2 input fields for thank you message.

But for example if I put document.form_name.reset() after the document.form_name.submit() , it's too fast. It resets the form before submissions. I also tried to call another (independent) function after the validateForm() in the onsubmit but that seems to be wrong (well, at least it's not working).

So I guess I need to put these 2 things (reset + CSS changes) in a separate function and call it after a successful form submission. But how, where and when?

I'm very interested to learn a simple yet effective solution. (but jQuery is also available)

Thank you for your help.

Answer 1

If your email script is on the same domain as your contact form, try submitting it via ajax. Here's a simple jQuery example, which would be in your onsubmit handler:

if (valid) {
    $.ajax({
        url: "/cgi-bin/sendformmail.pl",
        method: "POST",
        data: $("#mycontact_form").serialize()
    })
    .done(function() { // this happens after the form submit
        $("#mycontact_form")[0].reset();
    });
}

return false; // don't submit the form again non-ajax!

Otherwise, if on different domains, try setting the target of your form to the id of a hidden iframe on your page. Since this is cross-domain, you have no real way of knowing the result of the form submit due to the same origin policy . You can simply hope for the best and reset the form after X number of seconds:

if (valid) {
    $("#mycontact_form").submit();

    // clear form 3 seconds after submit
    window.setTimeout(function() {
        $("#mycontact_form")[0].reset();
    }, 3000);
}

Both of these approaches keep the user on the same page without a refresh.

Answer 2

I ended up using beforeSend with ajax instead of done . And instead of resetting the form I chose to clear the value of the input fields/textarea (there are only 3). I also included the preferred 'post-submission' style of the input fields/textarea in beforeSend to leave nothing to chance. Anyway, thank you for helping me & pointing me in the ajax direction.

$.ajax({
    url: "/cgi-bin/sendformmail.pl",
    method: "POST",
    data: $("#mycontact_form").serialize()
      beforeSend : function (){
                    // clear value of input fields/textarea & disable them
                    // use placeholders for "Thank you." etc.
                         }
    });