onblur 또는 change 이벤트로 실행되는 AJAX 양식

Question

사용자가 텍스트 필드에 숫자를 입력하는 양식이 있습니다. 그런 다음 드롭 다운 메뉴에서 다른 번호를 선택하십시오. 저는 AJAX가 현장에서 현장으로 갈 때마다 실행되기를 바랍니다. 이것은 실시간 계산을하기위한 것입니다.

텍스트 필드가 "onblur"를 사용하고 "change"또는 "onchange"를 사용하는 드롭 다운을 사용한다고 상상할 수 있습니다. 그러나 현재 어떤 필드에 따라 스크립트를 작성해야합니까? 둘 다 할 수 있니?

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 페이지 ...

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