Javascript 复制表单字段值

我需要编写一个代码，将一组表单值复制到另一组表单值。通常是这样做的：

<script type="text/javascript">
function copyGroup() {
    if(document.formName.copy[0].checked){
        document.formName.a1.value = document.formName.b1.value;
        document.formName.a2.value = document.formName.b2.value;
        document.formName.a3.value = document.formName.b3.value;
    }
}
</script>

<form name="formName">
    <input type="text" name="a1">
    <br>
    <input type="text" name="a2">
    <br>
    <input type="text" name="a3">
    <br>
    <input type="checkbox" name="copy" onSelect="copyGroup()"> Copy Group 1
    <br>
    <input type="text" name="b1">
    <br>
    <input type="text" name="b2">
    <br>
    <input type="text" name="b3">
    <br>
    <input type="submit">
</form>

函数copyGroup（）{
if（document.formName.copy[0]。已选中）{
document.formName.a1.value=document.formName.b1.value；
document.formName.a2.value=document.formName.b2.value；
document.formName.a3.value=document.formName.b3.value；
}
}






复制组1

但是，我想修改它，如果选中复选框，用户返回并修改组1中的任何值，则组2中的相应字段也会更新

我认为这是可以做到的，但不确定如何做到

---

谢谢。

将onchange事件添加到元素并调用您的函数

将onchange事件添加到元素并调用函数

一种方法是检查每个输入字段的onchange事件，如果选中复选框，则复制值，但这会一直复制大量数据，因此效率不高

另一种方法是使用按钮而不是复选框（值为“Copy to other form”的按钮很难被误解，而复选框是模糊的），并且在按钮的onclick事件中触发复制代码

---

请注意：我会选择使用jQuery进行此操作，只需键入$（“#formName input”）.change（function（stuff））；或者类似的方法。

一种方法是检查每个输入字段的onchange事件，如果选中复选框，则复制值，但这会一直复制大量数据，因此效率不高

另一种方法是使用按钮而不是复选框（值为“Copy to other form”的按钮很难被误解，而复选框是模糊的），并且在按钮的onclick事件中触发复制代码

---

请注意：我会选择使用jQuery进行此操作，只需键入$（“#formName input”）.change（function（stuff））；或者类似的东西。

使用jQuery并尝试类似的方法

---

使用jQuery并尝试以下操作

希望这有助于：

函数copyElement（copyFrom，whereToCopy）{
if（document.formName.copy.checked）{
document.formName.elements[whereToCopy].value=copyFrom.value；
}
}






复制组1

希望这些帮助：

函数copyElement（copyFrom，whereToCopy）{
if（document.formName.copy.checked）{
document.formName.elements[whereToCopy].value=copyFrom.value；
}
}






复制组1

或者您可以始终使用所见即所得表单生成器之一。如果你想找一些极客的东西，试试吧——虽然很贵，但效果很好。

或者你可以一直使用WYSIWYG表单生成器。如果你想找一些极客的东西，试试看——虽然很贵，但效果很好。

Wow！这真的很酷。当复选框处于启用状态时，是否有办法禁用第二组中的字段，同时仍显示要复制的值？有点太快了。请参阅此更新的小提琴安装。谢谢这太棒了！不过我做了一个改变。我将.attr（“disabled”、“disabled”）替换为.attr（“readonly”，true）；工作起来很有魅力。禁用会使字段变为灰色，而只读会使字段变为只读：-）是的，我需要直观地显示它们已禁用，并且数据是从不同的字段填充的。Readonly让我觉得有些不对劲，因为我可以点击但不能编辑。。。我想这对我来说更像是一个用户体验问题。现在，有没有一种方法可以在页面加载时加载函数？哇！这真的很酷。当复选框处于启用状态时，是否有办法禁用第二组中的字段，同时仍显示要复制的值？有点太快了。请参阅此更新的小提琴安装。谢谢这太棒了！不过我做了一个改变。我将.attr（“disabled”、“disabled”）替换为.attr（“readonly”，true）；工作起来很有魅力。禁用会使字段变为灰色，而只读会使字段变为只读：-）是的，我需要直观地显示它们已禁用，并且数据是从不同的字段填充的。Readonly让我觉得有些不对劲，因为我可以点击但不能编辑。。。我想这对我来说更像是一个用户体验问题。现在，有没有一种方法可以在页面加载时加载函数？

function copyElement(copyFrom, whereToCopy) {
    if(document.formName.copy.checked){
        document.formName.elements[whereToCopy].value = copyFrom.value;
    }
}
</script>

<form name="formName">
    <input type="text" name="a1" onkeypress="copyElement(this, 'b1')">
    <br>
    <input type="text" name="a2" onkeypress="copyElement(this, 'b2')">
    <br>
    <input type="text" name="a3" onkeypress="copyElement(this, 'b3')">
    <br>
    <input type="checkbox" name="copy"> Copy Group 1
    <br>
    <input type="text" name="b1">
    <br>
    <input type="text" name="b2">
    <br>
    <input type="text" name="b3">
    <br>
    <input type="submit">
</form>