AJAX form executed by onblur OR change event - ajax

Question

I have a form where the user will enter a number into a text field. Then, select another number from a dropdown menu. I want the AJAX to execute each time they go from field to field. This is so that it does a calculation in real-time.
I would imagine the text field would be using "onblur" and the dropdown using "change" or "onchange"... but how do I write the script to do EITHER depending on which field they are currently on? Can you set it to do both?
EDIT: New attempt with new variable labels.
<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>
Part of the form here....
<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>
The php page that processes the data...
<?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

If I understand you correctly, you can call the AJAX from any area by moving the code into a separate function and binding any event to that function.
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()});
});