jQuery Cloning Elements then populating hidden field with concatenated results to avoid empty list issue

I got some code from a friend's blog to copy form elements using jQuery, and that works great:

$('#btnAdd').click(function() {
    var num     = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
    var newNum  = new Number(num + 1);      // the numeric ID of the new input field being added

    // create the new element via clone(), and manipulate it's ID using newNum value
    var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);

    // manipulate the name/id values of the input inside the new element
    newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);

    // insert the new element after the last "duplicatable" input field
    $('#input' + num).after(newElem);

    // enable the "remove" button
    $('#btnDel').attr('disabled','');

    // business rule: you can only add 5 names
    if (newNum == 5)
        $('#btnAdd').attr('disabled','disabled');
});

$('#btnDel').click(function() {
    var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
    $('#input' + num).remove();     // remove the last element

    // enable the "add" button
    $('#btnAdd').attr('disabled','');

    // if only one element remains, disable the "remove" button
    if (num-1 == 1)
        $('#btnDel').attr('disabled','disabled');
});

This works on an address block with the fields "address1,address2,city,state,zip". That way, when the form is submitted, I just loop over the list t开发者_如何学Goo insert the values into a table. But because there won't always be an entry in address2, the list I get doesn't give me a way to tell which list element it actually belongs to.

So, another friend suggested that, on form submit, I take the values from the form fields, change the delimiter to | (a good idea) and stuff them into hidden fields (which I called hidden_address1, hidden_address2, hidden_city, etc). And he gave me this code, which isn't working:

var values = [];
$('.address1').each(function() {
    values.push($(this).val());
});

$('#hidden_field').val(values.join('|'));

So I replicated that over the five fields, added values.length = 0; in between each set, but it's not working and Firebug isn't reporting any errors.

This is an area of jQuery where I'm just not that good. What am I doing wrong? :)

---

First I would recommend setting the values variable to a new empty array each time instead of setting the length to 0:

values = [] //instead of values.length = 0

But the real reason it isnt working is because you are selecting the hidden forms like this:

$('#hidden_address1').val(values.join('|'));

but the forms in the HTML look like this:

<input type="hidden" value="" name="hidden_address1">

So you are trying to select an element with ID of hidden_address1 but no such element exists, your hidden forms do not have IDs. You will need to change the markup to be:

<input type="hidden" value="" name="hidden_address1" id="hidden_address1">

And that should fix your issues.