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 开发者_如何学Gosend 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>
in jQuery:
$.ajax({
type: 'POST',
Your code does:
$.ajax({
url: "/layout/js/jquery/forms/form_db_process.php",
type: formMethod,
And formMethod is set earlier:
var form = $(this),
//formData = email.serialize(),
formData = dataString,
formUrl = form.attr('action'),
formMethod = form.attr('method'),
Either override it, or actually change your form's METHOD
attribute to POST.
$.ajax
can do both GET and POST. This is the formtype that you pass, which is retrieved from the form's method
attribute, so you can just change that.
You can also use the $.get
or $.post
shorthands that call $.ajax
behind the screens.
First make sure that formMethod is 'POST' and I would pass data in json format rather than query string. In that case, you need to specify datatype and contentType accordingly.
精彩评论