[jQuery] update input value onblur
I'm learning JQuery and building a page with a table.
The table contains multiple tr's andd the tr's contains multiple td's.
The td's contain a input element.
The first td of a row contains a "select element" and the others a
"text element".
Now I want to fire a AJAX when the onblur event is fired on the second
input text element to fill the fourth(4) element.
When its fire i want a loading span is visible for the user.
the following works for me when i have 2 input element with unique
id's.
<script type="text/JavaScript">
jQuery(document).ready(function() {
jQuery('#voorraadcheckLoading').hide();
jQuery('#txt_product').blur(function(){
jQuery('#txt_voorraad_status').val("");
jQuery('#voorraadcheckLoading').show();
jQuery.post("ajax.php?page=voorraad_status", {
prod_id: jQuery('#txt_product').val()
}, function(response){
jQuery('#voorraadstatusResult').fadeOut();
setTimeout("finishAjax('txt_voorraad_status', '"+escape
(response)+"')", 400);
});
return false;
});
});
function finishAjax(id, response) {
jQuery('#voorraadcheckLoading').hide();
jQuery('#'+id).val(unescape(response));
} //finishAjax
</script>
Now my form contains multiple tr's and td's with multiple input
element (array's) and I don't know how to fire "the script" on the 2
text input element and let it putt a value in de fourth(4) text
element.
I hope somebody can help me.
a screenshot is here
http://home.frijmann.nl/images/jquery-ajax-onblur.png