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.
Related
I am doing a django project.
But I wanted to have radio buttons grouped as well as name of the buttons to work with django.
Is it okay to use two name attributes in one HTML tag?
Will I be facing any errors if I do so?
Below is my code I am stuck in.
<input type="radio" name="group1" name="removePunc"> Remove Punctuations
<br>
Input name attributes must be unique to send data using traditional forms. If you find yourself needing more attributes, use the data- attributes. Pls share some code to undertand what you are trying to achieve.
If you want to label the group of radio buttons add class="group1" to all of the radio buttons instead of name="group1".
<label for="removePunc">Remove Punctuations</label>
<input type="radio" class="group1" name="removePunc">
<label for="button2">Button 2</label>
<input type="radio" class="group1" name="button2">
<label for="button3">Button 3</label>
<input type="radio" class="group1" name="button3">
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.
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'm trying to program a dynamic form, so I can't use the normal form tags and stuff. I use normal buttons, JQuery, and AJAX calls to simulate a traditional form. However, I can't figure out how to do radio buttons. Any help?
EDIT: Yeah, I suppose I should have been more specific. I tried doing
<input type="radio" />
and stuff, but:
it lets me select more than one button at a time (which kind of defeats the point of radio buttons)
it won't let me deselect a button after it's pressed!
EDIT 2: The reason I'm not using form tags is that I need multiple submit buttons as well, and the only solution I found to that dilemma was to not use form tags.
Why can't you use the form tag? There is nothing stopping you from doing so. But if you don't want to use the form tag, why not:
<input type='radio' name='test' value='1' checked>
<input type='radio' name='test' value='2'>
<input type='radio' name='test' value='3'>
<input type='radio' name='test' value='4'>
Works fine for me. Demo
Edit:
1: You need to specify a name for the radio group, otherwise each input is considered its own group. Hence why you can select more than one button at a time when using <input type="radio" />. Look at my code above. The radio group is 'test'.
2: Radio buttons are suppose to have a default value. When you create a radio group you should be specifying a default value with the checked attribute. A consequence of this is that you can't deselect a radio button. You can either choose a different value or stick with the default. If you want to be able to deselect, then consider using checkboxes instead. I've updated the example code to reflect this.
If you are able to select more than one radio button, its sounds like your name attributes are not matching. What you want to end up with is something like the following:
<input type="radio" name="group-1" value="something-unique">
<input type="radio" name="group-1" value="something-else-unique">
<input type="radio" name="group-1" value="another-unique-something">
<input type="radio" name="group-2" value="something-unique">
<input type="radio" name="group-2" value="something-else-unique">
<input type="radio" name="group-2" value="another-unique-something">
Note that the name attribute is the same for the group of options, which means that the selections will replace each other.
Also, I haven't had any issues not wrapping radios in form tags, when using them purely with javascript, however if you want to do any html post stuff, I would expect that they are required.
You can try this:
HTML
<div>
<ul>
<li><input type="radio" name="radio" value="value1" checked>Radio Button1</input></li>
<li><input type="radio" name="radio" value="value1">Radio Button2</input></li>
<li><input type="radio" name="radio" value="value1">Radio Button3</input></li>
</ul>
</div>
DEMO
There should not be an input element without a form element. You are not going to get the HTML to respond the way you want it to if you do not use it correctly. Multiple submit buttons would indicate the need for multiple forms.
If, for whatever reason, that does not work, perhaps you should reconsider the format through which you are asking the user to submit information.
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" />