Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Jun 2010
    Posts
    30
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Exclamation onChange event - textbox to enable radio buttons

    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.

  • #2
    Regular Coder Jazzo's Avatar
    Join Date
    Apr 2008
    Location
    New York City
    Posts
    164
    Thanks
    20
    Thanked 2 Times in 2 Posts
    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.

    Code:
    var i;
    for (i = 0; i < 9; i += 1) {
      document.getElementById('t' + i).onfocus = function () {
        document.getElementById('r' + i).enabled = true.
      }
    }
    ~Julian
    14 y/o web developer, drummer, and Bridge player

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,147
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    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:-

    Code:
    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.
    Last edited by Philip M; 06-22-2010 at 04:32 PM. Reason: typo

  • #4
    New Coder
    Join Date
    Jun 2010
    Posts
    30
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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?

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,147
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    Show your code.

  • #6
    New Coder
    Join Date
    Jun 2010
    Posts
    30
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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!

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,147
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    Quote Originally Posted by EmmaC View Post
    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:-

    Code:
    <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>
    Last edited by Philip M; 06-23-2010 at 12:15 PM.

  • #8
    New Coder
    Join Date
    Jun 2010
    Posts
    30
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

    Code:
    <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.

    Code:
    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">

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,147
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    Is this what you are wanting?

    Code:
    <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>
    Last edited by Philip M; 06-23-2010 at 05:14 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •