Question

I am validating value entered in textbox against database and wanted to show right or wrong icon correct text box.

Here my html code goes

<tr>
 <td><input type="textbox" class="process-order serial" name="serialNumber" id="serialNumber"/> <span name="validsn" id="validsn">
</td>
</tr> 
<tr>
<td><input type="textbox" class="process-order serial" name="serialNumber" id="serialNumber"/> <span name="validsn" id="validsn">
</td>
</tr> 
<tr>
<td><input type="textbox" class="process-order serial" name="serialNumber" id="serialNumber"/> <span name="validsn" id="validsn">
</td>
</tr> 

I am validating onblur when value entered in serialNumber field, I will get true or false and in jquery I am doing this way.

$.post("validateSN", {value:$(this).val()},function(data){
    $("#validsn").text(data);
});

when I am displaying data every time error message or success message appears only beside first one.

UPDATE: the SerialNumber textboxes are dynamic and same as the span as per text box sizes.

Can someone please help me correct way to show error/success message beside each text box correctly.

Answer 1

I have followed Jigar Joshi suggestion and modified little bit

Onblur

$(".serial").live("blur", function(){
//got the index of textbox where serial number is entered
var index = $(".serial").index(this);

$.ajax({
 url:"validateSN",
 data: "value="+sn,
 success : function(data){
 $("#validsn"+index).show();
     if(data=="true"){
    $("#validsn"+index).attr('src',"images/icons/valid_icon.png");
     } else if(data=="false"){
        $("#validsn"+index).attr("src", "images/icons/invalid_icon.png");
     }
});

Then it worked very well. Thank you Jigar Joshi for help me moving forward.