Submit form using ajax in Wordpress

Question

I am trying to get the results of an ajax request in wordpress, but I get the result "0" in the javascript warning field, so the form looks like this:

<form class="form" id="ajax-contact-form" action="#"> <input type="text" name="name" id="name" placeholder="Name" required=""> <button type="submit" class="btn">Submit</button> </form> 

Javascript is as follows:

 $('#ajax-contact-form').submit(function(e){ $.ajax({ data: {action: 'contact_form'}, type: 'post', url: ajaxurl, success: function(data) { alert(data); // This prints '0', I want this to print whatever name the user inputs in the form. } }); }) 

And PHP:

 add_action('wp_ajax_contact_form', 'contact_form'); add_action('wp_ajax_nopriv_contact_form', 'contact_form'); function contact_form() { echo $_POST['name']; } 

Does anyone know if the code above is correct, I also tried $ _REQUEST ['name'] and it does not work.

Thanks a lot,

Answer 1

Try something like this, you have not added the name parameter that you expect in your PHP contact_form function, so you must add it to the data attribute in the jQuery ajax function call.

 $('#ajax-contact-form').submit(function(e){ var name = $("#name").val(); $.ajax({ data: {action: 'contact_form', name:name}, type: 'post', url: ajaxurl, success: function(data) { console.log(data); //should print out the name since you sent it along } }); }); 

Answer 2

You should also add an attribute for the name in your javascript.

It might look like this ........

 $('#ajax-contact-form').submit(function(e){ $.ajax({ data: {action: 'contact_form', name:name}, type: 'post', url: ajaxurl, success: function(data) { alert(data); } }); 

})