There are a ridiculous amount of threads about and ways of doing this, I see. That is the problem I'm having. There are just too many opinions and options to sort through. I've got a form with a bunch of search options, such as checkboxes, sliders, radio buttons, etc. For now, I'd just like to know how to use checkboxes like in the following form to search my database in the simplest way.
<form name="form">
<input type="checkbox" value="1" name="dura"> A<br />
<input type="checkbox" value="2" name="dura"> B<br />
<input type="checkbox" value="3" name="dura"> C<br />
<input type="checkbox" value="4" name="dura"> D<br />
<input type="checkbox" value="5" name="dura"> E<br />
<input type="checkbox" value="6" name="dura"> F<br />
<input type="checkbox" value="7" name="dura"> G<br />
<input type="checkbox" value="8" name="dura"> H<br />
<input type="checkbox" value="9" name="dura"> I<br />
<div style="height:100px;"></div>
<input type="checkbox" value="1" name="ctrl"> Pub<br />
<input type="checkbox" value="2" name="ctrl"> Pri<br />
<input type="checkbox" value="3" name="ctrl"> PriNFP<br />
<input type="checkbox" value="4" name="ctrl"> PriREL<br />
</form>
The SQL could be like: SELECT * FROM whatever_db WHERE duration=
And then throw the values from the checkboxes in. I want to have the results show up dynamically right on that same page. Does this make any sense? Any ideas? Is there any other information you need to see? Help a noob out.
EDIT
Alright. I almost gave up, but then made some progress, and once again am hooked. I must learn this. Let me give more 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(){
$('#inp').keyup(function(){
var inpval=$('#inp').val();
$.ajax({
type: 'POST',
data: ({p : inpval}),
url: 'schoolme_list4.php',
success: function(data) {
$('.result').html(data);
}
});
});
});
</script>
</head>
<body onload='init()'>
<input type="text" id="inp" name="inp"/></span>
<BR /><BR /><BR /><BR /><BR /><BR />
<div class="result"></div>
<form>
<div>
<div style="height:100px;"></div>
<input type="radio" value="(DURA_SCH = 1 OR DURA_SCH = 2)" name="dura_sch"> Doesn't Matter<br />
<input type="radio" value="2" name="dura_sch"> Two-Year Institution<br />
<input type="radio" value="1" name="dura_sch"> Four-Year Institution<br />
<div style="height:100px;"></div>
<input type="radio" value="CTRL_SCH = 1 OR (CTRL_SCH = 3 OR CTRL_SCH = 4)" name="ctrl_sch"> Doesn't Matter<br />
<input type="radio" value="CTRL_SCH = 1" name="ctrl_sch"> Public<br />
<input type="radio" value="(CTRL_SCH = 3 OR CTRL_SCH = 4)" 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>";
?>
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!!!
