Passing array data from JavaScript to PHP?

JavaScript
1

Hi guys,

This is what I’ve tried so far.
HTML:


<html>
<head>
<title>Pass JS array to PHP.</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

</head>

<body>
	<h3>Pass JavaScript array into PHP.</h3>
	<form method="POST">
		<input type="hidden" id="jsarray" name="jsarray" value="" />
		<input type="submit" id="#btn" value="Sumbit" />
	</form>
	<br>
	<div id="response"></div>
</body>

<script type="text/javascript">
	$(document).ready(function(){
	    //attach to the button a click event
	    $('#btn').click(function(){
	        //get the value from the textbox
	        //var jsarray = $('#jsarray').val();
	
	        var jsarray = new Array();
			jsarray[0] = "Saab";
			jsarray[1] = "Volvo";
			jsarray[2] = "BMW";
			
			$('#jsarray').val() = jsarray;
	
	        if(typeof jsarray !== 'undefined') {
				//send txt to the server
	            //notice the function at the end. this gets called after the data has been sent
	            $.post('<?php echo base_url('admin/js2php_proc'); ?>', {'text':jsarray}, function(data){
	            	//Now data is an object, so put the message in the div
	                $('#response').text(data.message);
	            }, 'json');
	        }
	    });
	});
</script>
</html>

PHP:


	//Capture data array from AJAX and process it...
	function js2php_proc() {
		if(!empty($_POST)){
		    //start an output var
		    $output = array();
		
		    //do any processing here.
		    //$output['message'] = "Array successfully sent!";
		    $output['message'] = $_POST['jsarray'];
		
		    //send the output back to the client
		    echo json_encode($output);
		}
	}

Unfortunately, It doesn’t work.
Anyone would like to help me here?

Thanks in advance.

2

I think I partially solved this problem,

HTML:


<html>
<head>
<title>Pass JS array to PHP.</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

</head>

<body>
	<h3>Pass JavaScript array into PHP.</h3>
	<form action="<?php echo base_url('admin/js2php_proc'); ?>" method="post"> 
		<input type="hidden" id="str" name="str" value="" /> 
		<input type="submit" id="btn" name="submit" value="Submit" />
 	</form>
 	
	<script> 
		var jsarray = new Array();
		jsarray[0] = "Saab";
		jsarray[1] = "Volvo";
		jsarray[2] = "BMW";		 
		 
		$(document).ready(function(){ 
		  $('#btn').click(function(){ // prepare button inserts the JSON string in the hidden element 
		    $('#str').val(JSON.stringify(jsarray)); 
		  }); 
		}); 
	</script> 
</body>
</html>

PHP:


//Capture data array from AJAX and process it...
function js2php_proc() {
  if(isset($_POST['submit'])) 
  { 
	$str = json_decode($_POST['str'], true); 
	var_dump($str); 
  } 
}

But I need to convert this into AJAX.

Anyone would like to help?

Thanks in advance.

3

I already figured it out.


<html>
<head>
<title>Pass JS array to PHP.</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

</head>

<body>
	<h3>Pass JavaScript array into PHP.</h3>
	<form id="myForm" action="<?php echo base_url('admin/js2php_proc'); ?>" method="post"> 
		<input type="hidden" id="str" name="str" value="" /> 
		<input type="submit" id="btn" name="submit" value="Submit" />
 	</form>
 	
	<span id="result"></span> 	
 	
	<script>
		var jsarray = new Array();
		jsarray[0] = "Saab";
		jsarray[1] = "Volvo";
		jsarray[2] = "BMW";		 
	
		$(document).ready(function(){
			$("#btn").click( function() {
				$.post( $("#myForm").attr("action"),
					 $('#str').val(JSON.stringify(jsarray)),  
			         //$("#myForm :input").serializeArray(), 
			         function(info){ $("#result").html(info); 
				});
			});
			 
			$("#myForm").submit( function() {
				return false;	
			});
			
		});
	</script>
	
</body>
</html>



	//Capture data array from AJAX and process it...
	function js2php_proc() {
		$str = json_decode($_POST['str'], true); 
		echo json_encode($str);
	}

Problem solved.