I have a series of radio buttons in which i'd only like 1 to be able to be selected. I have them all with the same name so I thought this would do the trick but i can still select all four.
<h1>Portion</h1>
<input type="radio" name="portion_num" value="2" /> Two
<input type="radio" name"portion_num" value="4" /> Four
<input type="radio" name"portion_num" value="6" /> Six
<input type="radio" name"portion_num" value="8" /> Eight
The reason it doesn't work is because your name attribute syntax is wrong.
name"portion_num" should be name="portion_num"
http://jsfiddle.net/65ba8/
Put them inside of form tags.
Like so
<form>
<input type="radio" name="portion_num" value="2" /> Two
<input type="radio" name="portion_num" value="4" /> Four
<input type="radio" name="portion_num" value="6" /> Six
<input type="radio" name="portion_num" value="8" /> Eight
</form>
http://jsfiddle.net/
<form>
<input type="radio" name="portion_num" value="2" />Two
<input type="radio" name="portion_num" value="4" />Four
<input type="radio" name="portion_num" value="6" />Six
<input type="radio" name="portion_num" value="8" />Eight
</form>
Related
My code:
Radio text input type not working properly
All radio buttons are selected.
<input type="radio" name="cash" id="cash" value="CASH"/>CASH<br />
<input type="radio" name="card" id="card" value="CARD"/>CARD<br />
<input type="radio" name="netbank" id="netbank" value="NETBANKING"/>NETBANKING<br />
<input type="radio" name="paypal" id="paypal" value="PAYPAL"/>PAYPAL<br />
Demo: https://jsfiddle.net/hw7u83vm/
Radios with the same name are treated as a group. When you select one button, all other buttons in the same group are unselected.
Use
<input type="radio" name="type" id="cash" value="CASH"/>CASH<br />
<input type="radio" name="type" id="card" value="CARD"/>CARD<br />
<input type="radio" name="type" id="netbank" value="NETBANKING"/>NETBANKING<br />
<input type="radio" name="type" id="paypal" value="PAYPAL"/>PAYPAL<br />
<input type="radio" name="Payment" id="cash" value="CASH"/>CASH<br />
<input type="radio" name="Payment" id="card" value="CARD"/>CARD<br />
<input type="radio" name="Payment" id="netbank" value="NETBANKING"/>NETBANKING<br />
<input type="radio" name="Payment" id="paypal" value="PAYPAL"/>PAYPAL<br />
Use this, i have changed the Name to "Payment".
Name should be same
For radio button working properly, You must have name property common for all radio buttons
<input type="radio" name="payment" id="cash" value="CASH"/>CASH<br />
<input type="radio" name="payment" id="card" value="CARD"/>CARD<br />
<input type="radio" name="payment" id="netbank" value="NETBANKING"/>NETBANKING<br />
<input type="radio" name="payment" id="paypal" value="PAYPAL"/>PAYPAL<br />
DEMO : https://jsfiddle.net/md2o2m6x/
If you want to allow the user to be able to select more than 1 box, use the input type checkbox, but the name attribute must be the same.
<input type="radio" name="cash" id="cash" value="CASH"/>CASH<br />
<input type="radio" name="cash" id="card" value="CARD"/>CARD<br />
<input type="radio" name="cash" id="netbank" value="NETBANKING"/>NETBANKING<br />
<input type="radio" name="cash" id="paypal" value="PAYPAL"/>PAYPAL<br />
If you want the user to select only one box, use the input type radio, but the name attribute must be the same to make it work properly
CASH
CARD
NETBANKING
PAYPAL
I'm busy making a small comment system. I want users to be able to give ratings, besides giving comments, and right now i'm storing these rating values (that come from radio buttons) in the database. However, when I try to populate radio buttons with rating values for each comment from the database, the following script only checks the radio button that corresponds to the last value in the database.
<?php
$sql = mysql_query("SELECT * FROM comments WHERE id_post = '$id_post'") or die(mysql_error());;
while($affcom = mysql_fetch_assoc($sql)){
$name = $affcom['name'];
$email = $affcom['email'];
$comment = $affcom['comment'];
$rating = $affcom['rating'];
$date = $affcom['date'];
// Get gravatar Image
// https://fr.gravatar.com/site/implement/images/php/
$default = "mm";
$size = 35;
$grav_url = "http://www.gravatar.com/avatar/".md5(strtolower(trim($email)))."?d=".$default."&s=".$size;
?>
<div class="cmt-cnt">
<img src="<?php echo $grav_url; ?>" />
<div class="thecom">
<h5><?php echo $name; ?></h5><span data-utime="1371248446" class="com-dt"><?php echo $date; ?></span>
<br/>
<p>
<?php echo $comment; ?>
</p>
<p>
<input type="radio" name="hoi" value="1" <?php echo ($rating=='1')?'checked':'' ?> />
<input type="radio" name="hoi" value="2" <?php echo ($rating=='2')?'checked':'' ?> />
<input type="radio" name="hoi" value="3" <?php echo ($rating=='3')?'checked':'' ?> />
<input type="radio" name="hoi" value="4" <?php echo ($rating=='4')?'checked':'' ?> />
<input type="radio" name="hoi" value="5" <?php echo ($rating=='5')?'checked':'' ?> />
</p>
</div>
</div><!-- end "cmt-cnt" -->
<?php } ?>
This is an image of what it looks like right now:
Can someone tell me how to check all of the boxes (based on database values)?
I don't understand your question properly???
If you want to check the radio buttons according to ratting you can use in this way:
<form>
<p>
<input type="radio" name="hoi1" value="1" checked />
<input type="radio" name="hoi2" value="2" />
<input type="radio" name="hoi3" value="3" />
<input type="radio" name="hoi4" value="4" />
<input type="radio" name="hoi5" value="5" />
<input type="radio" name="hoi6" value="5" />
</p>
</form>
<form>
<p>
<input type="radio" name="hoi1" value="1" checked />
<input type="radio" name="hoi2" value="2" checked />
<input type="radio" name="hoi3" value="3" />
<input type="radio" name="hoi4" value="4" />
<input type="radio" name="hoi5" value="5" />
<input type="radio" name="hoi6" value="5" />
</p>
</form>
<form>
<p>
<input type="radio" name="hoi1" value="1" checked />
<input type="radio" name="hoi2" value="2" checked />
<input type="radio" name="hoi3" value="3" checked />
<input type="radio" name="hoi4" value="4" />
<input type="radio" name="hoi5" value="5" />
<input type="radio" name="hoi6" value="5" />
</p>
</form>
<form>
<p>
<input type="radio" name="hoi1" value="1" checked />
<input type="radio" name="hoi2" value="2" checked />
<input type="radio" name="hoi3" value="3" checked />
<input type="radio" name="hoi4" value="4" checked />
<input type="radio" name="hoi5" value="5" />
<input type="radio" name="hoi6" value="5" />
</p>
</form>
<form>
<p>
<input type="radio" name="hoi1" value="1" checked />
<input type="radio" name="hoi2" value="2" checked />
<input type="radio" name="hoi3" value="3" checked />
<input type="radio" name="hoi4" value="4" checked />
<input type="radio" name="hoi5" value="5" checked />
<input type="radio" name="hoi6" value="5" />
</p>
</form>
<form>
<p>
<input type="radio" name="hoi1" value="1" checked />
<input type="radio" name="hoi2" value="2" checked />
<input type="radio" name="hoi3" value="3" checked />
<input type="radio" name="hoi4" value="4" checked />
<input type="radio" name="hoi5" value="5" checked />
<input type="radio" name="hoi6" value="5" checked />
</p>
</form>
Use different names for the tags. And you can put them inside the form tag.
Never mind, fixed it. The name was the problem. It should be unique for every set of radio buttons ;). Tnx for your help Dineth
I have created these radio buttons.
They work perfectly in Firefox, but they're not clickable in Chrome.
Here's the code:
<input type="radio" name="rating" value="1" id="radio_btn">1</input>
<input type="radio" name="rating" value="2" id="radio_btn">2</input>
<input type="radio" name="rating" value="3" id="radio_btn">3</input>
<input type="radio" name="rating" value="4" id="radio_btn">4</input>
<input type="radio" name="rating" value="5" id="radio_btn">5</input>
<input type="hidden" name="item_id" value="1" /><br/>
<input style = "margin-left:88px;margin-top:10px;" type="submit" id="sub_rating" value="Vote" />
This is the CSS:
#radio_btn {
margin-left : 3%;
margin-right : 3%;
}
As noted above, all IDs on a page must be unique.
It is better to use a class for applying styles too.
You should do something like this :
<input type="radio" name="rating" value="1" id="radio_btn1" class="radio_btn">1</input>
<input type="radio" name="rating" value="2" id="radio_btn2" class="radio_btn">2</input>
<input type="radio" name="rating" value="3" id="radio_btn3" class="radio_btn">3</input>
<input type="radio" name="rating" value="4" id="radio_btn4" class="radio_btn">4</input>
<input type="radio" name="rating" value="5" id="radio_btn5" class="radio_btn">5</input>
You'll also need to change your CSS rule to this:
.radio_btn {
margin-left : 3%;
margin-right : 3%;
}
you must for first delete </input> then change id they must not be the same and you delete the style of the submit button.
for the css you write the css code using your <form> id like this
<form id="youID">
<input type="radio" name="rating" value="1" id="radio_btn_1">1
<input type="radio" name="rating" value="2" id="radio_btn_2">2
<input type="radio" name="rating" value="3" id="radio_btn_3">3
<input type="radio" name="rating" value="4" id="radio_btn_4">4
<input type="radio" name="rating" value="5" id="radio_btn_5">5
<input type="hidden" name="item_id" value="1" /><br/>
<input type="submit" id="sub_rating" value="Vote" />
</form>
CSS
#youID input[type="radio"] {
margin-left : 3%;
margin-right : 3%;
}
#youID input[type="submit"] {
margin-left:88px;
margin-top:10px;
}
The below HTML code i have allows multiple selection of radio button ? How do i limit it so that only one can be chooses at a time from the list
<fieldset data-role="controlgroup">
<legend></legend>
<label for="Arrived/Left">Arrived/Left Destination</label>
<input type="radio" name="Arrived/Left" id="Arrived/Left" value="Arrived/Left">
<label for="Delayed">Delayed</label>
<input type="radio" name="Delayed" id="Delayed" value="Delayed">
<label for="Canceled">Canceled</label>
<input type="radio" name="Canceled" id="Canceled" value="Canceled">
<label for="getupdate">Post to Get Update ?</label>
<input type="radio" name="getupdate" id="getupdate" value="getupdate">
<label for="Other">Other</label>
<input type="radio" name="Other" id="Other" value="Other">
</fieldset>
First this is not jQuery.. this is HTML..
Second you can do that by giving all the radio buttons of the same group (where you want only one to be selected) the same name..
<fieldset data-role="controlgroup">
<legend></legend>
<label for="Arrived/Left">Arrived/Left Destination</label>
<input type="radio" name="status" id="Arrived/Left" value="Arrived/Left">
<label for="Delayed">Delayed</label>
<input type="radio" name="status" id="Delayed" value="Delayed">
<label for="Canceled">Canceled</label>
<input type="radio" name="status" id="Canceled" value="Canceled">
<label for="getupdate">Post to Get Update ?</label>
<input type="radio" name="status" id="getupdate" value="getupdate">
<label for="Other">Other</label>
<input type="radio" name="status" id="Other" value="Other">
</fieldset>
use name attribute to group your radio button
<fieldset data-role="controlgroup">
<legend></legend>
<label for="Arrived/Left">Arrived/Left Destination</label>
<input type="radio" name="status" id="Arrived/Left" value="Arrived/Left">
<label for="Delayed">Delayed</label>
<input type="radio" name="status" id="Delayed" value="Delayed">
<label for="Canceled">Canceled</label>
<input type="radio" name="status" id="Canceled" value="Canceled">
<label for="getupdate">Post to Get Update ?</label>
<input type="radio" name="status" id="getupdate" value="getupdate">
<label for="Other">Other</label>
<input type="radio" name="status" id="Other" value="Other">
</fieldset>
You define radio button groups with the name property (radio buttons with the same name belong to the same group).
You are having a different name for each of your radio. Change the names of all the input radio to a single name. The radios having the same name will behave as a single group which is what your requirement.
*You haven't closed the input tags.
Hope this helps.
It seems simple, but this has been a bit of a headscratcher for me. Given the following (valid xhtml transitional) code:
<form action="weird.html">
<label for="test1">T1</label>
<input type="radio" id="test1" name="test" value="1" />
<label for="test2">T2</label>
<input type="radio" id="test2" name="test" value="2" />
<label for="test3">T3</label>
<input type="radio" id="test3" name="test" value="3" />
<label for="test4">T4</label>
<input type="radio" id="test4" name="test" value="4" />
<label for="test5">T5</label>
<input type="radio" id="test5" name="test" value="5" />
</form>
Why is it that I can't tab between radio buttons? This issue seems to be because they all have the same name attribute, but that seems rather counter-intuitive to me as far as accesbility goes. Why does the focus state only get applied to one? Is this because the group is treated as a single element? Are access keys the only non-Javascript solution here?
You actually use the arrow keys to move within the radio buttons because as you said, they are treated as a single element. This is normal behavior.
As James and Tatu said that is normal, I don't know if you have used "TABINDEX", it might work.
<input type="radio" id="test5" name="test" value="5" tabindex="5" />
But as they are treated as single element it might not work.
Yes, each radio button group is treated as one form element - if you want to skip between the group elements then use the arrow keys. It does make sense; if you're tabbing through a long form with a group of 10 radio buttons halfway down, you'd get annoyed if you had to tab through all 10 radio options before moving to the next form item.
If they're not in the same group, then you can tab between them. In the example below, T5 will gain separate tab focus to the rest:
<form action="weird.html">
<label for="test1">T1</label>
<input type="radio" id="test1" name="test" value="1" />
<label for="test2">T2</label>
<input type="radio" id="test2" name="test" value="2" />
<label for="test3">T3</label>
<input type="radio" id="test3" name="test" value="3" />
<label for="test4">T4</label>
<input type="radio" id="test4" name="test" value="4" />
<label for="test5">T5</label>
<input type="radio" id="test5" name="test2" value="5" />
</form>