Question

I am busy getting values on a form using jQuery to send to my PHP script. Well, most of my checkboxes have a name in the form of name="input[]" and so when I alert the value that gets returned in my form’s submit() handler, it only returns the value of the first checkbox with that name. How can I return the values in array form?

Here is my code:

$("form.enquiry").submit(function () {
    // general enquiry variables
    var name = "";
    var email = "";
    var enquiry = "";

    // quote enquiry variables
    var company = "";
    var address = "";
    var cellphone = "";
    var quote_package = "";
    var quote_items = "";

    // data to be sent to sendEmail.php
    var data = "";

    if ($(this).find("input[name='enquiry_type_chk']:checked").val() == "General") {
        name = $(this).find("input[name='general_name_txt']").val();
        email = $(this).find("input[name='general_email_txt']").val();
        enquiry = $(this).find("textarea[name='general_enquiry_txt']").val();

        data = "name_txt="+name+"&email_txt="+email+"&enquiry_txt="+enquiry;
    }

    if ($(this).find("input[name='enquiry_type_chk']:checked").val() == "Quote") {
        name = $(this).find("input[name='quote_name_txt']").val();
        email = $(this).find("input[name='quote_email_txt']").val();
        company = $(this).find("input[name='quote_company_txt']").val();
        address = $(this).find("input[name='quote_address_txt']").val();
        cellphone = $(this).find("input[name='quote_cell_txt']").val();
        quote_package = $(this).find("input[name='quote_package_chk[]']").val();
        quote_items = $(this).find("input[name='quote_item_chk[]']").val();

        data = "name_txt="+name+"&email_txt="+email+"&company_txt="+company+"&address_txt="+address+"&cellphone_txt="+cellphone+"&quote_package_txt="+quote_package+"&quote_items_txt="+quote_items;

        alert(data);
    }


    return false;
});

and part of my form:

...
<td><input type="checkbox" name="quote_item_chk[]"  id="quote_package_chk" value="Login member area" class="power toolbox quote_item_chk" />
<label for="quote_package_chk" class="nostyle item power toolbox">Login/member area</label></td>
<td><input type="checkbox" name="quote_item_chk[]" class="quote_item_chk basic power toolbox" id="quote_package_chk" value="Photo video gallery" />
<label for="quote_package_chk" class="nostyle item basic power toolbox">Photo and/or video gallery</label></td>
<td><input type="checkbox" name="quote_item_chk[]"  id="quote_package_chk4" class="quote_item_chk" value="Portfolio" />
<label for="quote_package_chk4" class="nostyle item">Portfolio (gallery + custom descr.)</label></td>

Thanks in advance.

Answer 1

You could loop over the returned elements (instead of calling val() on the group, which only operates on the first), but it would be easier to stop reinventing the wheel and just use serialize