Email custom data through JQuery / Ajax in Wordpress - php

Question

I am trying to send some custom post data from a page that displays specific posts in a jquery pop-up email.
At the moment, I have a completed HTML form , and JQuery modal box setup.
Here is this js code for this:
jQuery(document).ready(function($){
var email = $( "#email" ),
message = $( "#message" ),
allFields = $( [] ).add( email ).add( message ),
tips = $( ".validateTips" );
$( ".email-course" )
.button()
.click(function() {
$( "#dialog-form" ).dialog( "open" );
});
$( "#dialog-form" ).dialog({
autoOpen: false,
modal: true,
width: 550,
height:260,
resizable: false,
show: 'fade',
title: 'Email course',
buttons: {
"Send": function() {
//Need help here
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
});
And the HTML form:
<div id="dialog-form" title="Email this course">
<form>
<fieldset>
<label for="email">To:</label>
<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
<label for="email">From:</label>
<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
<label for="message">Message (optional)</label>
<input type="text" name="message" id="message" value="" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>
and the button:
<div class="right"><button class="email-course">Email this course</button></div>
My question is how to read the data from the form and also I will have to pull some post data with ids from the page that loads them all and send it by Wordpress's wp_email I assume? I will have to merge the "message (optional)" with that specific post ID's data as well. Any other information I need please let me know. Thanks in advance.

Answer 1

Background:
jQuery has a .serialize() method that:
Encode a set of form elements as a string for submission.
With the use of this method you can serialize all the fields values without having to collect them individually.
For example, you can do:
$('form').serialize()
and you will get a string with all the collected form fields & values, then you can pass this string to the server in a data: {} object inside a $.ajax request.
.serialize() documentation at jqAPI
Filling the Send callback:
"Send": function() {
//Need help here
$.ajax({
data : $('#dialog-form form').serialize(),
error : function (jqXHR, textStatus:string, errorThrown:string) {
if (errorThrown) {
// Show message.
}
},
success : function (response_from_server:ResponseFromServer, statusText:string, xhr) {
// Do post-processing here.
},
type : 'POST',
url : ajaxurl
});
},
Here:
ajaxurl: A javascrip global variable set by WordPress to be used in AJAX queries pointing to '/wp-admin/admin-ajax.php'
$('#dialog-form form').serialize() : This method is the one that will serialize all the Successfull HTML controls present in the form and will append them as data in the AJAX query.
Here only is missing the nonce checking to validate the AJAX request, I didn't put it there to make the code simple.
Then on the WordPress PHP backend you have to capture that serialize that data in order to process it as you like.
Hope it helps.