textbox disabled if another radio button selected

Razzy · 07-06-2012, 11:26 AM

hey people, im not sure whether i have posted this on the right place because im not sure whether this problem will be solved through javascript or html, but i have this small problem...i have four radio buttons, with each radio button linked with a textbox. initially all four textbox should be disabled until one of the radio button is selected. The textbox that is linked to the radio button should be enabled. however if another radio button is selected, then the textbox that is already enabled should be disabled again, and the textbox to which the newly selected radio button should be enabled

would really appreciate it if someone could help

i have made a start on it.the coding is as follows....

Code:

<input type="radio"  name="test"  onclick="chickFill1.disabled=false"/>in KG:	<input type="text" id="chickFill1" size="2" value="" disabled="disabled"/>
    <br/>
    <br/>
    <input type="radio" name="test" onclick="chickFill2.disabled=false"/>in lbs:	<input type="text" id="chickFill2" size="2" value="" disabled="disabled"/>
     <br/>
    <br/>
    <input type="radio" name="test" onclick="chickFill3.disabled=false"/>in money:	£<input type="text" id="chickFill3" size="4" value="00.00" disabled="disabled"/>
     <br/>
    <br/>
    <input type="radio" name="test" onclick="chickFill4.disabled=false"/>quantity:	<input type="text" id="chickFill4" size="2" value="" disabled="disabled"/>

thank you

Philip M · 07-06-2012, 12:31 PM

Code:

<html>
<head>
</head>
<body>
<form>
<input type="radio"  name="test"  onclick="displ(1)"/>in KG:	<input type="text" name = "chickFill1"  id="chickFill1" size="2" value="" disabled="disabled"/>
    <br/>
    <br/>
    <input type="radio" name="test" onclick="displ(2)"/>in lbs:	<input type="text" name = "chickFill2" id="chickFill2" size="2" value="" disabled="disabled"/>
     <br/>
    <br/>
    <input type="radio" name="test" onclick="displ(3)"/>in money:	£<input type="text" name = "chickFill3" id="chickFill3" size="4" value = "00.00" disabled="disabled"/>
     <br/>
    <br/>
    <input type="radio" name="test" onclick="displ(4)"/>quantity:	<input type="text" name = "chickFill4" id="chickFill4" size="2" value="" disabled="disabled"/>
</form>

<script type = "text/javascript">

function displ (which) {
var len = document.forms[0].test.length;  // how many radio buttons in group?
for (var i =1; i<=len; i++) {  // for all the textboxes
document.forms[0]["chickFill" + i].value = "";  // clear the field
document.forms[0]["chickFill" + i].disabled = true; // disable the textbox
}
document.forms[0]["chickFill" + which].disabled = false;  // enable selected textbox
}

</script>

</body>
</html>

test is not a very good name for a group of radio buttons.

Illiterate? Write today for free help. - Government leaflet.

Razzy · 07-06-2012, 05:04 PM

hey phillips, thank you for the coding, however i tested the codes that you gave, and for some reason the textboxes do not change at all, it stays disabled

Philip M · 07-06-2012, 06:37 PM

Quote:

Originally Posted by Razzy

hey phillips, thank you for the coding, however i tested the codes that you gave, and for some reason the textboxes do not change at all, it stays disabled

It works fine for me

Check you have copied the code correctly.

Razzy · 07-07-2012, 05:49 PM

it perfectly works fine now, when i first tested it, i put the javascript coding in between the HEAD section, but this time i literally copied and pasted the whole thing, and it perfectly worked, thank you very much phillips