1

ユーザーがテキスト フィールドに数値を入力するフォームがあります。次に、ドロップダウン メニューから別の番号を選択します。フィールドからフィールドに移動するたびにAJAXを実行したい。これは、リアルタイムで計算を行うためです。

テキストフィールドは「onblur」を使用し、ドロップダウンは「change」または「onchange」を使用すると想像できます...しかし、現在どのフィールドにあるかに応じて、どちらかを実行するスクリプトをどのように作成すればよいですか? 両方できるように設定できますか？

編集: 新しい変数ラベルを使用した新しい試み。 

    <script type="text/javascript">
        function postData(){
            var widthX = $('#width_str').val();
            var heightX = $('#height_str').val();
            var prodidX = $('#prodid').val();
            var roomX = $('#room_str').val();

            $.post('db_query.php',{widthX:widthX, heightX:heightX, prodidX:prodidX, roomX:roomX},   
                function(data){
                $("#search_results").html(data);
            });
        }

        $(function() {
            $("#lets_search").bind('submit',function() {postData()});
            $("#room_str").bind('change', function() {postData()});
            $("#width_str").bind('change', function() {postData()});
            $("#height_str").bind('change',function() {postData()});
        });
    </script>

フォームの一部はこちら....

         <form id="lets_search" action="" style="width:400px;margin:0 auto;text-align:left;">
            <input type="hidden" value="1" value="<?php echo stripslashes($_GET['prodid']); ?>" name="prodid" id="prodid">

            room name:
            <select name="room_str" id="room_str">
                <option value="Dining">Dining</option>
                <option value="Bathroom">Bathroom</option>
                <option value="Kitchen">Kitchen</option>
            </select>
            height:
            <select name="height_str" id="height_str">
                <option value="30">30"</option>
                <option value="31">31"</option>
                <option value="32">32"</option>
                <option value="33">33"</option>
                <option value="34">34"</option>
                <option value="35">35"</option>
                <option value="36">36"</option>
                <option value="37">37"</option>
            </select>
            <br>
            width:
            <select name="width_str" id="width_str">
                <option value="30">30"</option>
                <option value="31">31"</option>
                <option value="32">32"</option>
                <option value="33">33"</option>
                <option value="34">34"</option>
                <option value="35">35"</option>
                <option value="36">36"</option>
                <option value="37">37"</option>
            </select>
            <input type="submit" value="send" name="send" id="send">
         </form>

データを処理するphpページ...

<?php
include('db_pbconnection.php');

$tax = .06;
$tax2 = 1.06;
$grandtotal = 50;   

$query = mysql_query(" SELECT * FROM price_dimensions WHERE prodid = '".$_POST['prodidX']."' AND height >= '".$_POST['heightX']."' AND width >= '".$_POST['widthX']."' ORDER BY height ASC, width ASC LIMIT 1 ");
echo '<div>';
while ($data = mysql_fetch_array($query)) {
    echo '
    <div style="background-color:pink;">
        <div style="clear:both; font-size:18px;">height: '.$data["height"].'</div><br>
        <div style="clear:both; font-size:18px;">width: '.$data["width"].'</div>
        <div style="clear:both; font-size:18px;">unit price: '.$data["price"].'</div>
        <div style="clear:both; font-size:18px;">tax: '.(($data["price"])*($tax)).'</div>
        <div style="clear:both; font-size:18px;">grand total:'.(($data["price"])*($tax2)).'</div>
    </div>';
}
echo '</div>';
?>
4

1 に答える 1

2

私が正しく理解していれば、コードを別の関数に移動し、その関数に任意のイベントをバインドすることで、任意の領域から AJAX を呼び出すことができます。

function postData(){
    var value = $('#str').val();
    var valueH = $('#strH').val();
    var prodid = $('#prodid').val();

    $.post('db_query.php',{valueH:valueH, value:value, prodid:prodid},   
        function(data){
        $("#search_results").html(data);
    });
    return false;
}

$(function() {
    $("#lets_search").bind('submit',function() {postData()});
    $("#strH").bind('change', function() {postData()});
    $("#str").bind('blur',function() {postData()});
});
于 2012-06-15T18:30:16.320 に答える