5

Hello I have a form that allows the user to check as many options as they like and then hit submit. Is there any way to have the input type 'checkbox' submit more than one value?

For example right now I have:

<input type="checkbox" value="testuser">

But I want something like:

<input type="checkbox" value="testuser" valuetwo="1">

Is there any way to achieve this second option? Thanks!

Since there is no way to submit to values, is there a way to submit them both in value one? For example:

<input type="checkbox" value="testuser,1">

And if so how would I separate the value into two?

T Neate
  • 403
  • 2
  • 6
  • 18
  • why do you need more than one value per checkbox if you have multiple checkboxes? The server will receive every checkbox that was checked – Bruno Mar 25 '15 at 19:22
  • on submit javascript runs through every checked box and I need two values to submit a certain php query – T Neate Mar 25 '15 at 19:27
  • The rendered checkbox can be either checked or not checked. That's two possibilities in every counting system I've learned. Sounds like you need to invent your own version of http://thedailywtf.com/articles/What_Is_Truth_0x3f_ – cobaltduck Mar 25 '15 at 19:30
  • Your checkboxes are missing a `name` attribute. –  Mar 25 '15 at 19:32
  • Are these checkboxes in a form that's being directly submitted or are you using Ajax? – Josiah Keller Mar 25 '15 at 19:33
  • 1
    I think the way you want to do the things is wrong unfortunately...sending 2 values in a string and then splitting it on the server side is a bad idea. Maybe provide more details about your process and we can suggest a correct method to achieve what you need – Bruno Mar 25 '15 at 19:37
  • it seems like a bad idea but theoratically you can do it. just split the with a comma (,). if your server is C# for example .Split(','): – btevfik Mar 25 '15 at 19:40
  • @ibiza: why is this a bad idea? –  Mar 25 '15 at 19:41
  • I can't imagine situation then you have a CHECKBOX and you actually need such behavior. Can You please edit your post and give example, why You actually need it. It seems like a very bad design. – Dancia Mar 25 '15 at 19:42
  • Yeah this is generally not how you would want to do things. If you absolutely MUST do it this way, use JSON. The value would become somthing like ['testuser','1']. JSON can be easily parsed in most web languages. See http://www.w3schools.com/json/json_syntax.asp – Wouter Florijn Mar 25 '15 at 19:43
  • Or another approach would be using select2. See Tagging support in https://select2.github.io/examples.html, but again, impossible to tell with no real life example. – Dancia Mar 25 '15 at 19:45
  • From your first comment, it sounds like you have some JavaScript involved. What's the JavaScript doing? – Josiah Keller Mar 25 '15 at 19:46
  • I would be splitting the value in the javascript, so it would not be submitted with the comma – T Neate Mar 25 '15 at 19:47

3 Answers3

9

From your comments, it sounds like you have some JavaScript that handles the data before it's submitted. If that's the case, you can add a data attribute to the checkbox. To use your example, you could call it data-valuetwo.

<input type="checkbox" value="testuser" data-valuetwo="1">

Then, your JavaScript can use getAttribute to retrieve the value in your data-valuetwo attribute and handle it appropriately. It could look something like this:

var valuetwo = checkbox.getAttribute("data-valuetwo");
Josiah Keller
  • 3,635
  • 3
  • 23
  • 35
  • This sounds exactly like what I want to do, however I can not get it to work, can you please provide the js line that gets the second value – T Neate Mar 25 '15 at 20:02
  • var valueTwo = $( "input" ).attr( "data-valuetwo" ); alert(valueTwo); (jQuery) – Dancia Mar 25 '15 at 20:04
4

I found a way to do this without JavaScript or Libraries using a hidden form-field instead:

<input name="selectedValue" type="hidden" value="defaultValue">
<input name="selectedValue" type="checkbox" value="secondValue">

Now, if the checkbox is not selected, the hidden value is sent, if it is selected, the hidden value is overridden.

plexus
  • 1,728
  • 1
  • 16
  • 12
0

You might try alternative using select2, see: https://select2.github.io/examples.html (Tagging support, use two options limit). Again, there is no enough information supplied to fully satisfy Your question.

Another approach with select box and JSON is Can an Option in a Select tag carry multiple values? (can be rewritten for checkbox)

Community
  • 1
  • 1
Dancia
  • 762
  • 1
  • 18
  • 32