How do I pass JQuery values to next PHP page? - php

Question

Background info: I am using Spectrum.js http://bgrins.github.io/spectrum/ for a color picker. To utilize this within a form it is set as input type text. This is used in the form to pass the color to a php parser that then passes the value to be combined with a .pov povray file that is then rendered on a unix box.
I am trying to pass the value from this color picker to the next php page. I've spent hours trying to find a solution and came up with nothing.
The weird thing is I am 'alerting' the values out to my tester_done.php page and I can see the correct values in the alert. This works when I have the button just function as a button. When I change the button type to submit though it no longer works. I want to see the values of the color picker when I click submit. Any help is greatly appreciated as I'm pulling my hair out! I just want the values from tester.php to post to tester_done.php and I have no idea why it's not working when I have it alert I get the right values, but when I try to change the button to submit so that values post all I get is rgb<0,0,0>.
Code for tester.php:
<form action="tester_done.php" method="post">
<input type='text' class = "basic" name ="field1" id = "field1"/>
<input type='text' class = "basic2" name ="field2" id = "field2"/>
<input type="button" value="Submit" id="send">
</form>
<script type="text/javascript">
$(".basic").spectrum({
preferredFormat: "rgb",
color: "#ffcccc"
});
$(".basic2").spectrum({
preferredFormat: "rgb",
color: "#ff0"
});
jQuery(function(){
var field1 = $('#field1');
var field2 = $('#field2');
$('#send').click(function(){
jQuery.ajax({
type: "POST",
url: "tester_done.php",
data: {field1value: field1.val(), field2value: field2.val()},
dataType: "html",
success: function(data){
alert(data);
}
});
});
});
</script>
Code for tester_done.php:
<?php
$base_value=255;
$characters = array("(", "r", "g", "b", ")");
$field1value = isset($_POST['field1value'])? $_POST['field1value'] : '';
$nfield1value = str_replace($characters, "", $field1value);
$nsfield1value = $nfield1value;
$nsf1arr = array_map("intval", explode(", ", $nsfield1value));
$c_body_r = $nsf1arr[0] / $base_value;
$c_body_r_round = round ($c_body_r, 6);
$c_body_g = $nsf1arr[1] / $base_value;
$c_body_g_round = round ($c_body_g, 6);
$c_body_b = $nsf1arr[2] / $base_value;
$c_body_b_round = round ($c_body_b, 6);
$c_body = "rgb<".$c_body_r_round.", ".$c_body_g_round.", ".$c_body_b_round.">";
echo $c_body;
$field2value = isset($_POST['field2value'])? $_POST['field2value'] : '';
$nfield2value = str_replace($characters, "", $field2value);
$nsfield2value = $nfield2value;
$nsf2arr = array_map("intval", explode(", ", $nsfield2value));
$c_top_r = $nsf2arr[0] / $base_value;
$c_top_r_round = round ($c_top_r, 6);
$c_top_g = $nsf2arr[1] / $base_value;
$c_top_g_round = round ($c_top_g, 6);
$c_top_b = $nsf2arr[2] / $base_value;
$c_top_b_round = round ($c_top_b, 6);
$c_top = "rgb<".$c_top_r_round.", ".$c_top_g_round.", ".$c_top_b_round.">";
echo $c_top;
?>

Answer 1

You dont need JQuery! "< form action="tester_done.php" method="post">" Takes care of posting the data contained within the input tags of the form.
But, incase you want an ajax response, i will suggest getting rid of the action attribute, and using .serializeArray() in the data field of your $.ajax call to pass the data in the form as url parameters.
Possible Usage: Given that form id="NewForm", $.ajax({type: "POST",
url: "tester_done.php",
data: $('#NewForm').serializeArray(),dataType: 'html',success: function(data){alert(data);}});
NOTE: The name of the parameters passed is the same as that of the input tags in your html form, i.e for field1 input, $_POST['field1'] in tester_done.php, when using this method.

Answer 2

You can use submit as well:
$('form').submit(function(){
jQuery.ajax({
type: "POST",
url: "tester_done.php",
data: {field1value: field1.val(), field2value: field2.val()},
dataType: "html",
success: function(data){
alert(data);
}
});
});
You can also make the button a simple button (not submit) as before, then submit the form with JavaScript:
$('#send').click(function(){
jQuery.ajax({
type: "POST",
url: "tester_done.php",
data: {field1value: field1.val(), field2value: field2.val()},
dataType: "html",
success: function(data){
alert(data);
}
});
$('form').submit();
});