copy form field values

Question

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.

Ole Melhus · Accepted Answer · 2010-11-02T12:46:25.967

3

Use jQuery and try something like this

http://jsfiddle.net/nA37d/

edited Nov 02 '10 at 12:46

answered Nov 02 '10 at 12:38

Ole Melhus

1,899
12
17

Wow! This is really cool. Is there a way to disable the fields in the second group, when the checkbox in enabled, while still showing the values being copied? – santa Nov 02 '10 at 17:42
A bit too fast there. See this updated fiddle insted. http://jsfiddle.net/nA37d/3/ – Ole Melhus Nov 02 '10 at 18:09
Thanks! This is great! I made one change, though. Instead of .attr("readonly", true) I put .attr("disabled", "disabled"); Works like a charm. – santa Nov 02 '10 at 18:23
Disabled will make your fields gray, while readonly only makes them read only :-) – Ole Melhus Nov 02 '10 at 18:24
Yes, I needed to visually show that they are disabled and that the data is populated from different fields. Readonly makes me feel that something is wrong, since i am able to click in but not able to edit... I guess it's more of a UX issue for me. Now, is there a way to be able to load function on page load? – santa Nov 02 '10 at 18:32
http://stackoverflow.com/questions/496052/jquery-setting-the-selected-value-of-a-select-control-via-its-text-description – Ole Melhus Nov 02 '10 at 20:59
I think I'm having a difficulty in passing a value from a drop-down to drop-down... Does it work differently? Lemme dig a bit. http://jsfiddle.net/qnrNC/ – santa Nov 02 '10 at 21:08
OK, I'm making progress. It "almost" works, at least when I select the checkbox. now i just need to make sure drop-down responds like other fields, while the checkbox is selected: http://jsfiddle.net/tYBeq/ – santa Nov 02 '10 at 21:30
Ah, I was so close! but you beat me to it! :) I missed one input in bind statement... – santa Nov 02 '10 at 21:31

score 1 · Answer 2 · answered Nov 02 '10 at 12:52

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>

score 0 · Answer 3 · answered Dec 05 '13 at 13:48

0

Or you can always use one of WYSIWYG form builders. If you're looking for something geeky, try ActiveForms - it's quite expensive, but works well.

answered Dec 05 '13 at 13:48

Larry

1

score 0 · Answer 4 · answered Nov 02 '10 at 12:35

0

Add onchange event to the elements and call your function.

answered Nov 02 '10 at 12:35

epascarello

204,599
20
195
236

Kalle · Answer 5 · 2010-11-02T12:44:36.827

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.

copy form field values

5 Answers5