CODEWITHSUNDEEP
javascriptjqueryforms
wkm
wkm

Reputation: 1762

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.

Upvotes: 1

Views: 940

Answers (5)

Pit Digger
Pit Digger

Reputation: 9780

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/

Upvotes: 1

Dennis
Dennis

Reputation: 32598

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/

Upvotes: 1

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76870

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/

Upvotes: 2

pimvdb
pimvdb

Reputation: 154818

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
});

Upvotes: 1

g.d.d.c
g.d.d.c

Reputation: 47968

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.

Upvotes: 1

Related Questions