由 onblur 或更改事件执行的 AJAX 表单

Question

我有一个表单，用户可以在其中输入一个数字到文本字段中。然后，从下拉菜单中选择另一个数字。我希望 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>';
?>

Answer 1

如果我理解正确，您可以通过将代码移动到单独的函数并将任何事件绑定到该函数来从任何区域调用 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()});
});