Passing a value from one input to another in jQuery

jsFiddle for reference:

http://jsfiddle.net/UxQV7/

What I'm trying to do is if the user clicks on "Add" on the 2nd row, the new form element is displayed underneath.

The user then types a number in that new form element, clicks the "Add" button and then that number will be populated in the Serial# input of the 2nd row and the new form element then is hidden.

The part I'm having trouble is once the user types in the number to that new form element, how do I know to send it back to the 2nd row.

Thanks very much开发者_运维问答.

---

You could do:

var index;
$(".addSerial").click(function(){
  index = $(this).closest('tr').index();
  console.log(index);  
   $("#serialAdd").toggle();
});

$("#submitSerial").click(function(){
   $('table tr:eq('+index+') input:first').val($("#serialToAdd").val());
   $("#serialAdd").toggle();
});

fiddle here http://jsfiddle.net/qWGKq/

---

You're going to have to store a reference value somewhere (in a global variable, for example) to indicate which <a> was clicked to display the Serial Number entry <div> or create it dynamically on the fly and destroy it afterwards.

---

Save the current row in a variable, and then filter the textbox out of it to set the value to: http://jsfiddle.net/UxQV7/1/.

var currentRow; // will be <tr> of row where user has clicked on Add

$(".addSerial").click(function(){
   currentRow = $(this).parents('tr'); // set current row
   $("#serialAdd").toggle();
});

$("#submitSerial").click(function(){
   $("#serialAdd").toggle();
   currentRow.find(':text:eq(2)').val($('#serialToAdd').val());
   // find correct textbox in row and copy value
});

---

You can use jQuery's prev() to get the target input and save it:

var activeField;

$(".addSerial").click(function(){
   $("#serialAdd").toggle(); 
    activeField = $(this).prev();
    return false;
});

$("#submitSerial").click(function(){
   $("#serialAdd").toggle(); 
   activeField.val( $("#serialToAdd").val() ); 
    $("#serialToAdd").val("")
});

Demo: http://jsfiddle.net/7Xykw/

---

when these controls are rendered you need to have a serial number to each control in id that way you can easily identify controls and add values.

Check this working sample . http://jsfiddle.net/UxQV7/18/