JQuery Ajax problem at passing the value of form
Hi,
I'm working on a generator that is supposed to do something after something is selected from forms. So here it goes:
I got two select forms now. After I select the value from the first form the value of the form is passed to the second form and it then generates it's own values depending on the value it gain. I realized that you can do this without page refresh with JQuery and I thought that would be nice and I gave it a try but now I'm stuck and here is my problem:
I've problem at passing the right value from the first form. I only want the value of the option that is selected. All my values are coming from MySQL database.
I've tried this: var str = $('#customer').val(); (customer being the id of my select tag of the form) but it just returns an empty array. I don't want to pass array in the first place. I just want to pass the value.
I've tried serialization too but iit passes the right value but it passes it so many times as I have options in my form.
Here is my code (testing, not ready yet):
<head>
-
$(document).ready(function(){
var str = $('#customer').val(); //get value of the selected option
$("#form1").submit(function(){
$.post(
"process.php",
str,
function(data){
alert(data) //just to test the value returned
}
);
});
return false;
});
</script>
</head>
<body>
<form id="form1" onsubmit="return false;">
<select id="customer" name="customer" size="" style='width:210px;>
<?php
$query="SELECT DISTINCT * FROM customerTable";
$result = Content($query);
while($row = mysql_fetch_array($result)) //values and the text for the options are fetched from database
{
if (($row['customer']) != NULL)
echo "<option name=customerOption type=text value='".$row['customerID']."' selected>".$row['customer']."</option>";
}
?>
</select>
<p id="submit_button">
<input value="Submit" type="submit">
</p></form>
at the moment at my process.php there is only print_r($_POST); to test if something is returned to html.
Please help and thanks in advance to everyone replying.