3

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

Improve this question
5
  • Why wouldn't you just submit it to your database? Any reason why you want to use javascript? Commented Jun 13, 2012 at 7:23
  • 2
    You have multiple elements with the same ID. This is not going to work :) 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 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 Commented Jun 13, 2012 at 7:26
  • You might want to pick one of our answers to get this question as "answered" please. Commented Jun 16, 2012 at 5:08

4 Answers 4

Reset to default
3

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?

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

You're correct about the name, so you don't need to apologise about being wrong :) Do note that IDs must be unique, however.
I need to display the result on the same page. That is the reason I want to first pass the form inputs to javascript.
Haha, wow sure missed that one. Thanks for pointing it out @JamWaffles and thanks!
as for anita.kcx, who do you need to do that? If we know it'll better help me give you the best answer.
2

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.

Improve this answer

Comments

0
  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']
Improve this answer

Comments

0

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 )
Improve this answer

3 Comments

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()?
Of course it will. The javascript code works without any dependency.
"els is undefined". also has one extra ")"

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.