Web Analytics Made Easy - StatCounter Disabling/enabling fields depening on radio button selected.. - CodingForum

Announcement

Collapse
No announcement yet.

Disabling/enabling fields depening on radio button selected..

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Disabling/enabling fields depening on radio button selected..

    What I wanna do is when u click a radio button for it to open certain fields up for editing & if u choose another radio button then the fields associated to the radio buttons that are not clicked become "disabled" or "grayed out".

    Like here is some sample code..

    PHP Code:
    // First Option
    <input type="radio" name="method" value="all">Option #1</td>

    // If radio button above is selected then this select field is "opened up"; otherwise it is disabled
    <select size='1' name='id[143]'>
    <    option value='1'>blah</option>
    </    select>

    // Option #2
    <input type="radio" name="method" value="individual">Option #2:</tr>

    // Same deal as above; however the amount of select fields shown below this radio button is dynamic

    <select size='1' name='id[450]'>
    <    option value='1'>blah</option>
    </    select>

    <    select size='1' name='id[451]'>
    <    option value='1'>blah</option>
    </    select>

    <    select size='1' name='id[452]'>
    <    option value='1'>blah</option>
    </    select> 
    Thanks very much for any help with this!

    Cheers!
    Last edited by cyphix; Jul 29, 2005, 09:46 AM.
    Tags: None
  • #2
    been playing with this was for select list and visiblity modified for Radio and disabled

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title></title>
<script language="JavaScript" type="text/javascript">
<!--

// by Vic Phillips http://www.vicsjavascripts.org.uk

// elements in the form are numbered from the top 0 to ......
// The select option value specifies the element numbers to disable separated by '^'

function Select(f,s){
 el=f.elements;
 for (i=0;i<el.length;i++){
//  el[i].style.visibility='visible';
  el[i].removeAttribute('disabled');
 }
 if (s.selectedIndex<1){ return; }
 selop=s.options[s.selectedIndex].value.split('^');
 for (i=0;i<selop.length;i++){
  if (el[selop[i]]){
//   el[selop[i]].style.visibility='hidden';
   el[selop[i]].setAttribute('disabled','disabled');
  }
 }
}

function Radio(f,s){
 el=f.elements;
 for (i=0;i<el.length;i++){
//  el[i].style.visibility='visible';
  el[i].removeAttribute('disabled');
 }
 if (s.selectedIndex<1){ return; }
 selop=s.value.split('^');
 for (i=0;i<selop.length;i++){
  if (el[selop[i]]){
//   el[selop[i]].style.visibility='hidden';
   el[selop[i]].setAttribute('disabled','disabled');
  }
 }
}

//-->
</script></head>

<body>
<form >
<select name="" size="1" onchange="Select(this.form,this);">
<option value=" ">Select</option>
<option value="1">Hide TB1</option>
<option value="1^3">Hide TB1 & 3</option>
<option value="2^3^4">Hide TB2,3,4</option>
<option value="">Hide None</option>
</select>
<input name="" size="10" value="123">
<input name="" size="10" value="234">
<input name="" size="10" value="345">
<input name="" size="10" value="456">
<input type="radio" name="fred" value="1" onclick="Radio(this.form,this);">
<input type="radio" name="fred" value="1^3" onclick="Radio(this.form,this);">
<input type="radio" name="fred" value="2^3^4" onclick="Radio(this.form,this);">
<input type="radio" name="fred" value="" onclick="Radio(this.form,this);"><br>

</form>
</body>

</html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

    Comment

    • #3
      Thanks.... for the most part I get how it works in your example but can't figure out how to apply it to my code.

      Comment

      • #4
        I'll do one for your form
        Last edited by vwphillips; Jul 29, 2005, 02:52 PM.
        Vic

        God Loves You and will never love you less.

        http://www.vicsjavascripts.org/Home.htm

        If my post has been useful please donate to http://www.operationsmile.org.uk/

        Comment

        • #5
          Ok cool.... thx!

          Comment

          • #6
            you are using radio buttons so presume you want the groups toggled

            Code:
            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title></title>
<script language="JavaScript" type="text/javascript">
<!--
// by Vic Phillips (29-07-2005) http://www.vicsjavascripts.org.uk


function zxcInitGroups(){
 zxcg=zxcInitGroups.arguments;
 for (zxc0=0;zxc0<zxcg.length;zxc0++){
  zxcgg=document.getElementById(zxcg[zxc0]);
  zxcgg.ary=zxcgg.getElementsByTagName('SELECT');
 }
}

function zxcD(){
 zxcg=zxcD.arguments;
 zxcg1=document.getElementById(zxcg[1]).ary;
 zxcg2=document.getElementById(zxcg[2]).ary;
 if (zxcg[0].checked){
  for (zxc0=0;zxc0<zxcg1.length;zxc0++){
   zxcg1[zxc0].removeAttribute('disabled')
  }
  for (zxc1=0;zxc1<zxcg2.length;zxc1++){
   zxcg2[zxc1].setAttribute('disabled','disabled')
  }
 }
 else {
  for (zxc2=0;zxc2<zxcg2.length;zxc2++){
   zxcg2[zxc2].removeAttribute('disabled')
  }
  for (zxc3=0;zxc3<zxcg1.length;zxc3++){
   zxcg1[zxc3].setAttribute('disabled','disabled')
  }
 }
}

//-->
</script>

</head>

<body onload="zxcInitGroups('group1','group2')">
<form>
 // First Option <br>
<input type="radio" name="method" value="1" onclick="zxcD(this,'group1','group2');" >Option #1 Disable<br>
<br>
// If radio button above is selected then this select field is "opened up"; otherwise it is disabled<br>
<span id="group1">
<select size='1' name='id[143]'  disabled="disabled" >
<option value='1'>blah</option>
</select>
</span>
<br>
// Option #2<br>

<input type="radio" name="method" value="individual" checked='checked'  onclick="zxcD(this,'group2','group1');" >Option #2:</tr>

// Same deal as above; however the amount of select fields shown below this radio button is dynamic
<span id="group2">
<select size='1' name='id[450]'>
<option value='1'>blah</option>
</select>

<select size='1' name='id[451]'>
<option value='1'>blah</option>
</select>

<select size='1' name='id[452]' >
<option value='1'>blah</option>
</select>
</span>

</form>
</body>

</html>
            if not you will need checkboxes and the code changed
            Vic

            God Loves You and will never love you less.

            http://www.vicsjavascripts.org/Home.htm

            If my post has been useful please donate to http://www.operationsmile.org.uk/

            Comment

            • #7
              Thanks mate..... that works awesome!! I really appreictae it!

              One thing tho.... when the page loads all the select fields are still changeable no matter what radio button is checked by default; they only take affect if you actually click one of the radio buttons yourself. Hmmmmm..

              Comment

              • #8
                match the radio check state with the initial disabled state of the selects

                and or on dynamicall adding a select match all group selects with the disabled state of the first select of the group or the state of the controlling radio buttons
                Vic

                God Loves You and will never love you less.

                http://www.vicsjavascripts.org/Home.htm

                If my post has been useful please donate to http://www.operationsmile.org.uk/

                Comment

                • #9
                  That went way over my head lol..

                  Comment

                  • #10
                    ok this will initialise the selects according to the initial radio button states

                    plus when you add or delete a select you will need to recall zxcInitGroups('group1','group2'); to ammend the recorded selects and set the current disabled state for the new selects

                    Code:
                    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title></title>
<script language="JavaScript" type="text/javascript">
<!--
// by Vic Phillips (29-07-2005) http://www.vicsjavascripts.org.uk


function zxcInitGroups(){
 zxcg=zxcInitGroups.arguments;
 for (zxc0=0;zxc0<zxcg.length;zxc0++){
  zxcgg=document.getElementById(zxcg[zxc0]);
  zxcgg.ary=zxcgg.getElementsByTagName('SELECT');
 }
 zxcD(document.getElementById('R1'),'group1','group2');
}

function zxcD(){
 zxcg=zxcD.arguments;
 zxcg1=document.getElementById(zxcg[1]).ary;
 zxcg2=document.getElementById(zxcg[2]).ary;
 if (zxcg[0].checked){
  for (zxc0=0;zxc0<zxcg1.length;zxc0++){
   zxcg1[zxc0].removeAttribute('disabled')
  }
  for (zxc1=0;zxc1<zxcg2.length;zxc1++){
   zxcg2[zxc1].setAttribute('disabled','disabled')
  }
 }
 else {
  for (zxc2=0;zxc2<zxcg2.length;zxc2++){
   zxcg2[zxc2].removeAttribute('disabled')
  }
  for (zxc3=0;zxc3<zxcg1.length;zxc3++){
   zxcg1[zxc3].setAttribute('disabled','disabled')
  }
 }
}

//-->
</script>

</head>

<body onload="zxcInitGroups('group1','group2');">
<form>
 // First Option <br>
<input id="R1" type="radio" name="method" value="1" onclick="zxcD(this,'group1','group2');" >Option #1 Disable<br>
<br>
// If radio button above is selected then this select field is "opened up"; otherwise it is disabled<br>
<span id="group1">
<select size='1' name='id[143]' >
<option value='1'>blah</option>
</select>
</span>
<br>
// Option #2<br>

<input id="R2" type="radio" name="method" value="individual" checked='checked'  onclick="zxcD(this,'group2','group1');" >Option #2:</tr>

// Same deal as above; however the amount of select fields shown below this radio button is dynamic
<span id="group2">
<select size='1' name='id[450]'>
<option value='1'>blah</option>
</select>

<select size='1' name='id[451]'>
<option value='1'>blah</option>
</select>

<select size='1' name='id[452]' >
<option value='1'>blah</option>
</select>
</span>

</form>
</body>

</html>
                    Vic

                    God Loves You and will never love you less.

                    http://www.vicsjavascripts.org/Home.htm

                    If my post has been useful please donate to http://www.operationsmile.org.uk/

                    Comment

                    • #11
                      Thank you! Works like a charm!

                      Comment

                      • #12
                        hi,

                        This is almost perfect for my application... although I would like to include a text box too. I have tried a few different things on this line:

                        zxcgg.ary=zxcgg.getElementsByTagName('SELECT');

                        but have been unsuccessful. Any help would be greatly appreciated. Thanks!

                        here's my code...


                        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                        "http://www.w3.org/TR/html4/loose.dtd">

                        <html>

                        <head>
                        <title></title>
                        <script language="JavaScript" type="text/javascript">
                        <!--
                        // by Vic Phillips (29-07-2005) http://www.vicsjavascripts.org.uk


                        function zxcInitGroups(){
                        zxcg=zxcInitGroups.arguments;
                        for (zxc0=0;zxc0<zxcg.length;zxc0++){
                        zxcgg=document.getElementById(zxcg[zxc0]);
                        zxcgg.ary=zxcgg.getElementsByTagName('SELECT','TEXT');
                        }
                        zxcD(document.getElementById('R1'),'group1','group2','group3');
                        }

                        function zxcD(){
                        zxcg=zxcD.arguments;
                        zxcg1=document.getElementById(zxcg[1]).ary;
                        zxcg2=document.getElementById(zxcg[2]).ary;
                        if (zxcg[0].checked){
                        for (zxc0=0;zxc0<zxcg1.length;zxc0++){
                        zxcg1[zxc0].removeAttribute('disabled')
                        }
                        for (zxc1=0;zxc1<zxcg2.length;zxc1++){
                        zxcg2[zxc1].setAttribute('disabled','disabled')
                        }
                        }
                        else {
                        for (zxc2=0;zxc2<zxcg2.length;zxc2++){
                        zxcg2[zxc2].removeAttribute('disabled')
                        }
                        for (zxc3=0;zxc3<zxcg1.length;zxc3++){
                        zxcg1[zxc3].setAttribute('disabled','disabled')
                        }
                        }
                        }

                        //-->
                        </script>

                        </head>

                        <body onload="zxcInitGroups('group1','group2','group3');">
                        <form>
                        // First Option <br>
                        <input id="R1" type="radio" name="method" value="1" onclick="zxcD(this,'group1','group2','group3');" >Option #1 Disable<br>

                        // If radio button above is selected then this select field is "opened up"; otherwise it is disabled
                        <span id="group1">
                        <select size='1' name='id[143]' >
                        <option value='1'>blah</option>
                        </select>
                        </span>
                        <br><br>
                        // Option #2<br>

                        <input id="R2" type="radio" name="method" value="individual" checked='checked' onclick="zxcD(this,'group2','group1','group3');" >Option #2:

                        // Same deal as above; however the amount of select fields shown below this radio button is dynamic
                        <span id="group2">
                        <select size='1' name='id[450]'>
                        <option value='1'>blah</option>
                        </select>
                        </span>
                        <br><br>
                        //and a text box??<br>
                        <input id="R3" type="radio" name="method" value="individual" onclick="zxcD(this,'group3','group1','group2');" >Option #3:
                        <span id="group3">
                        <input id="3" type="text" name="id[457]">
                        </span>
                        </form>
                        </body>

                        </html>

                        Comment

                        Previous template Next
                        Working...
                        X