Using in-line javascript to change the value of a radio button

Question

I have a form with two radio buttons. One button id'd as 'trigger_unit', the other as 'normal_unit'. There is also a select drop down with four values and a default NULL value.

<select rel="dropdown" name="trigger_id" id="trigger_id" 
onchange="((this.value != '') ? document.getElementById('trigger_unit').checked=true : 
document.getElementById('normal_unit').checked=true;)" style="width: 120px;">
<option value="" selected="selected">--none--</option>
<option value="1">Critical</option>
<option value="2">Draw</option>
<option value="4">Heal</option>
<option value="3">Stand</option>
</select>

What's supposed to happen is the javascript is supposed to change the value of the radio button if there is a non-blank value from the drop down. I tried to follow the in-line IF example here but it's not exactly working. Can this be done or do I HAVE to write a second function?

score 3 · Answer 1 · answered Nov 13 '12 at 14:10

There's a shorter bit of javascript that would work for your onchange handler :

document.getElementById(this.value != '' ? 'trigger_unit' : 'normal_unit').checked=true;

i.e.

<select rel="dropdown" name="trigger_id" id="trigger_id" 
    onchange="document.getElementById(
            this.value != '' ? 'trigger_unit' : 'normal_unit'
        ).checked=true;" 
        style="width: 120px;">
    <option value="" selected="selected">--none--</option>
    <option value="1">Critical</option>
    <option value="2">Draw</option>
    <option value="4">Heal</option>
    <option value="3">Stand</option>
</select>

score 2 · Accepted Answer · answered Nov 13 '12 at 14:07

Looks like you have an errant ; in your code...

This fiddle works: http://jsfiddle.net/bxLfu/

The code is the same as yours, but without the ;:

<select rel="dropdown" name="trigger_id" id="trigger_id" 
onchange="((this.value != '') ? document.getElementById('trigger_unit').checked=true : 
document.getElementById('normal_unit').checked=true)" style="width: 120px;">
<option value="" selected="selected">--none--</option>
<option value="1">Critical</option>
<option value="2">Draw</option>
<option value="4">Heal</option>
<option value="3">Stand</option>
</select>

score 2 · Answer 3 · answered Nov 13 '12 at 14:07

In the ternary condition above, the end semi-colon before closing braxket would give a syntax error :

((this.value != '') ? document.getElementById('trigger_unit').checked=true : 
document.getElementById('normal_unit').checked=true;)

Change it to :

(this.value != '') ? document.getElementById('trigger_unit').checked=true : 
document.getElementById('normal_unit').checked=true;

Have a look at the fiddle

Using in-line javascript to change the value of a radio button

3 Answers3