jquery to load a new page and post data from an on change event
Question
I am building a website that will identify parts based on 10 different measurements. I am wanting my my onchange event from my first drop down box to do two things. First, I need it to post my selection to a php variable on the next page. second, I want the function to load the next page which will give me another drop down list that only shows the options that also have the same measurement as the first list. I am basically building 10 pages that just keep adding on to my sql statement that generates my drop down list. I am just not sure how to send the jquery post to a php variable, and also how to load a new page. I am new to programming, so I am trying to keep this not too complicated. here is the basics of my code.
<html>
<head>
<script type = "text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type='text/javascript'>
function get() {
var lengthdata = $('#filter').serialize();
$.post('spline.php', lengthdata,
function(output){
$('#list').html(output);
});
}
</script>
</head>
<body>
<div id="id1"></div>
<?php
//database login and connection.
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "password";
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die("could not connect!");
$select_db = mysql_select_db('camdb') or die('could not select camdb database!!');
echo "<style type='text/css'>";
echo "td {padding: 10px;}";
echo "</style>";
echo "<form name='filter' id='filter'><table><tr>";
echo"<div id='lengthsel'>";
$query = "SELECT DISTINCT Length FROM camTable;";
$result = mysql_query($query);
echo"<td>Cam Length" . "<br/>";
echo"<select name=\"Length\" id='Length' onchange='get()'>/n";
echo"<option value=''>Select</option>";
while ($row = mysql_fetch_array($result)) {
echo "<option value='" . $row['Length'] . "'>" . $row['Length'] . "</option>";
}
echo "</select></td>";
echo"</tr></table></form>";
echo"</div>";
?>
<div id="list"></div>
</body>
</html>
this is basically what the rest of the pages are
<html>
<head>
<script type = "text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type='text/javascript'>
function get() {
var splinedata = $('#filter').serialize();
$.post('spider.php', splinedata,
function(output){
$('#list').html(output);
});
}
</script>
</head>
<body>
<?php
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "password";
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die("could not connect!");
$select_db = mysql_select_db('camdb') or die('could not select camdb database!!');
$sql = "SELECT * FROM camtable WHERE ";
if ($_REQUEST['Length'] != "") {
$sql.='length="' . mysql_real_escape_string($_REQUEST['Length']) . '";';
}
//$sql.="ORDER BY length, spline, spider, support, head, nose, grov1";
echo $sql . "<br/>";
$result = mysql_query($sql);
$sql = "SELECT * FROM camtable WHERE ";
if ($_REQUEST['Length'] != "") {
$sql.='length="' . mysql_real_escape_string($_REQUEST['Length']) . '";';
}
$result = mysql_query($sql);
echo"<td>Spline" . "<br/>";
echo"<select name=\"spline\"id='spline' onchange='get()'>/n";
echo"<option value=''>Select</option>";
while ($row = mysql_fetch_array($result)) {
echo "<option value='" . row['spline'] . "'>" . $row['spline'] . "</option>";
}
echo "</select></td>";
?>
</body>
</html>
1 answers
solution1
0 2013-07-01 03:21:29
I think what you are looking for is
$(document).ready(function(){
$('select').change(function(){ $('#form1')[0].submit();});
});
assuming your select is inside a form as <form id="form1" action="secondPage.php" method="post">
and in the second page you catch the value using $_POST['selectName']
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.