I want to get all values from a set of checkboxes via POST - also the ones that return false. For a single checkbox there is a solution here. It's hacky but it does at least not require Javascript. But how about this
<input name="link[]" type="checkbox"/>
<input name="link[]" type="checkbox"/>
...
A similiar solution as the one suggested in the other post would not work, because it keeps iterating:
<input name="link[]" type="hidden"/> <!-- 0 -->
<input name="link[]" type="checkbox"/> <!-- 1 -->
<input name="link[]" type="hidden"/> <!-- 2 -->
<input name="link[]" type="checkbox"/> <!-- 3 -->
...
The one other way I can think of is explicitly giving them indexes
<input name="link[0]" type="hidden"/>
<input name="link[0]" type="checkbox"/>
<input name="link[1]" type="hidden"/>
<input name="link[1]" type="checkbox"/>
<input name="link[2]" type="hidden"/>
<input name="link[2]" type="checkbox"/>
Or you could do this, without using hidden inputs:
<input name="link[0]" type="checkbox"/>
<input name="link[1]" type="checkbox"/>
<input name="link[2]" type="checkbox"/>
Then check for missing array indexes server-side.
When a form is submitted, all the form elements that have a name attribute specified for them submit their name and their value. With most form elements, the value comes from what the user inputs.
When you submit a form that has radio buttons and/or checkboxes in it, only the name/value pairs form the checked checkbox or radio button is submitted. This way, your form processing code doesn't have to sort out which buttons/boxes were checked. A consequence of this however, is that both checkboxes and radio buttons must have a value set for their value attribute. This value is how you will know which button/box was selected (receiving a name/value pair of checkbox4=true doesn't really tell you much.)
In the following code, we will know which checkboxes were checked just by looking at the data submitted to the form's action which checkboxes were checked and what the meaning of those checks were:
<input type="checkbox" name="chkStudent1" value="Mary"> Mary
<input type="checkbox" name="chkStudent2" value="John"> John
<input type="checkbox" name="chkStudent3" value="Joe"> Joe
Now, when the form is submitted, and let's say you check the second checkbox, the name/value pair of chkStudent2=John will be submitted. Your form processing code will know exactly which element was checked and the corresponding data will be available to that code.
Related
I have the following form, where users can choose to enter either the ID or the name:
<label for="ID"><input type="radio" name="Member" id="ID"> Member ID <input id="MemberID"></label><br/>
<label for="Name"><input type="radio" name="Member" id="Name"> Last Name <input id="LastName"></label>
When I click on "Member ID or Last Name, this switches the radio buttons. However when I click on the text inputs, this has no effect on the radio buttons.
Is this the expected behavior? If so, is there any way to tweak the html to make it work?
Note: this is not a JavaScript question.
Fiddle: https://jsfiddle.net/3by5wqzw/
Yes, this seems to be the expected behaviour on chrome, microsoft edge and firefox on windows 10 and on chrome for android lollipop.
You can use a bit of javascript to solve the problem:
<label for="ID"><input type="radio" name="Member" id="ID"> Member ID <input id="MemberID" onclick="document.getElementById('ID').checked = true;"></label><br/>
<label for="Name"><input type="radio" name="Member" id="Name"> Last Name <input id="LastName" onclick="document.getElementById('Name').checked = true;"></label>
When you click on a text input, the client will automatically check the matching radio button looking it up by its id.
As an alternative, you could put the Javascript code in a function, so it looks better and is easier to edit if you have lots of radio buttons with text input associated with it:
function check_radio(element_id){
document.getElementById(element_id).checked = true;
}
<label for="ID"><input type="radio" name="Member" id="ID"> Member ID <input id="MemberID" onclick="check_radio('ID');"></label><br/>
<label for="Name"><input type="radio" name="Member" id="Name"> Last Name <input id="LastName" onclick="check_radio('Name');"></label>
In regular html, radio input types are not related to anything other than the label associated with it. Therefore any other input text fields before or after need to be hooked up via some sort of javascript.
I think I found the answer.
The w3 recommendation states:
In an HTML document, an element must receive focus from the user in order to become active and perform its tasks
The issue is that when the user clicks on the text input, the radio button loses focus and is not activated.
Source (html4): http://www.w3.org/TR/html4/interact/forms.html#focus
I need to send a very long form with lots of checkboxes. They're grouped by areas, like this:
<fieldset>
<legend>Whatever1</legend>
<div class="checkbox-list">
<label class="checkbox inline"><input type="checkbox" name="Hobbies" value="Arts"> Arts</label>
<label class="checkbox inline"><input type="checkbox" name="Hobbies" value="Bars"> Bars</label>
<label class="checkbox inline"><input type="checkbox" name="Hobbies" value="Books"> Books</label>
(more items)
</div>
</fieldset>
<fieldset>
<legend>Whatever2</legend>
<div class="checkbox-list">
<label class="checkbox inline"><input type="checkbox" name="Interests" value="Architecture"> Architecture</label>
<label class="checkbox inline"><input type="checkbox" name="Interests" value="Audio"> Audio/vídeo</label>
<label class="checkbox inline"><input type="checkbox" name="Interests" value="Business"> Business</label>
(more items)
</div>
</fieldset>
The form is much longer, but you get the idea.
Using name="Hobbies" value="Arts" my django backend receives all the checkboxes grouped in a Hobbies array, which is very convenient, but I need to know the unchecked checkboxes, too. I know about the hidden input trick, but it's not useful to me, because I use the value field as part of the checkbox grouping.
Any idea about what can I do?
Well, as I guess you already know, there is fundamentally no way of asking the browser which boxes were left unticked. Blame the inventors of HTML forms...
Here are a few simple approaches which don't break your grouping logic:
Re-generate the list of checkboxes which you displayed on your server side. This is preferable in a lot of cases anyway, since it means you're not trusting the data coming back to be exactly what you displayed. (Consider what happens if I use a debugging tool like Firebug to delete one of your checkboxes, or add a new one...)
Include hidden inputs with a corresponding name for each checkbox - "Interests_All", "Hobbies_All", etc - so that you have two arrays of data, one including just the checked items, one including everything displayed.
Use radio buttons instead of check-boxes. Yes, they display differently, but they can have the functionality you want of submitting a Yes/No value, rather than just adding to the array or not.
How about setting a default false value for each checkbox in the backend. If a value has been passed by the browser, you can then change the value to true.
You could add a hidden input field, and on form submit, use jQuery to populate the value of the hidden input with an array containing the values of the unchecked checkboxes:
$("form").on("submit", function(e) {
e.preventDefault();
// Create an array of unchecked Hobbies
var uncheckedValues = [];
$(this).find("input[name='Hobbies']:not(:checked)").each(function() {
uncheckedValues.push(this.value);
});
// Set the uncheckedValues array as hidden input value
$("#your-hidden-input").val(uncheckedValues);
alert($("#your-hidden-input").val());
// Handle the form submission
handleFormSubmit();
});
See DEMO.
I've solved it. The idea was in IMSoP's answer. Here's my solution, maybe it can help someone:
<fieldset>
<legend>Whatever1</legend>
<div class="checkbox-list">
<input type="hidden" name="Hobbies_Arts">
<label class="checkbox inline"><input type="checkbox" name="Hobbies" value="Arts"> Arts</label>
<input type="hidden" name="Hobbies_Bars">
<label class="checkbox inline"><input type="checkbox" name="Hobbies" value="Bars"> Bars</label>
<input type="hidden" name="Hobbies_Books">
<label class="checkbox inline"><input type="checkbox" name="Hobbies" value="Books"> Books</label>
(more items)
</div>
</fieldset>
With that, is very easy to handle the lists in the django side.
Suppose this checkbox snippet:
<input type="checkbox" value="1">Is it worth?</input>
Is there any reason to statically define the value attribute of checkboxes in HTML? What does it mean?
I hope I understand your question right.
The value attribute defines a value which is sent by a POST request (i.e. You have an HTML form submitted to a server).
Now the server gets the name (if defined) and the value.
<form method="post" action="urlofserver">
<input type="checkbox" name="mycheckbox" value="1">Is it worth?</input>
</form>
The server would receive mycheckbox with the value of 1.
in PHP, this POST variable is stored in an array as $_POST['mycheckbox'] which contains 1.
I just wanted to make a comment on Adriano Silva's comment.
In order to get what he describes to work you have to add "[]" at the end of the name attribute, so if we take his example the correct syntax should be:
<input type = "checkbox" name="BrandID[]" value="1">Ford</input>
<input type = "checkbox" name="BrandID[]" value="2">GM</input>
<input type="checkbox" name="BrandId[]" value="3">Volkswagen</input>
Then you use something like: $test = $_POST['BrandID']; (Mind no need for [] after BrandID in the php code).
Which will give you an array of values, the values in the array are the checkboxes that are ticked's values.
Hope this helps! :)
One reason is to use the ease of working with values in the system.
<input type="checkbox" name="BrandId" value="1">Ford</input>
<input type="checkbox" name="BrandId" value="2">GM</input>
<input type="checkbox" name="BrandId" value="3">Volkswagen</input>
When the form is submitted, the data in the value attribute is used as the value of the form input if the checkbox is checked. The default value is "on".
$('form').on('change', update).trigger('change')
function update() {
var form = $(this)
form.find('output').text('→ ' + form.serialize())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="checkbox" name="foo">
<output></output>
</form>
<form>
<input type="checkbox" name="foo" checked>
<output></output>
</form>
<form>
<input type="checkbox" name="foo" value="1" checked>
<output></output>
</form>
<form>
<input type="checkbox" name="foo" value="bananas" checked>
<output></output>
</form>
For the sake of a quick glance answer, from MDN
when a form is submitted, only checkboxes which are currently checked are submitted to the server, and the reported value is the value of the value attribute
It can be confusing because seeing something like
<input type='checkbox' name='activated' value='1'> might lead one to believe that the 1 means true and it will be treated as though it is checked, which is false. The checked attribute itself also only determines if the checkbox should be checked by default on page load, not whether it is currently checked and thus going to be submitted.
I have the following form code but I cannot select the sell radio in IE
and I can select both radios at once in Google Chrome.
<form method="post" action="dothemath.php" style="width: 403px" class="style1">
<input type="radio" id="rdobuy" style="width: 20px; height: 21px;" checked="checked"/>
<label>Buy</label>
<input type="radio" id="rdosell" style="width: 20px; height: 21px;"/>
<label >Sell</label>
</form>
Is there any thing I am missing...?
Your radio buttons don't have name attribute. They need them for two reasons.
Having the same name groups a set of radio buttons into a single radio group
The name is used to generate the form data to be submitted to the server
You also need a value to say what the submitted data is going to be.
As an aside, your <label>s are useless as they aren't associated with any controls. They need a for attribute with the same value as the id of the control they are to be associated with.
<form method="post" action="dothemath.php">
<input type="radio" id="rdobuy" name="foo" value="buy" checked="checked"/>
<label for="rdobuy">Buy</label>
<input type="radio" name="foo" value="sell" id="rdosell" />
<label for="rdosell">Sell</label>
</form>
You should add a name attribute and the names should be same for both radios.
you should add a name attribute to all your HTML element listed in your code. it helps the browser to identify what it sends to the server. Radios are optional based, you cant select two at a time, except you're using php arrays, simply use a check button instead for that.
On form submission, how could you possibly mark a checkbox/radiobutton as required?
Source of inspiration: Pekka's answer to a question
Required checkboxes are not unusual. Practically every registration form uses some form of the "I have read and accept the User Agreement" checkbox.
If you have Opera handy try out the code below. The form won't submit unless the checkbox is checked.
<!doctype html>
<html>
<head>
<title>html5</title>
</head>
<body>
<h1>html5 test</h1>
<form action="/">
<input type="checkbox" required="required" id="cb" name="cb">
<label for="cb">required checkbox</label>
<input type="submit">
</form>
</body>
</html>
For checkboxes, the best way is probably to pre-select it and set it to disabled. Just kidding.
To ensure one radio button in a group has been selected, either start with a default choice or validate using javascript. There are no HTML-ways to do that because every possible selection is valid.
In html5 there is a required attribute for checkboxes.
They are somehow weird, so let me quote something to explain how they work.
For checkboxes, the required attribute shall only be satisfied when one or more of the checkboxes with that name in that form are checked.
For radio buttons, the required attribute shall only be satisfied when exactly one of the radio buttons in that radio group is checked.
Of course you always have to validate server side because the client can always send you whatever he desires. Just use these methods for better user experience.
I tested required attribute for Radio Buttons today on Firefox 17.0.1 on XP SP2.
It seems to comply with the specification of required attribute for radio buttons/groups. As Firefox prompts "Please select one of these options." for both of the code snippets below:
Either you set required attribute for each of the radio buttons
<input type="radio" name="gender" value="male" required="required" />
<input type="radio" name="gender" value="female" required="required" />
Or Any One of the Radio elements
<input type="radio" name="color" value="blue" />
<input type="radio" name="color" value="red" required="required" />
<input type="radio" name="color" value="green" />
Any comments and updates are welcome.
I just tried it on a radio button in Firefox 4. Adding required to one radio input, then submitting before selecting one, triggers a "Please select one of these options" tooltip.
E.g. this works:
<input type="radio" name="gender" value="m" required />
<input type="radio" name="gender" value="f" />