Search jQuery

jQuery Forum

Using jQuery

stompweb

Handling if radio buttons are selected.

in Using jQuery • 11 years ago

Hello,

I'm a just wondering about something that might be quite simple but I'm not sure how to achieve it.

<form>
<input type="radio" id="car" name="car" value="Ford" /> Choose
<input type="radio" id="car" name="car" value="Volvo" /> Choose
<input type="radio" id="bus" name="bus" value="smallbus" /> Choose
<input type="radio" id="bus" name="bus" value="bigbus" /> Choose
</form>

That's the code for my form. Two radio boxes one called car and one called bus. I'm not so much bothered about the contents of what is selected, just that if car or bus (or both) is selected.

I have two buttons:

<button id="car">Car</button>
<button id="bus">Bus</button>

If I choose a car such as Ford, I want the car one to be changed to

<button id="car" class="done">Car</button>

I also want the submit button to be 'greyed out' until both of them have been submitted which looks like this.

<button id="submit" type="submit">Submit</button>

Can anybody help, I would be most grateful.

Cheers,
Steve

Replies(3)

jakecigar

Re: Handling if radio buttons are selected.

11 years ago

First of all IDs have to be unique. Second, buttons beg to be pressed, your buttons have no purpose as buttons. I removed most of the IDs and changed the bogus buttons to SPANs.

I suggest you start with valid HTML, then add jQuery and CSS to make it work.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function(){
$('input').change(function(){
var car=$('input[name="car"]:checked').val()
,bus=$('input[name="bus"]:checked').val()
,submit=$('button[type="submit"]')
if (car)
$('#car').addClass('selected')
else
$('#car').removeClass('selected')
if (bus)
$('#bus').addClass('selected')
else
$('#bus').removeClass('selected')
if (car && bus)
submit.removeAttr('disabled')
else
submit.attr('disabled','disabled')
}).eq(0).trigger('change')
})
</script>
<style type="text/css">
.selected
{
color: gray;
text-decoration: none;
}
fieldset span
{
text-decoration: underline;
font-weight: bold;
}
fieldset
{
border: none;
}
fieldset label
{
padding-right: 4px;
width: 60px;
display: inline-block;
}
</style>
<title>Cars</title>
</head>
<body>
<form>
<fieldset>
<label><input type="radio" name="car" value="Ford" /> Ford </label>
<label><input type="radio" name="car" value="Volvo" /> Volvo </label>
<span id="car">pick a car</span>
</fieldset>
<fieldset>
<label><input type="radio" name="bus" value="smallbus" /> small </label>
<label><input type="radio" name="bus" value="bigbus" /> big </label>
<span id="bus">
pick bus size
</span>
</fieldset>
<button type="submit">
Submit
</button>
</form>
</body>
</html>

JΛ̊KE

jakecigar

Re: Re: Handling if radio buttons are selected.

11 years ago

Some additional points to point out.

<label> tags have the magic ability to extend the clickability of the radio button to the entire label. Always use labels. It could also help a blind person use the site, as screen reader browsers can speak them aloud.

<fieldset> tags are a nice semantic way of grouping <input> tags. But they put a border on around them, which needs to be removed in the CSS.

<button> tags should do something when pressed. Don’t use buttons that don’t do something, as it may confuse users.

The code is written as unobtrusive JavaScript. Which means the page would work almost as well without JavaScript turned on. Good for older browsers, and silly people who disable JavaScript.

The page I wrote was validated with http://validator.w3.org/ which is a nice way to prove you are using tags properly.

Hope this helps!

JΛ̊KE

dsvick

Re: Handling if radio buttons are selected.

11 years ago

EDIT --- I type slow ... while I was doing that Jake posted a much more complete solution. I'll this here as an example of another way to do it....

Hi Steve

A couple of things you should fix about your elements before you can get any code to work. The ID attribute should be unique within the entire document. So you should not have two radio buttons and a regular button all with the same ID. The easiest fix would be to change the radio buttons to car1, car2, bus1, and bus2.

Now for some code:

To react when one of the radio buttons is checked you need to bind the click event for them and then write some code to determine which one so you can set the class of the appropriate button. Here is some code that will do that for you:

$("input[type='radio']").click(function(){
$("#" + $(this).attr("name")).addClass("done");
});

This means that whenever a radio button is clicked the line of code in the callback function is run. It extracts the name of the radio button and uses that to set the class of appropriate button.

After that is done you need to see if both sets of buttons have had a selection made, you can do that by finding out how many buttons with a specific name have been checked, like this:

$("input[name='bus']:checked").length

Finally, you want your submit button to not function until both sets of radio buttons have had a selection made. You can disable an element by setting its disabled attribute to true:

$("#submit").attr("disabled", true);

So the complete code, within the ready handler, would look like this:

$("#submit").attr("disabled", true);

$("input[type='radio']").click(function(){
      $("#" + $(this).attr("name")).addClass("done");
      if ($("input[name='bus']:checked").length > 0 && $("input[name='bus']:checked").length > 0) {
            $("#submit").attr("disabled", false);
      }
});

Hope that helps

Dave

Top Reply

Response title

Attachments

jQuery Forum

Handling if radio buttons are selected.

Replies(3)

Re: Handling if radio buttons are selected.

Re: Re: Handling if radio buttons are selected.

Re: Handling if radio buttons are selected.

Statistics

Tags

Actions