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?
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");
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.
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)
Related
So I have a table that is suppose to reflect data that is passed in from sql and one of these data fields is a boolean that is supposed to be shown by a checkbox
From what I can tell I have set up the checkbox correctly but it still will not show as true. I also had it print out the value next to the check box to make sure the correct value was being passed.
<input name="DidPass" type="checkbox" ng-model="task.DidPass" ng-true-value="1" ng-false-value="0">{{task.DidPass}}
Here is a picture of the result:
Use ng-checked directive of angular like following:
<input name="DidPass" type="checkbox" ng-checked="task.DidPass == 1" ng-model="task.DidPass" ng-true-value="1" ng-false-value="0">{{task.DidPass}}
Maybe you could use the ng-checked directive ?
See docs
I have an input in my form with a step defined to 3:
<form>
<input name="surface" id="surface" type="number" step="3" />
</form>
I would like to be able to enter a number not multiple of the step, but it's refused at validation by the browser.
In example, if I insert "2.5" in the input, the message error I've got is:
Please select a valid value. The 2 closest values are 0 and 3.
Is it possible to make this step not mandatory?
I've tried to add novalidate="novalidate" as attribute but it doesn't work.
After more research, it appears it's not possible to make the step non mandatory on an HTML5 input.
I'll have to implement a custom number input (in jQuery or else) to achieve this.
Is it possible to have a <input type="checkbox"> post 1 when selected and 0 when not selected?
By default, it only POST's something (in Firefox 'on') if it has been selected, nothing when not selected.
Preferably without the use of JavaScript.
I know that in Ruby on Rails the default workaround is to use two inputs like so:
<input type="hidden" name="whatever" value="0" />
<input type="checkbox" name="whatever" value="1" />
That way, if the checkbox isn't checked, the zero value gets sent. But if it is, both values get sent. Rails will deal with this behind the scenes, but if you go this route with a different server backend, you may need to take that into account.
Alternatively, if you like JavaScript, you can use a nameless, valueless checkbox with its "onchange" event bound to something that sets the hidden input's value appropriately.
Hope that's useful!
Long story short: No.
<select> only sends the value of the <option> or <option>s that is/are selected.
Just make sure you have an idea of what the options are going into it, and you'll have it made in the shade.
Edit: To address the updated question:
Same story still short: No.
Only the value (or occasionally content) of "successful" controls are sent.
If a checkbox is not checked, it's not successful, and as such, won't be sent.
Just make sure you have an idea of what the controls are going into it, and you'll have it made in the shade.
Reedit: It's probably possible with JavaScript, by messing with the onSubmit action, and setting the value of the related name to 0 if it's not already set.
At the risk of sounding like your tennis instructor, I do have to inform you that this course of action is neither wise nor advisable.
I'm new to web development
I want to submit a form with the label names.
I mean in my html page i have shown some details of a person. Those details are showing using labels. After clicking submit button i want to submit that details to another HTML page
Anyone have a Idea how to do that?
Use the concept of hidden fields.
http://www.w3schools.com/tags/att_input_type.asp
Why not style input fields to look like labels? You could even stop them from being editable. That way a form submit will ensure they get posted.
You can use hidden field with labels
input type="hidden"
I'll give You an example of my way of solving this:
I declare two html elements as this:
<label name="importe_label" id="importe_label" />
<input type="hidden" id="importe" name="importe" value=""/>
Then, for example, I set both of them with jQuery:
$("#importe_gravado").val(99.99);
$("#importe_gravado_label").text(99.99);
So, when I submit the form, I get the value I need in back-end (In the "importe" parameter, in this case).
I don't know if is this the best way, but It works! :)
Hope It helps anybody. Best regards!
I went through many online documents for the checkbox input in XHTML. Can anyone clear my doubt? What does this name field actually stand for?
Milk: <input type="checkbox" name="checkbox" value="Milk">
Chocolate: <input type="checkbox" name="checkbox" value="chocolate">
Cold Drink: <input type="checkbox" name="checkbox" value="Cold Drink">
I thought it was an identifier for that particular checkbox, which can later be used in other file by just referring their name, but given that all the checkbox had same name, why even specify it? A little confused of this.
Dont be confused because of name="checkbox". It could more logically be name="drink" and type=checkbox.
In the above case, you have multiple checkboxes with the same name. When several checkboxes have the same name, the form will send a group of values to the server in the request. Note: only the values of the checked checkboxes will be sent to the server.
Ideally these are used to allow multiple choice questions where more than one answer is allowed.
As opposed to radio buttons, where only one answer is allowed among the options.
Update:
On the receiving side, if you're using JSP for example - the values of the selected checkboxes will be available as request.getParameterValues("drink") or request.getParameterValues("checkbox") in your actual case. This is where the name attribute is used.
The name attribute is used to
reference form data after it’s
submitted, and to reference the data
using JavaScript on the client side.
Source: http://reference.sitepoint.com/html/input/name
Basically, what you've described. When the form is submitted, you can access the values of the form elements through the name you ascribe to them.
The only place where you would want to have multiple inputs with the same name is when they are radio buttons, in which case it is used to indicate which one of them belongs to the same group and thus only one of which can be selected at a time.
The name attribute is used to identify a checkbox. Which you could parse into a object like so {checkboxName1: 'checkboxValue2', checkboxName2: 'checkboxValue2'}
You missed the array setting for the name. By using the array setting (using square brackets), the result will be three different indexes for the checkboxes.
Milk: <input type="checkbox" name="checkbox[]" value="Milk">
Chocolate: <input type="checkbox" name="checkbox[]" value="chocolate">
Cold Drink: <input type="checkbox" name="checkbox[]" value="Cold Drink">
the "name" is same with the databse record, every field should have a name, so when you click the submit, the data will recorded to the database~~~~~