jQuery Add/Remove Input Fields

A script that uses event delegation and the .live() method for adding and deleting extra input form fields.

by Nibin George

HTML

<input name="val1" class="other" id="field1" type="checkbox" value="value1">value1
<input name="val2" class="other" id="field2" type="checkbox" value="value2">value2
<div id="test"></div>

CSS

* {
    font-family:Arial;
}
h2 {
    padding:0 0 5px 5px;
}
h2 a {
    color: #224f99;
}
a {
    color:#999;
    text-decoration: none;
}
a:hover {
    color:#802727;
}
p {
    padding:0 0 5px 0;
}
input {
    padding:5px;
    border:1px solid #999;
    border-radius:4px;
    -moz-border-radius:4px;
    -web-kit-border-radius:4px;
    -khtml-border-radius:4px;
}

JavaScript

var combine = "";
$("#field1, #field2").click(function () {
    var name = $(this).val();
    if ($(this).is(':checked')) {
        combine += name + '-';
    } else {
        combine = combine.replace(name + "-", "");
    }

    $('#test').html('<input size="100" type="text" id="product" value="' + combine + '"/>');

});