CODEWITHSUNDEEP
phpjqueryajax
Shwan Namiq
Shwan Namiq

Reputation: 631

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();
});
});

Upvotes: 0

Views: 209

Answers (2)

Timothy Kanski
Timothy Kanski

Reputation: 1888

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();
});
});

Upvotes: 1

Jorge Mejia
Jorge Mejia

Reputation: 1163

You can validate your form in jquery before sent, remember validate this infomration also in the server. 

   jQuery(function() {
    jQuery('#contactForm').submit(function(event) {
     event.preventDefault();

     if(jQuery('#bsnname').val() == ''){
        alert('bs name is empty');
        return;
      }
 if(jQuery('#bsnsubject').val() == ''){
        alert('bsnsubject is empty');
        return;
      }
if(jQuery('#bsnemail').val() == ''){
        alert('bsnemail is empty');
        return;
      }
if(jQuery('#bsnmessage').val() == ''){
        alert('bsnmessage is empty');
        return;
      }
        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) {
            console.log('done');
        }).fail(function(data) {
            console.log('Email Error');
        });
        event.preventDefault();
    });
    });

on your php file you can do somethig similar and return the error

Upvotes: 0

Related Questions