jquery - copy value of input from one form to another (form and input named the same)

Question

I would like to copy the value from an input in one form to the value of an input(with the same name) of the next form down. The forms and inputs are named the same. All it needs to do is copy the value of the title input to the title input one form down.

 <form>
      <input name="file" value="1.xml">
      <input name="title" id="title" value="Smith">
      <input type="submit" id="copy-down" value="copy">
  </form>
  <form>
      <input name="file" value="2.xml">
      <input name="title" id="title" value="Anderson">
      <input type="submit" id="copy-down" value="copy">
  </form>
  etc...

In this case when the top "copy" button is clicked I would like jquery to overwrite Anderson with Smith.

$('#title').attr('value'));

Gives me Smith but I'm not sure what to do with that value once I have it.

You should avoid having two elements with the same id. http://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-types — Jordan Soltman, Dec 05 '15 at 00:23

score 1 · Accepted Answer · answered Dec 05 '15 at 01:08

Change HTML to this:

<form>
      <input name="file" value="1.xml">
      <input name="title" id="title1" value="Smith">
      <input type="submit" id="copy-down1" value="copy">
  </form>
  <form>
      <input name="file" value="2.xml">
      <input name="title" id="title2" value="Anderson">
      <input type="submit" id="copy-down2" value="copy">
  </form>

Javascript:

function copyHandler() {
    var copyVal = document.getElementById("title1").value;
    var replaceInput = document.getElementById("title2");

    replaceInput.value = copyVal;
}

document.getElementById("copy-down1").onclick = function(){
    copyHandler();
    return false;
}

Some notes:

This is so straightforward in vanilla javascript that I didn't add the jQuery code.
You should never assign multiple elements to the same ID, class or name can be used for that purpose.
The return false; portion of the onclick function is necessary so that the form doesn't reload when you click your submit button.

Let me know if you have any questions.

This is great. I ended up with something slightly different but it works a charm: `function copyDown(num) { var number = parseInt(num); copyHandler(number); } function copyHandler(n) { var sTitle = 'title' + n; var dTitle = 'title' + (n + 1); var copyVal = document.getElementById(sTitle).value; var replInput = document.getElementById(dTitle); replInput.value = copyVal; }` and then unique ids (which I will be doing from now on) in my HTML; title1, title2, title3, etc. And my copy buttons now has like this: `onclick="copyDown(1); return false;">` — roe1and, Dec 06 '15 at 22:02

Mohamed-Yousef · Answer 2 · 2015-12-05T02:12:53.343

you can try

$(document).ready(function(){
   $('form').on('submit', function(e){
      e.preventDefault();
      var GetNameAttr = $(this).find('input:nth-child(2)').attr('name');
      var GetTitleValue = $(this).find('input:nth-child(2)').val();
      var NextFormNameAttr = $(this).next('form').find('input:nth-child(2)').attr('name');
      if(NextFormNameAttr == GetNameAttr){
         $(this).next('form').find('input:nth-child(2)').val(GetTitleValue );
      }
   });
});

Note: this code will change the second input value in next form with the second input value of form you click if the name is same .. you can do the same thing with the first input by using :nth-child(1)

Demo here

if your forms dynamically generated use

$('body').on('submit','form', function(e){

instead of

$('form').on('submit', function(e){

for simple use I create a function for that

function changeNextValue(el , i){
  var GetNameAttr1 = el.find('input:nth-child('+ i +')').attr('name');
  var GetTitleValue1 = el.find('input:nth-child('+ i +')').val();
  var NextFormNameAttr1 = el.next('form').find('input:nth-child('+ i +')').attr('name');
  if(NextFormNameAttr1 == GetNameAttr1){
      el.next('form').find('input:nth-child('+ i +')').val(GetTitleValue1);
  }
}

use it like this

changeNextValue($(this) , nth-child of input 1 or 2);
// for first input 
changeNextValue($(this) , 1);
// for second input 
changeNextValue($(this) , 2);

Working Demo

jquery - copy value of input from one form to another (form and input named the same)

2 Answers2