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