Handling Ajax form with jQuery.post

[iNoize]

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 ?? 

[Ferdi Derksen]

Not sure, but is it even possible to refer to $input->post->variable without posting to a ProcessWire page? You should post the data to a ProcessWire page like /book/ (which has the book.php file as its template).

[Martijn Geerts]

I guess you don't POST the name submit.

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

[iNoize]

@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 

[Martijn Geerts]

You do yourself and others a favour, format your code nicely.

Debugging formatted code is so much easier.

[iNoize]

Yes you are right,

I don't understand why it's here so broken view. I use SublimeText and there seems to be ok. If I paste it to the Forum than I have this result. Don't understand why ?

[iLav]

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.