Copy Input Fields

Copy from one input field to another.

by SullysRants

HTML

<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" id="copyCheck"> 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>

JavaScript

$(function(){
    $("#copyCheck").change(function() {
        if ($("#copyCheck:checked").length > 0) {
            bindGroups();
        } else {
            unbindGroups();
        }
    });
});

var bindGroups = function() {
    // First copy values
    $("input[name='a1']").val($("input[name='b1']").val());
    $("input[name='a2']").val($("input[name='b2']").val());
    $("input[name='a3']").val($("input[name='b3']").val());

    // Then bind fields
    $("input[name='b1']").keyup(function() {
        $("input[name='a1']").val($(this).val());
    });
    $("input[name='b2']").keyup(function() {
        $("input[name='a2']").val($(this).val());
    });
    $("input[name='b3']").keyup(function() {
        $("input[name='a3']").val($(this).val());
    });
};

var unbindGroups = function() {
    $("input[name='b1']").unbind("keyup");
    $("input[name='b2']").unbind("keyup");
    $("input[name='b3']").unbind("keyup");
};