帶有複選框，滑塊，單選按鈕等的jQuery動態檢索並顯示來自數據庫搜索的結果

我有一堆搜索選項，比如複選框，滑塊，單選按鈕等。我想要在同一頁面上動態顯示結果。讓我給我的綜合代碼在這裏：帶有複選框，滑塊，單選按鈕等的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']; 
} 
?>

我有一個搜索會像下面之前，我已決定去動態：

<?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可能是這樣的： SELECT * FROM whatever_db其中所述持續時間=

然後從複選框，滑塊，單選按鈕等中輸入不同的值。現在，這是一個學校搜索。我想幫助我的學生找到學校，並告訴他們如何同時進行搜索。在一個月內學習所有這些（HTML，PHP，jQuery，SQL，ajax等）對我來說是個挑戰，但我正在盡我所能。請耐心等待一個新的學習者。我喜歡這裏的所有「老師」:-)有關使這個更清潔和正確工作的任何意見，都表示讚賞！希望我沒有忘記提及任何事情。非常感謝！！！

編輯

好了，所以我對這裏的路上。您可以在我的代碼中看到，我已將腳本更改爲基本上您所建議的內容（僅添加了一點我自己添加的內容）。我完全理解這是如何將序列化數據發送到我的process.php。不幸的是，我仍然堅持這個問題。例如，如果您要查看我的表單中的前兩個輸入，用戶應該能夠檢查一個或兩個選項。如果用戶檢查第一個，結果應該只顯示兩年制學校;如果第二選擇被檢查，結果應該只出現四年制學校;但如果他們都被檢查，結果應該會出現兩年和四年的學校。相反，由於序列化字符串的衝突，它沒有發現學校;即搜索是「思考」它應該尋找既是兩年制也是四年制的學校，而不是/或者。任何簡單的方法來解決此問題？正如你可以在表格後面看到的，有一些地方有很多複選框會帶來同樣的問題。也許我忽略了一些東西。無論如何，我仍然迷失，但我非常接近。我知道。先謝謝您的幫助。

來源

2012-02-18 jdgieschen

所以，如果你有一個正常的輸入類型=「提交」一切工作正常，你只是想加載結果，以便用戶不必加載整個頁面？ – 19greg96 2012-02-18 12:13:34

@ 19greg96謝謝！這是一個想法，但我真的很喜歡它在每次用戶對元素進行更改時更新結果。 – jdgieschen 2012-02-18 12:58:59

你可能想看看這個：http://api.jquery.com/serialize/結合這個whit ajax調用並將它們綁定到元素上的變化事件（http://api.jquery.com/change /）。 – 19greg96 2012-02-18 13:13:14

function submit() { 
    $.ajax ({ 
     url: "process.php", // your processing php's url (SAME DOMAIN ONLY!) 
     type: 'POST', 
     data: $('#formID').serialize(),// 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 
     } 
    }); 
} 
$('input').change(submit); // bind it to all of your input elements

如果您有任何其他問題或疑問，請告訴我。

來源

2012-02-19 14:00:52 19greg96

再次感謝您的幫助。你能檢查一下我編輯帖子的內容嗎？我知道我很接近;剛剛找到一個解決方法，使這件事情可操作:-) – jdgieschen 2012-02-21 13:11:40

我認爲這是可能的最簡單的方法是給你的複選框不同的名稱和一個if語句在PHP – 19greg96 2012-02-21 14:44:47

好吧！這工作得很好。非常感謝！ – jdgieschen 2012-02-25 12:54:13

帶有複選框，滑塊，單選按鈕等的jQuery動態檢索並顯示來自數據庫搜索的結果

回答

相關問題