Самый простой способ использовать флажки jquery для динамического поиска в базе данных через PHP SQL - PullRequest
Новая
       0

Самый простой способ использовать флажки jquery для динамического поиска в базе данных через PHP SQL

1 голос
/ 16 февраля 2012

Я вижу, что есть смешное количество тем и способов сделать это. Это проблема, с которой я столкнулся. Есть слишком много мнений и вариантов, чтобы разобраться. У меня есть форма с кучей параметров поиска, таких как флажки, ползунки, переключатели и т. Д. На данный момент, я просто хотел бы знать, как использовать флажки, как в следующей форме, для поиска в моей базе данных в самом простом способ. 

<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>

SQL может выглядеть так: SELECT * FROM what_db WHERE duration =

А затем добавьте значения из флажков. Я хочу, чтобы результаты динамически отображались прямо на той же странице. Есть ли в этом смысл? Есть идеи? Есть ли другая информация, которую вам нужно увидеть? Помогите новичку.

EDIT

Хорошо. Я почти сдался, но затем сделал некоторый прогресс, и снова зацепил. Я должен изучить это. Позвольте мне дать более полный код здесь: 

<!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>

Поле ввода работает отлично и отлично, но теперь мне все еще нужно выяснить, как разместить переменные checkbox, radio и slider, я предполагаю использовать аналогичный процесс 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>";
?>

Теперь это поиск школы. Я хочу помочь своим ученикам найти школы и показать им, как сделать поиск одновременно. Мне сложно изучить все это за месяц (HTML, PHP, jQuery, SQL, ajax и т. Д.), Но я стараюсь изо всех сил. Пожалуйста, будьте терпеливы с новым учеником. Мне нравятся все "учителя" здесь :-) Любые комментарии о том, как сделать это более чистым и правильно работать, приветствуются! Надеюсь, я ничего не забыла упомянуть. Спасибо!!!

Ответы [ 3 ]

0 голосов
/ 16 февраля 2012

Есть много способов сделать это, вы можете отправить данные страницы на некоторую страницу с помощью действия, а метод получить данные, используя

$ _ POST

или

$ _ GET

в зависимости от типа метода и перенаправления на эту страницу снова через заголовок с необходимой информацией, которую вы хотите передать ИЛИ вы можете использовать ajax или вы можете отправить данные формы на тот жестраницы и получите к нему доступ if(isset($_POST['dura'])), используйте любой из трех предложенных

0 голосов
/ 16 февраля 2012

Привет, я добавляю код jquery, вы можете поместить свой код PHP внутри. так как я не очень разбираюсь в PHP 

$(document).ready(function () {
        $("input[type='checkbox']").change( function() {
            var val = $(this).val();
            if($(this).is(':checked')) {
                alert($(this).val());
                <?php
                    your db code    
                ?>
            }
            else {
                //do nothing
            }

            });

    });
0 голосов
/ 16 февраля 2012

в названии своих флажков добавьте «[]» пример «dura []» при доступе к значениям, которые вы можете просто сказать: 

$dura = $_POST['dura'];

или 

$dura = $_GET['dura'];

Переменная dura просто получит массив выбранных значений.если вы хотите отправить форму без обновления всей страницы, вам может пригодиться форма jquery.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...