Форма AJAX, выполненная onblur ИЛИ событие изменения

Question

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

Я бы предположил, что текстовое поле будет использовать «onblur» и выпадающее меню с помощью «change» или «onchange» ... но как я могу написать сценарий, чтобы делать EITHER в зависимости от того, в каком поле они сейчас находятся? Можете ли вы настроить его на выполнение обоих?

EDIT: Новая попытка с новыми переменными ярлыками.

<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 
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()}); 
});