I want to know how to search the inputs provided by the user in the form of checkboxes in a mysql database. But before that I need to get the checked fields into a javascript array/string so that I can pass it to PHP with the url.

<form>
    <input type="checkbox" id="interests" name="interests" value="Food">`
    <input type="checkbox" id="interests" name="interests" value="Movies">`
    <input type="checkbox" id="interests" name="interests" value="Music">`
    <input type="checkbox" id="interests" name="interests" value="Sports">`
</form>

I am able to the above for other form elements such as text and select input but not sure how to do it for checkboxes. Please help. Thanks

I want to know how to search the inputs provided by the user in the form of checkboxes in a mysql database. But before that I need to get the checked fields into a javascript array/string so that I can pass it to PHP with the url.

<form>
    <input type="checkbox" id="interests" name="interests" value="Food">`
    <input type="checkbox" id="interests" name="interests" value="Movies">`
    <input type="checkbox" id="interests" name="interests" value="Music">`
    <input type="checkbox" id="interests" name="interests" value="Sports">`
</form>

I am able to the above for other form elements such as text and select input but not sure how to do it for checkboxes. Please help. Thanks

• php
• javascript
• forms
• checkbox

• Why wouldn't you just submit it to your database? Any reason why you want to use javascript? – Joeri Minnekeer Commented Jun 13, 2012 at 7:23
• 2 You have multiple elements with the same ID. This is not going to work :) – Florian Margaine Commented Jun 13, 2012 at 7:24
• I don't know why you wanna do it in javascript when you can do it directly in PHP? In your form, I believe in name, you can do interests[] just like that and when submitted directly to PHP, just get the length and loop through it – Andy Commented Jun 13, 2012 at 7:25
• you could use this name="interests[food]" , also selecting the input tag using a id with same value will return the first one, use a class or use a unique ID – Gntem Commented Jun 13, 2012 at 7:26
• You might want to pick one of our answers to get this question as "answered" please. – Andy Commented Jun 16, 2012 at 5:08

4 Answers 4

Rather than

<form> 
<input type="checkbox" id="interests" name="interests[]" value="Food"> 
<input type="checkbox" id="interests1" name="interests[]" value="Movies"> 
<input type="checkbox" id="interests2" name="interests[]" value="Music"> 
<input type="checkbox" id="interests3" name="interests[]" value="Sports">

Change the name attribute from interests to interests[] Should solve your problem. If I am wrong about the attribute I am sorry, a little out of practice with PHP, but I am pretty sure. No need to do anything with javascript. Its much easier this way. Of course, if you don't want easy...

In terms of your first question about searching it through the database, I don't understand why you would need to?? If its a checkbox you know exactly what it should be, so just make it that and insert it into your database like so:

INSERT INTO your_table values(user_id_i_guess, interests...);

You get the point right?

Problems in your code

• don't use same id to multiple elements

• change checkboxs' name to interests[]

jQuery

var vals = [];

$(':checkbox:checked[name^=interests]').val(function() {
   vals.push(this.value);
});

If you want to convert array to as ma separated string then try

val.join(',');

Note

$(':checkbox:checked[name^=interests]') selector select all checked checkbox with name start with interests.

1. You must use different id for checkboxes (id for element must be unique)
2. Make name for checkboxes interests[] and submit form - on server you can use array $_POST['interests'] or $_GET['interests']

Assuming that your form has a name,

var c = [],
    els = document.forms.formName.elements,
    len = els.length;

for ( var i = 0; i < length; i++ ) {

    if ( els[ i ].type === 'checkbox' ) {

        // If you want to add only checked checkboxes, you can use:
        if ( els[ i ].checked ) c.push( els[ i ].value );

        // If you don't care, just use:
        c.push( els[ i ].value );
    }
}

console.log( c ); // Array of the checkboxes values

If you don't care about legacy browsers, you can use map to have cleaner code:

var c = [].map.call( document.forms.formName.elements, function( el ) {
    if ( el.type === 'checkbox' ) {
        if ( el.checked ) return el.value;
    }
} );

If you have jQuery, here is some codez:

var c = $( ':checkbox:checked' ).map( function() {
    return $( this ).val();
} );

console.log( c ); // Array of the checkboxes values

// To be more precise (so, more performant), you can use the following selector:
$( ':checkbox:checked', document.forms.formName.elements )