I’ve got a form with a bunch of search options, such as checkboxes, sliders, radio buttons, etc. I want to have the results show up dynamically right on that same page. Let me give my comprehensive code here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<link type="text/css" href="css/custom-theme/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
<script src="file:///F|/Website Design Environment/EasyPHP-5.3.8.1/ui/jquery.ui.core.js"></script>
<script src="file:///F|/Website Design Environment/EasyPHP-5.3.8.1/ui/jquery.ui.widget.js"></script>
<script src="file:///F|/Website Design Environment/EasyPHP-5.3.8.1/ui/jquery.effects.core.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.slider.js"></script>
<script>
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 100000,
values: [ 0, 100000 ],
step: [5000],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
$("#minCharge").val(ui.values[ 0 ]);
$("#maxCharge").val(ui.values[ 1 ]);
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
</script>
<script>
$(function() {
$( "#slider-range2" ).slider({
range: true,
min: 0,
max: 70000,
values: [ 0, 70000 ],
step: [1000],
slide: function( event, ui ) {
$( "#amount2" ).val( "" + ui.values[ 0 ] + " - " + ui.values[ 1 ] );
$("#minStudents").val(ui.values[ 0 ]);
$("#maxStudents").val(ui.values[ 1 ]);
}
});
$( "#amount2" ).val( "" + $( "#slider-range2" ).slider( "values", 0 ) +
" - " + $( "#slider-range2" ).slider( "values", 1 ) );
});
</script>
<script>
$(function() {
$( "#slider-range3" ).slider({
range: true,
min: 0,
max: 800,
values: [ 0, 800 ],
step: [10],
slide: function( event, ui ) {
$( "#amount3" ).val( "" + ui.values[ 0 ] + " - " + ui.values[ 1 ] );
$("#minSATverbal").val(ui.values[ 0 ]);
$("#maxSATverbal").val(ui.values[ 1 ]);
}
});
$( "#amount3" ).val( "" + $( "#slider-range3" ).slider( "values", 0 ) +
" - " + $( "#slider-range3" ).slider( "values", 1 ) );
});
</script>
<script>
$(function() {
$( "#slider-range4" ).slider({
range: true,
min: 0,
max: 800,
values: [ 0, 800 ],
step: [10],
slide: function( event, ui ) {
$( "#amount4" ).val( "" + ui.values[ 0 ] + " - " + ui.values[ 1 ] );
$("#minSATmath").val(ui.values[ 0 ]);
$("#maxSATmath").val(ui.values[ 1 ]);
}
});
$( "#amount4" ).val( "" + $( "#slider-range4" ).slider( "values", 0 ) +
" - " + $( "#slider-range4" ).slider( "values", 1 ) );
});
</script>
<script>
$(function() {
$( "#slider-range5" ).slider({
range: true,
min: 0,
max: 800,
values: [ 0, 800 ],
step: [10],
slide: function( event, ui ) {
$( "#amount5" ).val( "" + ui.values[ 0 ] + " - " + ui.values[ 1 ] );
$("#minSATwriting").val(ui.values[ 0 ]);
$("#maxSATwriting").val(ui.values[ 1 ]);
}
});
$( "#amount5" ).val( "" + $( "#slider-range5" ).slider( "values", 0 ) +
" - " + $( "#slider-range5" ).slider( "values", 1 ) );
});
</script>
<script>
$(function() {
$( "#slider-range6" ).slider({
range: true,
min: 0,
max: 800,
values: [ 0, 800 ],
step: [10],
slide: function( event, ui ) {
$( "#amount6" ).val( "" + ui.values[ 0 ] + " - " + ui.values[ 1 ] );
$("#minGPA").val(ui.values[ 0 ]);
$("#maxGPA").val(ui.values[ 1 ]);
}
});
$( "#amount6" ).val( "" + $( "#slider-range6" ).slider( "values", 0 ) +
" - " + $( "#slider-range6" ).slider( "values", 1 ) );
});
</script>
<script type="text/javascript">
$(function () {
$('#boogie').change(function(){
var str=$('#boogie').serialize();
$.ajax ({
url: "process.php", // your processing php's url (SAME DOMAIN ONLY!)
type: 'POST',
data: ({p : str}),// give your form an id
dataType: 'text',
success: function(d) {
$('#result').html(d);// an element that should contain your results. process.php generates html this adds that html to your DOM
}
});
});
});
</script>
</head>
<body onload='init()'>
<input type="text" id="inp" name="inp"/></span>
<BR /><BR /><BR /><BR /><BR /><BR />
<div class="result"></div>
<form id="boogie">
<div>
<div style="height:100px;"></div>
<input type="checkbox" value="1" name="DURA_SCH"> Two-Year Institution<br />
<input type="checkbox" value="2" name="DURA_SCH"> Four-Year Institution<br />
<div style="height:100px;"></div>
<input type="checkbox" value="1" name="CTRL_SCH"> Public<br />
<input type="checkbox" value="2" name="CTRL_SCH"> Private<br />
<div style="height:100px;"></div>
<label for="amount" style="margin-left:43px;"></label>
<input type="text" id="amount" style="border:0; font-weight:bold;" />
<input id="minCharge" value="0" name="minCharge" type="hidden" />
<input id="maxCharge" value="100000" name="maxCharge" type="hidden" />
<div id="slider-range" style="width:300px; margin-left:43px;"></div>
<div style="height:100px;"></div>
<label for="amount2" style="margin-left:43px;">Students:</label>
<input type="text" id="amount2" style="border:0; font-weight:bold;" />
<input id="minStudents" value="0" name="minStudents" type="hidden" />
<input id="maxStudents" value="70000" name="maxStudents" type="hidden" />
<div id="slider-range2" style="width:300px; margin-left:43px;"></div>
<div style="height:100px;"></div>
<input type="checkbox" value="AnyPlace" name="AnyPlace"> Any Place<br />
<input type="checkbox" value="Urban" name="Urban"> Urban<br />
<input type="checkbox" value="Suburban" name="Suburban"> Suburban<br />
<input type="checkbox" value="Town" name="Town"> Town<br />
<input type="checkbox" value="Rural" name="Rural"> Rural<br />
<div style="height:100px;"></div>
<input type="checkbox" value="Northeast" name="Northeast"> Northeast<br />
<input type="checkbox" value="Midwest" name="Midwest"> Midwest<br />
<input type="checkbox" value="South" name="South"> South<br />
<input type="checkbox" value="West" name="West"> West<br />
<input type="checkbox" value="Outlying" name="Outlying"> Outlying Areas (like Hawaii and Alaska)<br />
<div style="height:100px;"></div>
<label for="amount3" style="margin-left:43px;">SAT Verbal Score:</label>
<input type="text" id="amount3" style="border:0; font-weight:bold;" />
<input id="minSATverbal" value="0" name="minSATverbal" type="hidden" />
<input id="maxSATverbal" value="800" name="maxSATverbal" type="hidden" />
<div id="slider-range3" style="width:300px; margin-left:43px;"></div>
<label for="amount4" style="margin-left:43px;">SAT Math Score:</label>
<input type="text" id="amount4" style="border:0; font-weight:bold;" />
<input id="minSATmath" value="0" name="minSATmath" type="hidden" />
<input id="maxSATmath" value="800" name="maxSATmath" type="hidden" />
<div id="slider-range4" style="width:300px; margin-left:43px;"></div>
<label for="amount5" style="margin-left:43px;">SAT Writing Score:</label>
<input type="text" id="amount5" style="border:0; font-weight:bold;" />
<input id="minSATwriting" value="0" name="minSATwriting" type="hidden" />
<input id="maxSATwriting" value="800" name="maxSATwriting" type="hidden" />
<div id="slider-range5" style="width:300px; margin-left:43px;"></div>
<label for="amount6" style="margin-left:43px;">Average GPA:</label>
<input type="text" id="amount6" style="border:0; font-weight:bold;" />
<input id="minGPA" value="0" name="minGPA" type="hidden" />
<input id="maxGPA" value="800" name="maxGPA" type="hidden" />
<div id="slider-range6" style="width:300px; margin-left:43px;"></div>
<input type="submit" value="submit" name="submit">
</div>
</form>
</body>
</html>
The input box works all fine and dandy, but now I still need to figure out how to post the checkbox, radio, and slider variables, I’m guessing using a similar process of jquery and ajax for dynamically retrieved results. BTW, here’s my php page:
<?php
$name=$_POST['p'];
require "connect_to_mysql.php";
$query = mysql_query("SELECT * FROM post_sec_all_stats_use WHERE UNITID=$name");
while($row = mysql_fetch_assoc($query)){
echo $row['UNITID'];
}
?>
I had a search going like the following before I had decided to go dynamic:
<?php
require "connect_to_mysql.php";
$sql = "SELECT * FROM post_sec_all_stats_use WHERE 1=1 AND ROOM=1 AND OPEN_DEG_POSTSEC_SCH=1";
if (isset($_POST ['dura_sch'])) {
$sql .= " AND ";
$sql .= "" .$_POST ['dura_sch']. "";
}
if (isset($_POST['minCharge'])) {
$sql .= " AND ( ";
$sql .= "TOTAL_CHG BETWEEN " .$_POST['minCharge']. " AND ".$_POST ['maxCharge'].")";
}
if (isset($_POST ['ctrl_sch'])) {
$sql .= " AND ";
$sql .= "(" .$_POST ['ctrl_sch']. ")";
}
if (isset($_POST['minStudents'])) {
$sql .= " AND ( ";
$sql .= "TOTAL_STS BETWEEN " .$_POST['minStudents']. " AND ".$_POST ['maxStudents'].")";
}
if (isset($_POST['AnyPlace'])) {
$sql .= " AND ( ";
$sql .= "(POPU_AREA_SCH>=11 AND POPU_AREA_SCH<=13) OR (POPU_AREA_SCH>=21 AND POPU_AREA_SCH<=23) OR (POPU_AREA_SCH>=31 AND POPU_AREA_SCH<=33) OR (POPU_AREA_SCH>=41 AND POPU_AREA_SCH<=43)";
}
else $sql .= " AND ( FALSE ";
if (isset($_POST['Urban'])) {
$sql .= " OR ";
$sql .= "(POPU_AREA_SCH>=11 AND POPU_AREA_SCH<=13)";
}
else $sql .= " OR FALSE ";
if (isset($_POST['Suburban'])) {
$sql .= " OR ";
$sql .= "(POPU_AREA_SCH>=21 AND POPU_AREA_SCH<=23)";
}
else $sql .= " OR FALSE ";
if (isset($_POST['Town'])) {
$sql .= " OR ";
$sql .= "(POPU_AREA_SCH>=31 AND POPU_AREA_SCH<=33)";
}
else $sql .= " OR FALSE ";
if (isset($_POST['Rural'])) {
$sql .= " OR ";
$sql .= "(POPU_AREA_SCH>=41 AND POPU_AREA_SCH<=43) )";
}
else $sql .= " OR FALSE ) ";
if (isset($_POST['Northeast'])) {
$sql .= "AND ( ";
$sql .= "(REGION_SCH=1 OR REGION_SCH=2)";
}
else $sql .= " AND ( FALSE ";
if (isset($_POST['Midwest'])) {
$sql .= " OR ";
$sql .= "(REGION_SCH=3 OR REGION_SCH=4)";
}
else $sql .= " OR FALSE ";
if (isset($_POST['South'])) {
$sql .= " OR ";
$sql .= "(REGION_SCH=5 OR REGION_SCH=6)";
}
else $sql .= " OR FALSE ";
if (isset($_POST['West'])) {
$sql .= " OR ";
$sql .= "(REGION_SCH=7 OR REGION_SCH=8)";
}
else $sql .= " OR FALSE ";
if (isset($_POST['Outlying'])) {
$sql .= " OR ";
$sql .= "(REGION_SCH=9) )";
}
else $sql .= " OR FALSE ) ";
if (isset($_POST['minSATverbal'])) {
$sql .= " AND ( ";
$sql .= "SAT_VR_AVG BETWEEN " .$_POST['minSATverbal']. " AND ".$_POST ['maxSATverbal'].")";
}
if (isset($_POST['minSATmath'])) {
$sql .= " AND ( ";
$sql .= "SAT_MT_AVG BETWEEN " .$_POST['minSATmath']. " AND ".$_POST ['maxSATmath'].")";
}
if (isset($_POST['minSATwriting'])) {
$sql .= " AND ( ";
$sql .= "SAT_WR_AVG BETWEEN " .$_POST['minSATwriting']. " AND ".$_POST ['maxSATwriting'].")";
}
$sql .= " ORDER BY UNITID ASC LIMIT 20";
print_r($sql);
$result = mysql_query($sql) or die("Error processing <strong>query</strong>. ".mysql_error());
$row = mysql_fetch_assoc($result) or die("No rows returned by query");
echo "<form method = 'post' action = 'school_details.php'>";
while($res_1 = mysql_fetch_object($result))
{
echo "<h3><a href='#'>$res_1->NAME_SCH</a></h3>";
echo "
<div>
<p>Location: $res_1->ADD_SCH</p>
<p>$res_1->CITY_SCH, $res_1->STATE_SCH</p>
<p>Website: $res_1->WEB_SCH</p>
<p>Total Students: $res_1->TOTAL_STS</p>
<p><input type='radio' onclick='this.form.submit()' name = 'UNITID' value='".$res_1->UNITID."' /></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>";
}
echo "</form>";
?>
The SQL could be like:
SELECT * FROM whatever_db WHERE duration=
And then throw the different values from the checkboxes, sliders, radio buttons, and such in. Now, this is a school search. I want to help my students find schools, and show them how to make a search at the same time. It’s a challenge for me to learn all of this in a month (HTML, PHP, jQuery, SQL, ajax, etc.), but I’m trying my best. Please be patient with a new learner. I like all the “teachers” here 🙂 Any comments about making this cleaner and work correctly are appreciated! Hopefully, I didn’t forget to mention anything. Thanks so much!!!
EDIT
Alright, so I’m on my way here. You can see in my code that I changed the script to basically what you suggested (with a little of my own added touch). I understand exactly how this sends the serialized data to my process.php. Unfortunately, I’m still stuck on this problem. If you’ll check out, for example, the first two inputs in my form, the user should be able to check one or both of the choices. If the user checks the first one, the results should turn up only the two-year schools; if the second choice is checked, the results should turn up only the four-year schools; but if they are both checked, the results should turn up both two-year and four-year schools. Instead, due to the conflict in the serialized string, it turns up no schools; i.e. the search is “thinking” it’s supposed to look for schools that are both two-year and four-year institutions, not either/or. Any simple way to solve this? As you can see later in the form, there are some places where there are quite a few checkboxes, which brings about the same issue. Perhaps I’m overlooking something. Anyway, I’m still lost, but I’m so close. I know it. Thanks in advance for the help.
tell me if you have any further problems / questions.