Link to home
Start Free TrialLog in
Avatar of Coast Line
Coast LineFlag for Canada

asked on

radio buttons and its working with a textbox

i am using javascript to enable/disable radio buttons on the basis if i enter value in textfield, it enables the radio buttons working fine..

but i am using four fields which are all dependednt upon the textbox, so here is my code!


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;
	formName.elements[i].checked = true;
	formName.elements[i].value = "";
	}
}
}
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;
formName.elements[i].value = "";
}
}
}
}

<input type="text" name="cal" id="cal" 
onchange = "disableGroup(this, this.form, 'ar');">

<input type="radio" name="ar" id="ar1" disabled=true>Yes&nbsp;
<input type="radio" name="ar" id="ar2" disabled=true>No

but it works for only one set of radio buttons, if i have multiple fields, how i change this script to work

Please guide

Open in new window

Avatar of darren-w-
darren-w-
Flag of United Kingdom of Great Britain and Northern Ireland image

using some jquery her hope this is fine:
<html>
    <head>
        <title>test</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

        <style type="text/css">

        </style>

        <script type="text/javascript" src="preload.js"></script>

        <script type='text/javascript'>
            $(function(){
                $('input[type="text"]').change(function(){
                    if( $(this).val() == '') {
                        console.log("dis");
                        $('input[name="ar"]').attr('disabled','true');
                    }
                    else{
                            console.log("notdis");
                        $('input[name="ar"]').attr('disabled','');
                    }
                })
            })

        </script>
    </head>
    <body>

        <input type="text" name="cal" id="cal">

        <input type="radio" name="ar" id="ar1" disabled=true>Yes&nbsp;
        <input type="radio" name="ar" id="ar2" disabled=true>No
    </body>
</html>

Open in new window

I've taken the preload.js line out as its not relevant, and tidied a little

<html>
    <head>
        <title>test</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <style type="text/css">
        </style>
        <script type='text/javascript'>
            $(function(){
                $('input[type="text"]').change(function(){
                    if( $(this).val() == '') {
                        $('input[name="ar"]').attr('disabled','true');
                    }
                    else{
                        $('input[name="ar"]').attr('disabled','');
                    }
                })
            })

        </script>
    </head>
    <body>
        <input type="text" name="cal" id="cal">

        <input type="radio" name="ar" id="ar1" disabled=true>Yes&nbsp;
        <input type="radio" name="ar" id="ar2" disabled=true>No
    </body>
</html>

Open in new window

Avatar of Coast Line

ASKER

Ok, I do not know what are you trying to do here, i tried jquery before as it was not working, my question is the above may be fine and may work for one set of radio button, but what if i have 3 set of radio buttons with yes/no values and one textarea

then what my approch will be..

and on the clearence of textbox value, it should clear all values from the radio buttons and the textarea..

the current code mine is working the way it is but it is working for one set of radio button and i am trying to make it work by using in moe than 3 or 4 sets of radio buttons

ok,

Have annotated text, have added textarea as mentioned on para 3 above, I clear checked values/disable buttons/clear text from textarea and text content when top text box is empty.
<html>
   <head>
      <title>test</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
      <style type="text/css">
      </style>
      <script type='text/javascript'>
         $(function(){
            $('input[type="text"]').keyup(function(){ //when a keyup is detected in the text box
               if( $(this).val() == '') { //if the text box is empty
                  //disable the radio buttons in the div, and  clear their checked status, cleat textarea
                  $('#agroup  input[type="radio"]').attr('disabled','true').attr('checked','');
                  $('#agroup  input[type="text"]').val("").attr('disabled','true'); //.val("") clears content of textarea and
                  $('#agroup  textarea').val("").attr('disabled','true')
               }
               else{ // remove the disabled states
                  $('#agroup  input[type="radio"]').attr('disabled','');
                  $('#agroup  input[type="text"]').attr('disabled','')
                  $('#agroup  textarea').attr('disabled','')
               }
            })
         })

      </script>
   </head>
   <body>
      <input type="text" name="cal" id="cal">
      <div id ="agroup">
         <input type="text" name="testtext" id="testtext" disabled=true><br />
         <input type="radio" name="ar" id="ar1" disabled=true>Yes&nbsp;
         <input type="radio" name="ar" id="ar2" disabled=true>No&nbsp;&nbsp;

         <input type="radio" name="ar1" id="ar1" disabled=true>Yes&nbsp;
         <input type="radio" name="ar1" id="ar2" disabled=true>No&nbsp;&nbsp;

         <input type="radio" name="ar2" id="ar1" disabled=true>Yes&nbsp;
         <input type="radio" name="ar2" id="ar2" disabled=true>No&nbsp;&nbsp;

         <input type="radio" name="ar3" id="ar1" disabled=true>Yes&nbsp;
         <input type="radio" name="ar3" id="ar2" disabled=true>No&nbsp;&nbsp;

         <input type="radio" name="ar4" id="ar1" disabled=true>Yes&nbsp;
         <input type="radio" name="ar4" id="ar2" disabled=true>No&nbsp;&nbsp;

         <input type="radio" name="ar5" id="ar1" disabled=true>Yes&nbsp;
         <input type="radio" name="ar5" id="ar2" disabled=true>No&nbsp;&nbsp;<br />
         <textarea rows="2" cols="20" disabled=true>
         </textarea>
      </div>
   </body>
</html>

Open in new window



Darren
ok i will check in the morninf and update you on this! if i am getting expected results!
i tried using it in a table, and it stopped working, please check!

<table align="center" width="100%">
   <form method="post" action="test.html">
   <tr><td colspan="4">
      <input type="text" name="cal" id="cal">
   </td></tr>  
      <div id ="agroup">
   <tr><td>  
         <!--<input type="text" name="testtext" id="testtext" disabled=true><br />-->
         <input type="radio" name="ar" id="ar1" disabled=true>Yes&nbsp;
         <input type="radio" name="ar" id="ar2" disabled=true>No&nbsp;&nbsp;
      </td>
    <td>
         <input type="radio" name="ar1" id="ar1" disabled=true>Yes&nbsp;
         <input type="radio" name="ar1" id="ar2" disabled=true>No&nbsp;&nbsp;
      </td>
    <td>
         <textarea rows="2" cols="20" disabled=true>
         </textarea>
    </td>
    </tr>      
      </div>
    </form>
    </table>  
ASKER CERTIFIED SOLUTION
Avatar of darren-w-
darren-w-
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanks