Question

我想将一个表单中的输入值复制到下一个表单的输入值（具有相同名称）。表单和输入的名称相同。它需要做的就是将标题输入的值复制到一个表格的标题输入中。

 <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...

在这种情况下，当点击顶部的“复制”按钮时，我希望jquery用Smith覆盖Anderson。

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

给了我史密斯，但是一旦我拥有它，我不知道如何处理这个价值。

Answer 1

将HTML更改为：

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

一些注意事项：

这在vanilla javascript中非常简单，我没有添加jQuery代码。
您永远不应将多个元素分配给相同的ID，类或名称可用于此目的。
return false;功能的onclick部分是必需的，以便在您点击提交按钮时不会重新加载表单。

如果您有任何问题，请与我们联系。

Answer 2

你可以尝试

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

注意：此代码将更改下一个表单中的第二个输入值如果名称相同，您单击的表单的第二个输入值..您可以使用:nth-child(1)
对第一个输入执行相同的操作

Demo here

如果动态生成的表单使用

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

而不是

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

为了简单使用我为它创建了一个函数

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

像这样使用

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

Working Demo

jquery - 将输入的值从一个表单复制到另一个表单（表单和输入命名相同）

2 个答案: