0
チェックボックス、スライダ、ラジオボタンなどの検索オプションを含むフォームがあります。その結果を同じページで動的に表示させることができます。私はここに私の包括的なコードを挙げてみましょう：チェックボックス、スライダ、ラジオボタンなどを使用してデータベース検索の結果を動的に検索して表示するjQuery
<!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>
入力ボックスがすべての罰金とダンディに動作しますが、今、私はまだ私が使用して推測している、チェックボックス、ラジオ、スライダー変数を投稿する方法を把握する必要があり動的に取得された結果に対するjqueryとajaxの同様のプロセスところで、ここに私のPHPページです：
<?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'];
}
?>
私は、動的行くことに決めていた前に、次のように起こって検索を持っていた：whatever_db期間FROM SELECT *：
<?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>";
?>
SQLは次のように可能性があり=
次に、チェックボックス、スライダ、ラジオボタンなどから異なる値をスローします。これは学校検索です。私は生徒が学校を見つけて、同時にどのように検索するかを示すのを助けたいと思っています。私は1ヶ月でこのすべてを学ぶことが難しいです（HTML、PHP、jQuery、SQL、ajaxなど）が、私はベストを尽くしています。新しい学習者と一緒にお待ちください。私はすべての "先生"が好きです:-)このクリーナーを作って正しく働くことについてのコメントは感謝しています！うまくいけば、私は何か言及することを忘れなかった。本当にありがとう！！！
EDIT
さてさて、私はここに私の方法で。私のコードでは、スクリプトを基本的にあなたが提案したものに変更したことがわかります（少し触れただけで）。私はこれがserializeされたデータをprocess.phpにどのように送るのかを正確に理解しています。残念ながら、私はまだこの問題に固執しています。たとえば、フォームの最初の2つの入力をチェックアウトする場合、ユーザーは選択肢の1つまたは両方をチェックできるはずです。ユーザーが最初のものを確認すると、結果は2年制の学校のみになります。 2番目の選択肢がチェックされていれば、結果は4年制の学校のみになります。両者をチェックすると、結果は2年制と4年制の両方の学校に反映されるはずです。代わりに、連載された文字列の競合のために、それは学校を表示しません。すなわち、検索は「思考」であり、2年制と4年制のどちらの学校でも、またはどちらでもない学校を探すことになっています。これを解決する簡単な方法はありますか？フォームの後半にあるように、いくつかのチェックボックスがあり、同じ問題が発生する場所があります。おそらく私は何かを見過ごしているでしょう。とにかく、私はまだ失われていますが、私はとても近いです。私はそれを知っている。助けを前にありがとう。
したがって、通常の入力タイプ= "submit"の場合はすべて正常に動作しますが、結果をロードしてユーザーがページ全体を読み込む必要はありません。 – 19greg96
@ 19greg96ありがとう！それは1つのアイデアですが、ユーザーが要素を変更するたびに結果を更新することが本当に好きです。 – jdgieschen
http://api.jquery.com/serialize/このwhit ajax呼び出しを組み合わせて要素の変更イベントにバインドすることができます（http://api.jquery.com/change /）。 – 19greg96