CODEWITHSUNDEEP
javascripthtml
ziz194
ziz194

Reputation: 312

Disable radio button according to selected choice

I want to disable some radio button in a html form according to selected choices, if he select the first choice in the first radio button group the 2 choices in the second radio button group will be enabled, if not they will be disabled, here's my code:

<script language="javascript">
function RadioMeuble() {
    if (document.f.radio1[0].checked) {
        alert("Vous avez choisi la proposition " + document.f.radio1[0].value);
        document.f.radio2[0].disabled = false;
        document.f.radio2[1].disabled = false;
    } else {
        document.f.radio2[0].disabled = true;
        document.f.radio2[1].disabled = true;
    }
}
}
</script>
<input type="radio" name="radio1" value="L" id="radio1" onBlur="RadioMeuble()">á louer</label>
<br>
<label>
    <input type="radio" name="radio1" value="V" id="radio1">á vendre</label>
</p>
<p>Superficie
    <label for="textfield"></label>
    <input type="text" name="superficie" id="Superficie">en Km ²</p>
<p>Prix
    <label for="textfield2"></label>
    <input type="text" name="prix" id="Prix">en DT</p>
<p>Meublé
    <input type="radio" name="radio2" id="radio2" value="oui" disabled>Oui
    <input type="radio" name="radio2" id="radio2" value="non" disabled>
    <label for="radio2"></label>
    <label for="radio"></label>Non</p>

It doesn't work. What's wrong with it?

Upvotes: 0

Views: 5302

Answers (3)

lmcanavals
lmcanavals

Reputation: 2386

You could improve your coding a little, check this example:

<input type="radio" id="r1-1" name="r1" value="1">
<label for="r1-1">Option 1</label>
<input type="radio" id="r1-2" name="r1" value="2">
<label for="r1-2">Option 2</label>
<hr />
<input type="radio" id="r2-1" name="r2" value="a">
<label for="r2-1">Option A</label>
<input type="radio" id="r2-2" name="r2" value="b">
<label for="r2-2">Option B</label>

and

function byId(id) {
    return document.getElementById(id);
}

window.onload = function() {
    byId('r1-1').onchange = byId('r1-2').onchange = function() {
        byId('r2-1').disabled = byId('r2-2').disabled = byId('r1-1').checked;
    }
}

Running example at: http://jsfiddle.net/5Mp9m/

It wouldn't be a bad idea to use a javascript library like Jquery.

Upvotes: 0

hennson
hennson

Reputation: 811

There's a "}" too much in your code (last one).

Don't use the onblur EventHandler. You should use onchange or onclick instead.

<input type="radio" name="radio1" value="L" id="radio1" onchange="RadioMeuble()">

or

<input type="radio" name="radio1" value="L" id="radio1" onclick="RadioMeuble()">

HTH,

--hennson

Upvotes: 2

aquinas
aquinas

Reputation: 23796

Well, first of all, you have an extra "}" Second, you probably want the click event instead of the blur event. And you want it on both radio buttons. Next what is document.f? That's not a variable. Next, even if it were, I'm not aware of a browser that lets you use form elements like you are trying to. E.g., document.f.radio2[0].disabled. Also, your radio button should have unique ID names.

See: http://jsfiddle.net/vzYT3/1/ for something more sensible.

Upvotes: 1

Related Questions