Help in Jquery form serialize result into php variable!! please

[emeralddragon]

Hi all,

 

I have recently i have found out a fantastic function in jquery called serialize, which allow form values to show without submitting it..

 

http://api.jquery.com/serialize/

 

I wanted to integrate it with php and phpmyadmin, but i couldn't understand the

 var str = $("form").serialize();
      $("#results").text(str);

 

How could I get the value and set it into variables in php??.. using php serialize function?

 

Please help me I'm lost, as I'm fresh to jquery and javascript

[.josh]

you need to actually submit the form so that it makes a request to your php script and go from there, grabbing the form vars from the $_GET or $_POST array (depending on which method your form is).  Alternatively, if you are not wanting to actually submit the form (doing a full page (re)load), you will need to do an AJAX call, which you can use with jquery's $.get() or $.post() method.  This will also make a request to your php script and you will also grab the vars from the same get or post array, but it won't (re)load your page. 

[emeralddragon]

Is it possible that once a field text is typed it will auto submit and get the values,

 

cause i would like to like give a summary of the field that have been typed, for example entering 2 dates, i would like to give the day difference in the same page..

 

The ajax full page reload will auto submit the form??

[Lautarox]

You could submit the form using ajax and get a response to use it on your page without need of reloading the hole page, serialize will output something like inputname=inputvalue&inputname2=inputvalue2 ... pefect to use when using an ajax request in php or get, as you wish. You can perfom an ajax request using the ajax function, http://api.jquery.com/jQuery.ajax/

Taken from the jquery api doc:

$.ajax({
   type: "POST", // you can use POST or GET method depending on how you will be using the vars on php
   url: "some.php", // the url to perform the ajax request
   data: "name=John&location=Boston", // the data, as serialize outputs the form data like that, you can use the data outputed by serializing your form
   success: function(msg){ // what to do with the php output
     alert( "Data Saved: " + msg );
   }
});

In php, you can use the vars, if using post, with $_POST['inputname'] and each one will output the input value

[emeralddragon]

Thanks Lautarox for the info and this late replies(due to sch work =(.. But i still need your help for the ajax function.. I am a noob =(..

<script >
  $.ajax({
   type: "POST", // you can use POST or GET method depending on how you will be using the vars on php
   url: "testtest.php", // the url to perform the ajax request
   data: $("#results"), // the data, as serialize outputs the form data like that, you can use the data outputed by serializing your form
   success: function(msg){ // what to do with the php output
     alert( "Data Saved: " + msg );
   }
});
</script>

 

This is what i put to test in testtest.php, and i not very sure how to get the result of the serialize.. Everytime the testtest.php is load the function will show data saved, with the msg( which is all the codes in dreamweaver)

 

here are the serialize code of mine,

<script>
    function showValues() {
      var str = $("form").serialize();
      $("#results").text(str);
    }
    $(":checkbox, :radio").click(showValues);
    $("select").change(showValues);
$("text").change(showValues);
    showValues();
</script>

 

I need help to able to use $_POST..

Thanks a million =D

[gevensen]

this one took me a while to figure out but works great, i will post the whole script and take what you need

 

<script>function select_statement(id){
var Mydata = '';
var db ="<?php echo $dbname; ?>";
var user ="<?php echo $_SESSION['username']; ?>";	
Mydata=Mydata+"id="+id;
Mydata=Mydata+"&account="+document.getElementById('bank_account').value;
Mydata=Mydata+"&db="+db;	
Mydata=Mydata+"&user="+user;
$("#statement_id").attr("value", id);
$("#account_selection_div").hide();
$("#reconcile_div").show();
$('#reconcile_div').html('<img src="../../sc/images/working.gif" height="20" width="20" />');
//alert(Mydata);
$.ajax( {
	url : 'reconcile/show_reconcile_ajax.php',
	type : 'post',
	data : Mydata,

	  		
	success : function( resp ) {
	var $response=$(resp);
    var reconciled = $response.find('#reconciled_response').html();
    var balance = $response.find('#balance_response').html();
    $('#reconcile_div').html($('#inner_reconcile_div', resp).html());
    if(reconciled>0){
	    // its reconciled
    	$('#button_table').hideColumns(1); // add expense button   
    	$('#button_table').hideColumns(2); // research
    $('#button_table').hideColumns(3); // reconcile button
    $('#button_table').showColumns(4); // reverse button
    $('#reconcile_table').hideColumns(2); // delete in reconcile table
    $('#reconcile_table').hideColumns(9); // edit in reconcile table
    $('#reconcile_table').hideColumns(11); // reconcile in reconcile table
    //alert("reconciled");
       	
    	
    	
    }
    if(reconciled<1){
        // its not reconciled
    	
    	$('#button_table').showColumns(1);	// add expense button
    	$('#button_table').showColumns(2);  // research
    	$('#button_table').hideColumns(3);  // default
    	if(balance<.01){
    	$('#button_table').showColumns(3);  }  // reconcile  
    	$('#button_table').hideColumns(4);  // reverse
    	$('#reconcile_table').showColumns(2); // delete in reconcile table
	    $('#reconcile_table').showColumns(9); // edit in reconcile table
	    $('#reconcile_table').showColumns(11); // reconcile in reconcile table
	    //alert(balance);
	    //alert("not reconciled");
    }


	}
});
}

</script>

 

take note of the

 

success : function( resp ) {
	var $response=$(resp);
    var reconciled = $response.find('#reconciled_response').html();

 

what var $response=$(resp);

    var reconciled = $response.find('#reconciled_response').html();

does in find the data in a php file that you have returned like this in the ajax php file

<div id="reconciled_response">
<?php echo $data1; ?>
</div>

you could write the data to an input field

$("#myinputfield").attr("value", reconciled);

without sending it to a specific div without serializing it, send the data to each field in a inner div and pull data with a response call

 
<div id="reconciled_response">
<?php echo $data1; ?>
</div>
<div id="reconciled_response2">
<?php echo $data2; ?>
</div>
<div id="reconciled_response3">
<?php echo $data3; ?>
</div>


var $response=$(resp);
var reconciled = $response.find('#reconciled_response').html();
var reconciled2 = $response.find('#reconciled_response2').html();
var reconciled3 = $response.find('#reconciled_response3').html();

$("#myinputfield").attr("value", reconciled);
$("#myinputfield2").attr("value", reconciled2);
$("#myinputfield3").attr("value", reconciled3);

i hope this made some kind of sense but you write to the divs in the php file you are calling with jquery and pull the response out and send it straight to a input field

 

[emeralddragon]

Sorry but i don't understand your codes :'( ..

 

success : function( resp ) {
      var $response=$(resp);
       var reconciled = $response.find('#reconciled_response').html();

 

 

I am unclear about function(resp).. so in the form i have to action to reconciled_response.html??.. what about serialize