Contact form submit

I use the following function to submit a contact form


$("#contact-form").on("submit", function(e) {
    e.preventDefault();
    $.ajax({
        url : "/connect",
        type: "post",
        data: $(this).serialize(),
        success: function(data){
            $("#contact-form").fadeOut(500);
            $("#contact_gegevens").fadeOut(500);
            $("#response").html(data).fadeIn(1000);
        }
    });
});

Basically this is working fine, only sometimes the server response is very low so people start to push the button again and again so the message is sended several times. Is there some kind of progress overlay I can use to notify the user that the email is sending?

Thank you in advance

Just disable the submit button.

$("#contact-form").on("submit", function(e) {
    e.preventDefault();
    $('#btn-submit').attr('disabled', 'disabled');

    var submitTxt = $('#btn-submit').text();
    $('#btn-submit').text('submitting...');
    
    $.ajax({
        url : "/connect",
        type: "post",
        data: $(this).serialize(),
        success: function(data){
            $("#contact-form").fadeOut(500);
            $("#contact_gegevens").fadeOut(500);
            $("#response").html(data).fadeIn(1000);
        },
        error: function (xhr, ajaxOptions, thrownError) {
          // tell the user it didn't work somehow here
          $('#btn-submit').text(submitTxt); // change button text back to whatever it was
        }
    });
});
1 Like

Hi mawburn. That works great thanks a lot

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.