AJAX Form Post Submission using WordPress

So I’m using AJAX to submit forms and just learning from scratch. I found a cool tutorial that shows how to submit AJAX using a link and captures the data using the GET command and adding data attributes to tag.


However, I’d like to submit a form instead of a link.

I’ve done everything on this tutorial: create the html form, create the processing function, create the queing javascript function all while using WP’s AJAX functions.

The thing I’m stuck in is the javascript function.

Thank you for such a great introduction! I do not know Javascript and I’m learning both AJAX and javascript as I go.

Here is my form:

<form name='hm_edit_field_form' id='hm_edit_field_form' action='http://mydomain.com/childsite/wp-admin/admin-ajax.php?action=hm_edit_field&nonce=15a401ef5e' method='post'>
<input type='text' class='regular-text' maxlength='25' value='' name='hm_fieldvalue'>
<input type='hidden' value='FNAME' name='hm_field'><input type='hidden' value='5' name='userid'>
<input id='hm_button_savefield' type='submit' name='hm_button_savefield' value='Save'>

Here is my javascript:

//AJAX function to store data when field is edited
jQuery(document).ready( function($) {

$(‘#hm_button_savefield’).submit(function(event) {

var input = $(this);
var formElm = $(input).parents(‘form.hm_edit_field_form’);
var tempHtml = formElm.html();

var nonce = jQuery(this).attr(“data-nonce”);
var postData = getPostData(‘#hm_edit_field_form *[name]‘);

type : “post”,
dataType : “json”,
url : HM_Ajax.ajaxurl,
data : postData,
success: function(response) {

if(response.type == “success”) {
document.getElementById(“hm_editfield-” + hm_field).innerHTML = response.field_value
else {


}); //Close jQuery.ajax function

}); //Close input click function

//Get all POSTable data from form.
function getPostData(selector){
var postData = {};
$.each($(selector), function(index,el){
el = $(el);
postData[el.attr('name')] = el.attr(‘value’);
return postData

}) //Close jQuery ready function

What’s wrong? How can I accept the form information and check the nonce?

Any help would be greatly appreciated!

Thank you,