Help needed with jquery and input text

[Naveen puttu]

Here is the input text that gets generated depending on the number of rows

<c:forEach var="item" items="<%=(List) request.getAttribute("rfxItems")%>" varStatus="rowCounter">
<%--<logic:iterate id="item" name="rfxItems">--%>
  <tr>
    <td><c:out value="${item.name}"        /><%--<bean:write name="item" property="name"       />--%></td>
    <td><c:out value="${item.partNo}"      /><%--<bean:write name="item" property="partNo"     />--%></td>
    <td><c:out value="${item.descrip}"     /><%--<bean:write name="item" property="descrip"    />--%></td>
    <td><c:out value="${item.targetPrice}" /><%--<bean:write name="item" property="targetPrice"/>--%></td>
    <td><c:out value="${item.uom}"         /><%--<bean:write name="item" property="uom"        />--%></td>
    <td><c:out value="${item.bidQty}"      /><%--<bean:write name="item" property="bidQty"     />--%></td>
    <td><c:out value="${item.totalQty}"    /><%--<bean:write name="item" property="totalQty"   />--%></td>
    <td><input class="inputTextNormal" type="text" name="bidValue" id="bid_${rowCounter.count}"   value='<c:out value="${item.bid}"         />' /><%--<bean:write name="item" property="bid"        />--%></td>
    <td><input class="inputTextNormal" type="text" name="notesValue" id="notes_${rowCounter.count}" value='<c:out value="${item.notes}"       />' /><%--<bean:write name="item" property="notes"      />--%></td>
    <td><input type="hidden" id="itemId" name="itemId" value='<c:out value="${item.id}"/>' /></td>
  </tr>
<%--</logic:iterate>--%>
</c:forEach>

What im trying to achieve is saving the data when ever there is a some data entered and someone tabs out of the notes text box

Here is the jquery part

$("input[id^='notes_']").blur(function(data,imageDiv)
    {
	alert(this.id);
	 var bid = $("input[id^='bid_']").val();
	alert(bid);
	 var notes = $("input[id^='notes_']").val();
	alert(notes);
	 var itemId = $("input[id^='itemId']:hidden").val();
	 alert(itemId);
     autoSave(bid,notes,itemId,"#loading");
    });
});


function autoSave(bid,notes,itemId,imageDiv){
alert(bid);
  $.ajax({
        method : "post",url : "itemsAutoSave.do?rfxId=<%=request.getParameter("rfxId")%>&bid="+bid+"¬es="+notes+"&itemId="+itemId,
      beforeSend : function(){
        $(imageDiv).slideToggle(750);
      }
      , // show loading just when link is clicked
      complete : function(){

      }
      , // stop showing loading when the process is complete
      success : function(html){
         $(imageDiv).slideToggle(750);
      }
      }
    ) 
}

The problem that im facing is frustrating

No matter which row data i change , the first row data is saved .

Please help me out solve this thing .

Please do reply if my question isnt clear

Cheers
Jquery Noob

[David Newton]

Please UseCodeTags when posting code or configuration. Unformatted code and configuration is very difficult to read. You can edit your post to include them by using the button.

It's also helpful to remove commented-out code rather than making the reader determine what's important and what isn't.

[Eric Pascarello]

First, you have multiple hidden elements with the same id [id="itemId"], that is illegal in HTML.

The problem with your code is due to the fact you are not limiting the onblur to the row you are in, you are looking at the start of the document again.

You either want to traverse to the parent and look for the elements or you can grab what ever is after the _ in the current id you got

var notes = jQuery(this).val();
var uid = jQuery(this).attr("id").split("_")[1];
var bid = $("input[id='bid_" + uid + "']").val(); 

Eric

[Naveen puttu]

That was really helpful mate . thanks