I've got a form which searches my database dynamically using ajax every time someone makes a change to it. Problem is, it doesn't perform when I change the slider... only when I change like a checkbox or something. Should be pretty simple to solve, but I'm just not seeing it. Here's my code for the applicable part of the form:
<form id="boogie">
<div id='magazine' style="font-size:24px;">
<div style="background-image:url(pages/08.jpg);">
<label for="amount2" style="margin-left:43px;">Students:</label>
<input type="text" id="amount2" style="background:transparent; 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="height:300px; margin-left:43px;"></div>
<div style="height:100px;"></div>
<input type="checkbox" value="FALSE" id="REGION_SCH1"> Northeast<br />
<input type="checkbox" value="FALSE" id="REGION_SCH2" checked="checked"> Midwest<br />
<input type="checkbox" value="FALSE" id="REGION_SCH3" checked="checked"> South<br />
<input type="checkbox" value="FALSE" id="REGION_SCH4" checked="checked"> West<br />
<input type="checkbox" value="FALSE" id="REGION_SCH5" checked="checked"> Outlying Areas (like Hawaii and Alaska)<br />
</div>
<div style="background-image:url(pages/09.jpg);"></div>
<div style="background-image:url(pages/10.jpg);">
<div style="height:625px;"></div>
<div style="margin-left:150px;">
<input type="checkbox" value="FALSE" id="CTRL_SCH2" checked="checked"><br />
<input type="checkbox" value="FALSE" id="CTRL_SCH1" checked="checked"><br />
</div>
</div>
<div style="background-image:url(pages/11.jpg);"></div>
<div style="background-image:url(pages/12.jpg);"></div>
<div style="background-image:url(pages/13.jpg);">
<div style="height:610px;"></div>
<div style="margin-left:295px;">
<input type="checkbox" value="FALSE" id="DURA_SCH1" checked="checked"><br />
<input type="checkbox" value="FALSE" id="DURA_SCH2" checked="checked"><br />
</div>
</div>
<div style="background-image:url(pages/14.jpg);">
<div style="height:495px;"></div>
<div class="demo">
<input type="text" id="amount" name="amount" style="background:transparent; border:0; margin-bottom:20px; font-weight:bold; margin-left:250px;" />
<input id="minCharge" value="0" name="minCharge" type="hidden" />
<input id="maxCharge" value="100000" name="maxCharge" type="hidden" />
<div id="slider-range" style="width:270px; margin-left:140px;"></div>
</div>
</div>
</div>
</form>
<script type="text/javascript" src="js/search.js"></script>Here's my code for one of the sliders:
<script>
$(function() {
$( "#slider-range2" ).slider({
orientation: "vertical",
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>Here's my search code:
$(function() {
$('#boogie').change(function(){
var form = $('#boogie');
var dura_sch1 = $('#DURA_SCH1').val();
if ($("#DURA_SCH1").is(":checked")) {
dura_sch1 = "DURA_SCH=1";
}
var dura_sch2 = $('#DURA_SCH2').val();
if ($("#DURA_SCH2").is(":checked")) {
dura_sch2 = "DURA_SCH=2";
}
var ctrl_sch1 = $('#CTRL_SCH1').val();
if ($("#CTRL_SCH1").is(":checked")) {
ctrl_sch1 = "CTRL_SCH=1";
}
var ctrl_sch2 = $('#CTRL_SCH2').val();
if ($("#CTRL_SCH2").is(":checked")) {
ctrl_sch2 = "CTRL_SCH=2";
}
var popu_area_sch1 = $('#POPU_AREA_SCH1').val();
if ($("#POPU_AREA_SCH1").is(":checked")) {
popu_area_sch1 = "POPU_AREA_SCH=1";
}
var popu_area_sch2 = $('#POPU_AREA_SCH2').val();
if ($("#POPU_AREA_SCH2").is(":checked")) {
popu_area_sch2 = "POPU_AREA_SCH=2";
}
var popu_area_sch3 = $('#POPU_AREA_SCH3').val();
if ($("#POPU_AREA_SCH3").is(":checked")) {
popu_area_sch3 = "POPU_AREA_SCH=3";
}
var popu_area_sch4 = $('#POPU_AREA_SCH4').val();
if ($("#POPU_AREA_SCH4").is(":checked")) {
popu_area_sch4 = "POPU_AREA_SCH=4";
}
var region_sch1 = $('#REGION_SCH1').val();
if ($("#REGION_SCH1").is(":checked")) {
region_sch1 = "REGION_SCH=1";
}
var region_sch2 = $('#REGION_SCH2').val();
if ($("#REGION_SCH2").is(":checked")) {
region_sch2 = "REGION_SCH=2";
}
var region_sch3 = $('#REGION_SCH3').val();
if ($("#REGION_SCH3").is(":checked")) {
region_sch3 = "REGION_SCH=3";
}
var region_sch4 = $('#REGION_SCH4').val();
if ($("#REGION_SCH4").is(":checked")) {
region_sch4 = "REGION_SCH=4";
}
var region_sch5 = $('#REGION_SCH5').val();
if ($("#REGION_SCH5").is(":checked")) {
region_sch5 = "REGION_SCH=5";
}
var minStudents = $('#minStudents').val();
var maxStudents = $('#maxStudents').val();
var minCharge = $('#minCharge').val();
var maxCharge = $('#maxCharge').val();
var minSATverbal = $('#minSATverbal').val();
var maxSATverbal = $('#maxSATverbal').val();
var minSATmath = $('#minSATmath').val();
var maxSATmath = $('#maxSATmath').val();
var minSATwriting = $('#minSATwriting').val();
var maxSATwriting = $('#maxSATwriting').val();
$.ajax ({
url: "searchit.php",
type: 'POST',
data: ({d1 : dura_sch1, d2 : dura_sch2, p1 : popu_area_sch1, p2 : popu_area_sch2, p3 : popu_area_sch3, p4 : popu_area_sch4, r1 : region_sch1, r2 : region_sch2, r3 : region_sch3, r4 : region_sch4, r5 : region_sch5, minsts : minStudents, maxsts : maxStudents, minchg : minCharge, maxchg : maxCharge, minsatv : minSATverbal, maxsatv : maxSATverbal, minsatm : minSATmath, maxsatm : maxSATmath, minsatw : minSATwriting, maxsatw : maxSATwriting}),
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
}
});
});
});BTW, I know it's messy. Clean it up at your own risk :icon_lol: ! Important thing is just getting that search to work.