Question

This script extracts data from check boxes in order to determine the information a form sends to PayPal. PayPal only accepts a cart without any gaps; however, this script counts unchecked boxes in the index which makes the cart invalid (“item_name_1”, “item_name_3”, “item_name_7”). How do I make it so that the script generates a gapless succession of numbers (“item_name_1”, “item_name_2”, “item_name_3”)?

function updateCart(form) {
    var cart = "";
    var P = $('#P');
    for (var i = 0; i < document.getElementById('sList').P.length; i++) {
        if (document.getElementById('sList').P[i].checked)
        cart += '<input type="hidden" name="item_name_' + (i+1) + '" value="' + document.getElementById('sList').P[i].value.substring(6) + '"><input type="hidden" name="amount_' + (i+1) + '" value="' + document.getElementById('sList').P[i].value.substring(0, [5]) + '">'
    }
    if (cart == "") {
        alert("Please select products")
    } else alert(cart);
    $('#cart_items').html("" + cart);
    return false;
}

Answer 1

Your code has a few issues aside from the numbering:

The function has a form parameter that is never used.

document.getElementById() returns either a single DOM element or null. Your P variable is a jQuery object that, given you are selecting by id, should hold one element or none – given you are trying to use P with an index you seem to think it could have multiple matching elements but that would only be if you’ve got multiple elements with the same id which is invalid html (which will give unreliable results – so if so you should fix it: you can elements with the same name, but not the same id).

Either way it doesn’t make any sense to try to use P as a property of the DOM element returned by .getElementById(). So everywhere that you said document.getElementById('').P.something is wrong.

As far as generating unique numbering for the hidden inputs, you just need one variable for the loop counter, i, and then a second (new) variable for the input counting, let’s call it n. Increment n only within the if checked statement. Or if you loop with jQuery you don’t need i, just n. If you show your HTML I could update this properly rather than guessing, but something like this:

function updateCart(form) {
    // first remove any hidden inputs from a previous unsuccessful submit
    // (this may be optional depending on whether you're submitting with ajax
    // and/or potentially aborting the submit for other reasons, e.g., if you're
    // submitting with ajax and the web server might return an error you need to
    // remove the previous hiddens if the user tries again)
    $('#cart_items input[type="hidden"]').remove();

    // now process each checkbox and add numbered elements for each checked one
    var n = 0,
        $f = $("#cart_items");

    // you may need to vary the selector here because
    // I don't know the names of your elements
    $('input[type="checkbox"]').each(function() {
       if (this.checked) {
           // following is a tidied up version of your input creation code,
           // which assumes that the value attribute of the checkbox holds
           // the item name and price information.
           n++;
           $f.append('<input type="hidden" name="item_name' + n +
                     '" value="' + this.value.substring(6) + '">');
           $f.append('<input type="hidden" name="amount_' + n +
                     '" value="' + this.value.substring(0,5) + '">');
       }
    });
    if (n === 0) {
        // no hiddens were added
        alert("Please select products");
        return false;
    } else {
        // success, inputs added above
        return true; // or submit or whatever
    }    
}