StackOverflow Question: Moving Data Between Forms

http://stackoverflow.com/q/25309609/1093087

by klenwell

HTML

<form id="form-a">
    <div>Item 1: <input type="checkbox" class="item-selector" name="item[]" value="1" /></div>
    <div>Item 2: <input type="checkbox" class="item-selector" name="item[]" value="2" /></div>
    <div>Item 3: <input type="checkbox" class="item-selector" name="item[]" value="3" /></div>
</form>

<form id="form-b">
    <div>E-Bill: <input type="checkbox" value="1" name="is_ebill" /></div>
    <div>Banned: <input type="checkbox" value="1" name="is_banned" /></div>
    <div><input type="submit"></div>
    <input type="hidden" id="itemId" name="itemId" value="" />
</form>
    
<h4>Data Submitted:</h4>
<ul id="value-list"></ul>

JavaScript

$('#form-b').on('submit', function() {
    var checkedValues = [];
    $('.item-selector:checked').each(function() {
        checkedValues.push($(this).val());
    });
    
    $('#itemId').val(checkedValues.join(','));
    listFormData('#form-b');
    
    return false;
});

function listFormData(form_selector) {
    $('#value-list').empty();
    jQuery.each($('#form-b').serializeArray(), function(n, formData) {
        var $li = $('<li />').text(formData.name + ': ' + formData.value);
        $('#value-list').append($li);
    });
}