Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

ajax form submission in wordpress

l got the code below handling form submission in WordPress. The form sends but for some reason l get the error response back instead of the success response. is there anything that am doing wrong with this code?

 $(function(){
     $("#contact-form").validate({
         errorElement: 'span',
         submitHandler: function(form) {

           var _data = {  'nonce' : '<?php echo wp_create_nonce( "ajax_post_author_credit_nonce" ); ?>', 'action' : 'contact_enquiry' }

           $(form).ajaxSubmit({
            dataType: 'json',
            data: _data,
            beforeSubmit: function(arr, $form, options) {

                var name = $('#contact-form input[name="name"]').fieldValue();
                var phone = $('#contact-form input[name="telephone"]').fieldValue();
                var email = $('#contact-form input[name="email"]').fieldValue();
                var company = $('#contact-form input[name="company"]').fieldValue();
                var enquiry = $('#contact-form textarea').fieldValue();


            },
            success: function(resp){
              console.log('sucess');

              setTimeout(function(){
                 $('.row-offcanvas .sidebar-offcanvas .btn-contact').click();
              }, 1000);


            },
            error: function(resp){
              alert('Sorry there was an error with your submission. Please try again later.');
              console.log(resp);
            }

          });

        }

       });
    });

2 Answers

validate and ajaxSubmit aren't normal jQuery methods... if you're using an additional plugin, please let us know what it is and share a link to it or its documentation, and also for your own code, make sure the plugin JS is being included and run before this code.

Sorry l forgot to add those. l am using the jQuery Form Plugin and jQuery Validate.

Okay so I don't know if I'm looking at the same plugins but jQuery Validate looks like it binds an event to run when a form is submitted.

Your ajaxSubmit method is being called from within the validate method... So it will only run when the form is submitted in the regular way (via the built in HTML form handling). Try take that out, and instead add to a regular jQuery submit method on the form element.

Validate takes an option sendForm that if set to false, will stop the HTML form handling (so you can do it with Ajax).

I don't see any options in Validate for errorElement or submitHandler...