PDA

View Full Version : How to make a text box enabled when radio button is selected - please help



jennypretty
Mar 15th, 2007, 08:18 PM
Hello,

I am a newbie with Javascript. I have this question. I have created a form with 3 radio buttons, (male, female, other), whenever a user click on other, I like to have the text box enabled (it is disbled by default, greyed out).

<input type="radio" name="gender" id="m" value="male" />Male
<input type="radio" name="gender" id="f" value="female" />female
<input type="radio" name="gender" id="other" value="Other" />Other
<input type="text" size="20" maxlength="50" name="Othertxt" disabled="disabled" id="other" />

Is there any way to do it in JS???

Big thanks.

Jenny.

glenngv
Mar 15th, 2007, 08:56 PM
function enableDisableTxt(isDisabled){
var other = document.getElementById("otherTxt");
other.disabled = isDisabled;
if (!isDisabled) other.focus();
}
...
<input type="radio" name="gender" id="m" value="male" onclick="enableDisableTxt(true);" />Male
<input type="radio" name="gender" id="f" value="female" onclick="enableDisableTxt(true);" />female
<input type="radio" name="gender" id="other" value="Other" onclick="enableDisableTxt(false);" />Other
<input type="text" size="20" maxlength="50" name="Othertxt" disabled="disabled" id="otherTxt" />

jennypretty
Mar 15th, 2007, 09:17 PM
Thanks. In stead of using the function, I 've placed directory on the input box and it worked because I have some INPUT boxes and don't want to create 4 or 5 different functions.

thanks again.

<input type="radio" name="gender" id="m" value="male" onclick="document.getElementById('Othertxt').disabled=true;">Male
<input type="radio" name="gender" id="f" value="female" onclick="document.getElementById('Othertxt').disabled=true;">female
<input type="radio" name="gender" id="other" value="Other" onclick="document.getElementById('Othertxt').disabled=false;">Other
<input type="text" size="20" maxlength="50" name="Othertxt" id="Othertxt" disabled="disabled">

glenngv
Mar 15th, 2007, 09:25 PM
If you have other sets of input fields with the same behavior, you can still have a single function, you just pass the id or whatever as a function parameter.

chump2877
Mar 15th, 2007, 09:35 PM
glen beat me to it, but here's my code that probabaly does the same thing:




<form name="form1" id="form1">
<input type="radio" name="gender" id="m" value="male" />Male
<input type="radio" name="gender" id="f" value="female" />female
<input type="radio" name="gender" id="other" value="Other" />Other
<input type="text" size="20" maxlength="50" name="Othertxt" disabled="disabled" id="other2" />
</form>

<script type="text/javascript">

function toggleTextBox(val)
{
formObj = document.form1;

if (val == "Other")
{
if (formObj.Othertxt.disabled)
formObj.Othertxt.disabled = false;
}
else
{
formObj.Othertxt.value = "";
if (formObj.Othertxt.disabled == false)
formObj.Othertxt.disabled = true;
}
}

window.onload = function()
{
inputArr = document.getElementById('form1').getElementsByTagName('input');
for (i=0; i<inputArr.length; i++)
{
if (inputArr[i].name == "gender")
{
inputArr[i].onclick = function()
{
toggleTextBox(this.value);
};
}
}
};

</script>


Edit: By the way, it's always good to attach event handlers outside of your markup (if practical), so that your JS stays separate and apart from your HTML...makes for cleaner code, that is easier to edit, and eliminates "tag soup"...

glenngv
Mar 15th, 2007, 09:50 PM
Why do you have to loop through all the input fields when you can just loop through the "gender" fields?

function toggleTextBox(radBtn)
{
radBtn.form.Othertxt.disabled = (radBtn.value=="Other") ? false : true;
}

window.onload = function()
{
var formObj = document.forms[0];
for (i=0; i<formObj.gender.length; i++)
{
formObj.gender[i].onclick = function()
{
toggleTextBox(this);
};
}
};

jennypretty
Mar 15th, 2007, 10:01 PM
thanks again.
Looks like there are different ways of doing this.
thanks.