Shwan Namiq Shwan Namiq - 7 months ago 26
Javascript Question

Php Ajax contact form repeat errors when click on submit button

I created the contact form by php and jquery ajax.The below code work without any problem but i have tow problems.One: when i click on send button show all errors. For example i want when input name is empty only show empty error and don't show length error.Two: when i click on send button more than one time, repeat or show errors every time. please see my code and solve my problems and other problem if you see it.

jQuery(function() {
jQuery('#contactForm').submit(function(event) {
var bsnConData = {
'name':jQuery('#bsnname').val(),
'subject':jQuery('#bsnsubject').val(),
'email':jQuery('#bsnemail').val(),
'message':jQuery('#bsnmessage').val()
};
jQuery.ajax({
url: 'http://localhost/wp/wp-content/plugins/Yallanpe-BSN/inc/class-contact-inc.php',
type: 'POST',
data: bsnConData,
dataType: 'json',
cache: false
}).done(function(data) {
if (data.success == false) {
if (data.errors.nameEmpty) {
jQuery('.form-name').append('<p>'+ data.errors.nameEmpty +'</p>');
}
if (data.errors.nameLengthErrors) {
jQuery('.form-name').append('<p>'+ data.errors.nameLengthErrors +'</p>');
}
if (data.errors.messageEmpty) {
jQuery('.form-message').append('<p>'+ data.errors.messageEmpty +'</p>');
}
if (data.errors.emailEmpty) {
jQuery('.form-email').append('<p>'+ data.errors.emailEmpty +'</p>');
}
} else {
jQuery('#response').html('<p>'+ data.errors.messageSent +'</p>');
}
}).fail(function(data) {
console.log('Email Error');
});
event.preventDefault();
});
});

Answer

Use "Else If" to limit yourself to only one error, if that's what you want. To prevent multiple firing of the code, make a global flag (myFlag). Something like this:

var myObject = {};
myObject.myFlag = false;

jQuery(function() {
jQuery('#contactForm').submit(function(event) {
    var bsnConData = {
        'name':jQuery('#bsnname').val(),
        'subject':jQuery('#bsnsubject').val(),
        'email':jQuery('#bsnemail').val(),
        'message':jQuery('#bsnmessage').val()
    };
    jQuery.ajax({
        url: 'http://localhost/wp/wp-content/plugins/Yallanpe-BSN/inc/class-contact-inc.php',
        type: 'POST',
        data: bsnConData,
        dataType: 'json',
        cache: false
    }).done(function(data) {
      if(myObject.myFlag != true){
        if (data.success == false) {
            myObject.myFlag = true;
            if (data.errors.nameEmpty) {
                jQuery('.form-name').append('<p>'+ data.errors.nameEmpty +'</p>');
            }
            else if (data.errors.nameLengthErrors) {
                jQuery('.form-name').append('<p>'+ data.errors.nameLengthErrors +'</p>');
            }
            else if (data.errors.messageEmpty) {
                jQuery('.form-message').append('<p>'+ data.errors.messageEmpty +'</p>');
            }
            else if (data.errors.emailEmpty) {
                jQuery('.form-email').append('<p>'+ data.errors.emailEmpty +'</p>');
            }
        } else {
            jQuery('#response').html('<p>'+ data.errors.messageSent +'</p>');
        }
      }
    }).fail(function(data) {
        console.log('Email Error');
    });
    event.preventDefault();
});
});