Jump to content

Handling Ajax form with jQuery.post


iNoize
 Share

Recommended Posts

Hello, 

I try to realize some booking form via jQuery.post method. 

It works to send the data to the book.php file. 
Whats next ? How to handle the data right. this is the JS code 

 

jQuery.post("./book.php",{ xx_name: name, xx_email: email, xx_date: date, xx_time: time, xx_message:message, xx_contact: contact}, function(data) {
jQuery(".book_online_form .returnmessage").append(data);//Append returned message to message paragraph
									
if(jQuery(".book_online_form .returnmessage span.book_error").length){
     jQuery(".book_online_form .returnmessage").slideDown(500).delay(2000).slideUp(500);		
}else{
    jQuery(".book_online_form .returnmessage").append("<span class='book_success'>"+ success +"</span>")
    jQuery(".book_online_form .returnmessage").slideDown(500).delay(4000).slideUp(500);
    setTimeout(function(){  $.magnificPopup.close() }, 5500);
}
									
if(data==""){
jQuery(".book_online_form")[0].reset();//To reset form fields on success
}
});

It works for me i get the data but what now ? how to handlte this right ? 
this is the post.php 
 

<?php  

include("./index.php"); 
// include header markup 
$sent = false;
$error = '';
$emailTo = 'my@email.here'; // or pull from PW page field

// sanitize form values or create empty
$form = array(
    'fullname' => $sanitizer->text($input->post->name),
    'email' => $sanitizer->email($input->post->email),
    'comments' => $sanitizer->textarea($input->post->message),
    ); 

print "CONTENT_TYPE: " . $_SERVER['CONTENT_TYPE'] . "<BR />";
$data = file_get_contents('php://input');   // Dont really know what happens but it works 
print "DATA: <pre>";
var_dump($data);
var_dump($_POST);
var_dump($form);
print "</pre>";


if($input->post->submit) {

   $name = $_REQUEST['xx_name'];  
   echo "Welcome 1". $name; // DONT WORK 

 }else{

 	 echo "Something is wrong on the submit ";
 }

if( $_REQUEST["xx_name"] ) {

   $name = $_REQUEST['xx_name'];
   echo "Welcome 2". $name;   //    WORK 
}

I have attached the output. 

how to act with the pw $input->post->submit and the form array for example ?? 

post-957-0-72864000-1448354947_thumb.jpg

Link to comment
Share on other sites

@Ferdi 

it works because i bootstraped pw with include("./index.php"); 

I guess you don't POST the name submit.

So $input->post->submit is not there, resulting in a false 

that was the solution. I dont know its the best solution but i solved this with 

ajaxContentAdded: function(){
jQuery(".book_submit").click(function(){
var name 		= jQuery(".book_online_form #name").val();
var email 		= jQuery(".book_online_form #email").val();
var date 		= jQuery(".book_online_form #reservation-date").val();
var time 		= jQuery(".book_online_form #reservation-time").val();
var message 	= jQuery(".book_online_form #message").val();
var contact 	= jQuery(".book_online_form #contact").val();
var submit      = 'submit';
var success     = jQuery(".book_online_form .returnmessage").data('success');
jQuery(".book_online_form .returnmessage").empty(); //To empty previous error/success message.
							//checking for blank fields	
							if(name==''||email==''||contact==''||date==''||message==''){
								//alert("Please Fill Required Fields"); 
								jQuery('div.empty_notice').slideDown(500).delay(2000).slideUp(500);
							}
							else{
								// Returns successful data submission message when the entered information is stored in database.
								jQuery.post("./book.php",{ xx_submit:submit, xx_name: name, xx_email: email, xx_date: date, xx_time: time, xx_message:message, xx_contact: contact}, function(data) {

									
									jQuery(".book_online_form .returnmessage").append(data);//Append returned message to message paragraph
									
									
									if(jQuery(".book_online_form .returnmessage span.book_error").length){
										jQuery(".book_online_form .returnmessage").slideDown(500).delay(2000).slideUp(500);		
									}else{
										jQuery(".book_online_form .returnmessage").append("<span class='book_success'>"+ success +"</span>")
										jQuery(".book_online_form .returnmessage").slideDown(500).delay(4000).slideUp(500);
										 //setTimeout(function(){  $.magnificPopup.close() }, 5500);
									}
									
									if(data==""){
										jQuery(".book_online_form")[0].reset();//To reset form fields on success
									}
									
								});
							}
						 
						});

and in the php coe if($input->post->xx_submit) { 

Thanks 

Link to comment
Share on other sites

  • 1 year later...

It seems your jQuery Post method is not working. In such situations you can apply jQuery .Deferred() which are  chainable utility object with methods to register multiple callbacks. See this jQuery Post method example where they have applied the .done() and .fail() Deferred events in the Post method. 

On the .done() show the returned value and on the .fail() you can find out the error message which you get like this:

Spoiler

alert("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText);

I think it will help you.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...