...

View Full Version : onChange event - textbox to enable radio buttons



EmmaC
06-22-2010, 03:23 PM
Hi,
I have a form consisting of nine text fields (labelled 1-9) and nine radio buttons for each of the text fields. I want to enable the radio buttons when text is entered into the field corresponding to that particular radio button. Is there a way of achieving this using a JavaScript onChange event?

Thank you in advance.

Jazzo
06-22-2010, 03:34 PM
You could use onfocus which would activate when the user clicks on the textbox. Try this. Give all the radio buttons ids of r0 - r8, set them disabled="disabled", then t0 - t8 for the corresponding textboxes.



var i;
for (i = 0; i < 9; i += 1) {
document.getElementById('t' + i).onfocus = function () {
document.getElementById('r' + i).enabled = true.
}
}

Philip M
06-22-2010, 03:58 PM
Why are you using radio buttons which normally implies a group only one of which may be checked at a time?

Jazzo - if the user focuses on the textbox but enters nothing or a space the radio is still enabled. And remains enabled if the user then deletes his text.

Try this:-


Enter Text <input type = "text" id = "t1" onchange = "cboxEnable(this)">
<input type = "checkbox" id = "c1" disabled= "true"><br>
Enter Text <input type = "text" id = "t2" onchange = "cboxEnable(this)">
<input type = "checkbox" id = "c2" disabled= "true">

<script type = "text/javascript">
function cboxEnable(which) {
var val = which.value;
val = val.replace(/^\s+|\s+$/g,""); // strip leading and trailing spaces
which.value = val; // write amended val back to text field
var ID = which.id;
ID = "c" + ID.substring(1,2); // change t1 to c1 etc.
if (val.length > 2) { // at least three characters entered
document.getElementById(ID).disabled = false;
}
else {
document.getElementById(ID).disabled = true;
}
}

</script>


BTW, the time to say "thanks" is afterwards, not beforehand which gives the - doubtless unintended - impression that you take other people's voluntary unpaid assistance and expertise for granted. Or as British politician Neil Kinnock put it, "Don't belch before you have had the meal." Prefer to use "please" beforehand and if you find a response helpful then you can use the "Thank User For This Post" button.

EmmaC
06-23-2010, 10:31 AM
Thank you very much for you quick responses, really appreciate it!

I tried the code you recommended Phillip except used radio buttons instead as only one selection can be made once a set of radio buttons are enabled. The radio button is disabled but is not enabled when text is entered into the field. Could you please help if you have any idea why this may be happening?

Philip M
06-23-2010, 11:05 AM
Show your code.

EmmaC
06-23-2010, 11:16 AM
I have it working now thank you, took me a while but got there in the end, was the id's I had used. However, a problem I have is if I go back and delete the text in the field the radio button is still enabled, is there a way of preventing this, if you could please let me know. Thank you for your help getting this to work it has been driving me crazy for days!

Philip M
06-23-2010, 12:02 PM
I have it working now thank you, took me a while but got there in the end, was the id's I had used. However, a problem I have is if I go back and delete the text in the field the radio button is still enabled, is there a way of preventing this, if you could please let me know. Thank you for your help getting this to work it has been driving me crazy for days!

As I am not clairvoyant I cannot possibly help you with your code unless you show it. Here is a script which meets your needs and which you can adapt:-


<script type = "text/javascript">
function disableGroup(which, formName, groupName) {
var val = which.value;
val = val.replace(/^\s+|\s+$/g,""); // strip leading and trailing spaces
which.value = val; // write amended val back to text field

if (val.length > 2) { // at least three characters entered
for (var i=0; i<formName.elements.length; i++) {
if (formName.elements[i].name == groupName) {
formName.elements[i].disabled = false;
}
}
}
else {
for (var i=0; i<formName.elements.length; i++) {
if (formName.elements[i].name == groupName) {
formName.elements[i].disabled = true;
formName.elements[i].checked = false;
}
}
}

}
</script>

<form name = "myform">
Enter text <input type = "text" name = "t1" onchange = "disableGroup(this, this.form, 'grp1')">
<input type="radio" name="grp1" disabled = true>
<input type="radio" name="grp1" disabled = true>
<input type="radio" name="grp1" disabled = true>
<input type="radio" name="grp1" disabled = true>
<input type="radio" name="grp1" disabled = true>
<input type="radio" name="grp1" disabled = true>
<br><br>
Enter text <input type = "text" name = "t2" onchange = "disableGroup(this, this.form, 'grp2')">
<input type="radio" name="grp2" disabled = true>
<input type="radio" name="grp2" disabled = true>
<input type="radio" name="grp2" disabled = true>
<input type="radio" name="grp2" disabled = true>
<input type="radio" name="grp2" disabled = true>
<input type="radio" name="grp2" disabled = true>
</form>

EmmaC
06-23-2010, 02:06 PM
Thank you for the code.
This is my code. I have 9 options (a-i) and when text is entered into one of the option text boxes the radio button associated with it should be enabled, otherwise disabled (no text in the text box). So, I have 9 text boxes and 9 radio buttons.




<script type="text/javascript">


function radioEnable(which) {
var val = which.value;
val = val.replace(/^\s+|\s+$/g,"");
which.value = val;
var ID = which.id;
ID = "r" + ID.substring(1,2,3,4,5,6,7,8,9);
if (val.length < 2) {
document.getElementByID(ID).disabled = true;
}
else {
document.getElementById(ID).disabled = false;
}
}

</script>


I have this code for each of the text boxes and radio buttons.




Option A:
<input type="text" name="option_a" size="50" id="t1" onChange="radioEnable(this)">
<Input type = "radio" name="answer" value= 'a' id= "r1" disabled="true">

Philip M
06-23-2010, 03:51 PM
Is this what you are wanting?


<form name = "myform">
Enter Text <input type = "text" id = "t1" onchange = "radioButtonEnable(this, 'rad1')">
<input type = "radio" name = "grp1" id = "rad1" disabled= "true"><br>
Enter Text <input type = "text" id = "t2" onchange = "radioButtonEnable(this, 'rad2' )">
<input type = "radio" name = "grp1" id = "rad2" disabled= "true"><br>
Enter Text <input type = "text" id = "t3" onchange = "radioButtonEnable(this, 'rad3' )">
<input type = "radio" name = "grp1" id = "rad3" disabled= "true"><br>

</form>

<script type = "text/javascript">
function radioButtonEnable(which, ID) {
var val = which.value;
val = val.replace(/^\s+|\s+$/g,""); // strip leading and trailing spaces
which.value = val; // write amended val back to text field
if (val.length > 2) { // at least three characters entered
document.getElementById(ID).disabled = false;
}
else {
document.getElementById(ID).disabled = true;
document.getElementById(ID).checked = false;
}
}

</script>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum