I'm fairly new to jQuery and JavaScript, and I've been trying to implement a jQuery contact form which calls to a PHP file to send the actual email.
Here is the jQuery portion which calls the PHP file after the jQuery validation passes:
$(this).click(function() {
var result = $.formValidator(options);
if (result && jQuery.isFunction(options.onSuccess)) {
options.onSuccess();
// Start Processor
if($(this).data('formstatus') !== 'submitting'){
// Setup variables
// Form Variables
var name = $(".form input#getstarted-name").val();
var number = $(".form input#getstarted-phone1").val() + ' ' + $(".form input#getstarted-phone2").val();
var company = $(".form input#getstarted-company").val();
var email = $(".form input#getstarted-email").val();
var message = $(".form textarea#getstarted-message").val();
var from_url = $(".form input#getstarted-from_url").val();
// Consolidate Variables
var dataString = 'name=' + name + '&number=' + number + '&company=' + company + '&email=' + email +
'&message=' + message + '&from_url=' + from_url;
var form = $(this),
//formData = email.serialize(),
formData = dataString,
formUrl = form.attr('action'),
formMethod = form.attr('method'),
responseMsg = $('#startproject-response');
//add status data to form
form.data('formstatus','submitting');
//show response message - waiting
responseMsg.hide()
.removeClass('response-error')
.removeClass('response-success')
.addClass('response-waiting')
.text('Please Wait...')
.fadeIn(200);
$.ajax({
url: "/layout/js/jquery/forms/form_db_process.php",
type: formMethod,
data: formData,
success:function(data){
//setup variables
var responseData = jQuery.parseJSON(data),
klass = '';
//response conditional
switch(responseData.status){
case 'error':
klass = 'response-error';
break;
case 'success':
klass = 'response-success';
break;
}
//show reponse message
responseMsg.fadeOut(200,function(){
$(this).removeClass('response-waiting')
.removeClass('response-error')
.addClass(klass)
.text(responseData.message)
.fadeIn(200,function(){
//set timeout to hide response message
setTimeout(function(){
responseMsg.fadeOut(200,function(){
$(this).removeClass(klass);
form.data('formstatus','idle');
});
},3000)
});
});
}
});
}
//prevent form from submitting
return false;
// End Processor
}
});
And here's the PHP file "form_db_process.php":
$name = mysql_real_escape_string($_GET['name']);
$number = mysql_real_escape_string($_GET['number']);
$company = mysql_real_escape_string($_GET['company']);
$email = mysql_real_escape_string($_GET['email']);
$message = mysql_real_escape_string($_GET['message']);
$ip = $_SERVER['REMOTE_ADDR'];
$timestamp = date("y/m/d : H:i:s", time());
$from_url = mysql_real_escape_string($_GET['from_url']);
// send email etc...
I've got this whole thing to work, but I was wondering how to change the GET to POST instead? I know how to do this with regular HTML + PHP, but jQuery I'm at a loss...
I looked here: http://api.jquery.com/jQuery.post/
But was unable to come up with anything workable/wasn't sure how to use it. Any help would be appreciated!!
// EDIT: I've added the HTML portion below (for the form):
<form id="startproject-form" class="form" method="post" action="">
<!-- ... form inputs here ... -->
</form>