I need to write a code that will copy one set of form values into another. And normally it is done by something like this:

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

However, I'd like to modify it in such a way that if the checkbox is selected and the the user went back and modified any values in group 1 -- the corresponding fields in group 2 are updated as well.

I think it can be done, but not sure how.

Thanks.

I need to write a code that will copy one set of form values into another. And normally it is done by something like this:

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

However, I'd like to modify it in such a way that if the checkbox is selected and the the user went back and modified any values in group 1 -- the corresponding fields in group 2 are updated as well.

I think it can be done, but not sure how.

Thanks.

• javascript
• forms

Share Improve this question Follow asked Nov 2, 2010 at 12:23 santasanta 12.5k5151 gold badges161161 silver badges266266 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

Use jQuery and try something like this

http://jsfiddle/nA37d/

Hope this help:

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>

Add onchange event to the elements and call your function.

One way is to check the onchange-events of each input field and if the checkbox is checked then copy the values, but that would copy lots of data all the time, and as such is not very efficient.

Another way is to use a button instead of a checkbox (a button with the value "Copy to other form" can hardly be misinterpreted, whereas a checkbox is ambigous), and in the onclick-event of the button trigger the copy-code.

Just a note: I would choose to use jQuery for this, and just type $("#formName input").change(function(stuff)); or something like that.

Or you can always use one of WYSIWYG form builders.