Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

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

share|improve this question
Why wouldn't you just submit it to your database? Any reason why you want to use javascript? – Joeri Minnekeer Jun 13 '12 at 7:23
2  
You have multiple elements with the same ID. This is not going to work :) – Florian Margaine Jun 13 '12 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 Jun 13 '12 at 7:25
yes id should be intrests[] – Rinzler Jun 13 '12 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 – GeoPhoenix Jun 13 '12 at 7:26
show 1 more comment

4 Answers

up vote 3 down vote

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?

share|improve this answer
You're correct about the name, so you don't need to apologise about being wrong :) Do note that IDs must be unique, however. – Bojangles Jun 13 '12 at 7:38
I need to display the result on the same page. That is the reason I want to first pass the form inputs to javascript. – anita.kcx Jun 13 '12 at 7:52
Haha, wow sure missed that one. Thanks for pointing it out @JamWaffles and thanks! – Andy Jun 13 '12 at 13:31
as for anita.kcx, who do you need to do that? If we know it'll better help me give you the best answer. – Andy Jun 13 '12 at 13:32
up vote 0 down vote
  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']
share|improve this answer
up vote 0 down vote

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 comma separated string then try

val.join(',');

Note

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

share|improve this answer
up vote 0 down vote

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 )
share|improve this answer
I am currently not using onsubmit(). I have a php file in my form action field. I need to display the results on the same page so I pass the form inputs to javascript variables. These variables are then passed to php along with url. Will the javascript code work without onsubmi()? – anita.kcx Jun 13 '12 at 8:06
Of course it will. The javascript code works without any dependency. – Florian Margaine Jun 13 '12 at 8:10

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.