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
    Apr 2005
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Enable/Disable 4 different sections of a form.

    Ok I have layed it out all for you, nice and easy to understand.

    It's quite simple really, when you select one of the radio buttons, the two tick boxes beneath will enable, and make sure the rest are disabled.

    So for example, I select Overseas Delegate (in the yellow box), underneath, the Delegate and Accompanying Persons checkbox's will enable, allowing me to tick them, and at the same time, will make sure the other checkboxes in the form are disabled.

    And again, if I select Local Delegate (red box), underneath, the Delegate and Accompanying Persons checkbox will enable, allowing me to tick them, and at the same time make sure the other checkboxes in the form are disabled.

    I can get the yellow box working, but when I select the green box, it enables the blue and red aswell, I don't want it to do that! So I am assuming that the script I have only allows for 2 options, not 4.

    Can anyone enlighten me?


    The Script:

    Code:
    <script>
    function disableEntries(oRad){
      var oFrm = oRad.form;
    
    //get the disabled state based on the value of the checked radio button
      var state = (oRad.value=="1") ? false : true;
      
      //option 1 fields
      oFrm.Del1.disabled = state;
      oFrm.AccPer1.disabled = state;
     
      //option 2 fields
      oFrm.Del2.disabled = !state;
      oFrm.AccPer2.disabled = !state;
      
      //option 3 fields
      oFrm.Del3.disabled = !state;
      oFrm.AccPer3.disabled = !state;
      
      //option 4 fields
      oFrm.Del4.disabled = !state;
      oFrm.AccPer4.disabled = !state;
      
    }
    </script>
    The Form Image:


    The Form Code:
    Code:
    <td colspan="3" class=NormalText><span class="SubTitle">Registration Type</span></td>
                </tr>
                <tr bgcolor="#C81015">
                  <td colspan="3" class=NormalText><div align="center"><font color="#FFFFFF"><strong><font size="3">EARLY BIRD RATES </font><br>
                          <em>Register and pay by 31 August 2005 </em></strong></font></div><div align="center">
                      <label for="opt1"></label>
                    </div></td>
                  </tr>
                <tr bgcolor="#496874">
                  <td colspan="3" class=NormalText><div align="center"><font color="#FFFFFF">please select overseas or local delegate to enable your choices. </font></div></td>
                  </tr>
                <tr bgcolor="#496874">
                  <td class=NormalText><div align="center"></div></td>
                  <td class=NormalText><div align="center"><strong><font color="#FFFFFF">
                    <label for="opt1">OVERSEAS DELEGATE</label>
                    <br>
                    <input type="radio" name="Selection" id="opt1" onclick="disableEntries(this);" value="1">
                    <br>
                    </font></strong></div></td>
                  <td class=NormalText><div align="center"><font color="#FFFFFF"><strong>
                    <label for="opt2">LOCAL DELEGATE ** with 5% GST</label>
    				<br>
    				<input type="radio" name="Selection" id="opt2" onclick="disableEntries(this);" value="2">
                    <br>
                    </strong></font></div></td>
                </tr>
                <tr bgcolor="#E5E5E5">
                  <td class=NormalText><strong>Delegate</strong></td>
                  <td class=NormalText><input name="Del1" id="opt1" type="checkbox" value="Early Bird - Overseas - Delegate" disabled>
                    <br>
                    USD 1,000<br>
                    SGD 1,700</td>
                  <td class=NormalText><input name="Del2" id="opt2" type="checkbox" value="Early Bird - Local - Delegate" disabled>
                    <br>
                    USD 1,050<br>
                    SGD 1,785.50 </td>
                </tr>
                <tr bgcolor="#E5E5E5">
                  <td class=NormalText><strong>Accompanying Person </strong></td>
                  <td class=NormalText><input name="AccPer1" id="opt1" type="checkbox" value="Early Bird - Overseas Accompanying - Person" disabled>
                    <br>
                    USD 550<br>
                    SGD 935 </td>
                  <td class=NormalText><input name="AccPer2" id="opt2" type="checkbox" value="Early Bird - Local - Accompanying Person" disabled>
                    <br>
                    USD 577.50 <br>
                    SGD 981.75</td>
                </tr>
                <tr bgcolor="#E5E5E5">
                  <td class=SubTitle>Number of<br>
        Accompanying Persons: </td>
                  <td colspan="2" class=NormalText><input name="NoAcc" type="text" id="NoAcc" size="5" maxlength="5"></td>
                  </tr>
                <tr bgcolor="#496874">
                  <td colspan="3" class=NormalText><div align="center"></div></td>
                </tr>
                <tr bgcolor="#C81015">
                  <td colspan="3" class=NormalText><div align="center"><strong><font color="#FFFFFF" size="3">REGULAR RATES</font><font color="#FFFFFF"><br>
                          <em>Register and pay after 31 August 2005 </em></font></strong></div>                <div align="center">
                    </div></td>
                  </tr>
                <tr bgcolor="#496874">
                  <td colspan="3" class=NormalText><div align="center"><font color="#FFFFFF">please select overseas or local delegate to enable your choices. </font></div></td>
                  </tr>
                <tr bgcolor="#496874">
                  <td class=NormalText><div align="center"><strong></strong></div></td>
                  <td class=NormalText><div align="center"><strong><font color="#FFFFFF">
                    <label for="opt3">OVERSEAS DELEGATE</label>
                    <br>
                    <input type="radio" name="Selection" id="opt3" onclick="disableEntries(this);" value="3">
                  </font></strong></div></td>
                  <td class=NormalText><div align="center"><strong><font color="#FFFFFF">
                    <label for="opt4">LOCAL DELEGATE ** with 5% GST</label>
    				<br>
    				<input type="radio" name="Selection" id="opt4" onclick="disableEntries(this);" value="4">
                  </font></strong></div></td>
                </tr>
                <tr bgcolor="#E5E5E5">
                  <td class=NormalText><strong>Delegate</strong></td>
                  <td class=NormalText><input name="Del3" id="opt3" type="checkbox" value="Regular - Overseas - Delegate" disabled>
                    <br>
                    USD 1,100<br>
                    SGD 1,870</td>
                  <td class=NormalText><input name="Del4" id="opt4" type="checkbox" value="Regular - Local - Delegate" disabled>
                    <font color="#51595B"><br>
                    USD 1,155</font> <br>
                    <font color="#51595B">SGD 1,963.50</font></td>
                </tr>
                <tr bgcolor="#E5E5E5">
                  <td class=NormalText><strong>Accompanying Person </strong></td>
                  <td class=NormalText><input name="AccPer3" id="opt3" type="checkbox" value="Regular - Overseas - Accompanying Person" disabled>
                    <br>
                    USD 550<br>
                    SGD 935<br> </td>
                  <td class=NormalText><input name="AccPer4" id="opt4" type="checkbox" value="Regular - Local - Accompanying Person" disabled>
                    <br>
                    <font color="#51595B">USD 577.50<br>
                    <font color="#51595B">SGD 981.75 </font>                </font></td>
                </tr>
                <tr bgcolor="#E5E5E5">
                  <td class=SubTitle>Number of<br>
        Accompanying Persons: </td>
                  <td colspan="2" class=NormalText><input name="NoAcc2" type="text" id="NoAcc2" size="5" maxlength="5" disabled></td>
                  </tr>
                <tr bgcolor="#496874">
                  <td colspan="3" class=NormalText><div align="center"></div></td>
                </tr>
                <tr bgcolor="#E5E5E5">
                  <td colspan="3" bgcolor="#FFFFFF" class=NormalText>&nbsp;</td>
                </tr>
                <tr bgcolor="#CCCCCC">
                  <td colspan="3" class=SubTitle>Registration Type</td>
                </tr>
                <tr bgcolor="#E5E5E5">
                  <td class=SubTitle>&nbsp;</td>
                  <td class=SubTitle><div align="center">Early Bird<br>
                          <span class="NormalText">(Before 31st July 2005)</span> </div></td>
                  <td class=SubTitle><div align="center">Standard<br>
                          <span class="NormalText">(on and after 31st July 2005)</span> </div></td>
                </tr>
                <tr bgcolor="#E5E5E5">
                  <td class=SubTitle>Delegate</td>
                  <td class=NormalText><div align="left">
                      <input name="Delegate" type="radio" id="Delegate" value="Early Bird">
                      <span class="NormalText">USD 1,000</span></div></td>
                  <td class=NormalText><div align="left">
                      <input name="Delegate" type="radio" id="Delegate" value="Standard">
                      <span class="NormalText">USD 1,100</span></div></td>
                </tr>
                <tr bgcolor="#E5E5E5">
                  <td class=SubTitle>Accompanying Person </td>
                  <td class=NormalText><div align="left">
                      <input name="AccPer" type="radio" value="Early Bird">
                      <span class="NormalText">USD 550</span></div></td>
                  <td class=NormalText><div align="left">
                      <input name="AccPer" type="radio" value="Standard">
                      <span class="NormalText">USD 550</span> </div></td>
                </tr>
                <tr bgcolor="#E5E5E5">
                  <td class=SubTitle>Number of Delegates: </td>
                  <td class=NormalText><input name="NoDel" type="text" id="NoDel" size="5" maxlength="5"></td>
                  <td class=NormalText>&nbsp;</td>
                </tr>
                <tr bgcolor="#E5E5E5">
                  <td class=SubTitle>Number of<br>
          Accompanying Persons: </td>
                  <td class=NormalText><input name="NoAcc" type="text" id="NoAcc" size="5" maxlength="5"></td>
                  <td class=NormalText>&nbsp;</td>
                </tr>

  • #2
    New Coder
    Join Date
    Apr 2005
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'll just simplify the form code a bit more:

    The Yellow Box:
    Code:
    //this radio enables the two options: Delegate and Accompanying Person in its column
    <label for="opt1">OVERSEAS DELEGATE</label>
    <input type="radio" name="Selection" id="opt1" onclick="disableEntries(this);" value="1">
    
    //Delegate is enabled when Overseas Delegate is ticked.
    <td class=NormalText><input name="Del1" id="opt1" type="checkbox" value="Early Bird - Overseas - Delegate" disabled>
    
    //Accompanying Person is enabled when Overseas Delegate is ticked aswell.
    <td class=NormalText><input name="AccPer1" id="opt1" type="checkbox" value="Early Bird - Overseas Accompanying - Person" disabled>

  • #3
    New Coder
    Join Date
    Apr 2005
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, finally, I found out what was happening.

    The tiny and almost invisible "!" infront of "state" in the script code is what this is all about.

    edit: just did a bit of research, found out what the "!" is for; so I am guessing this is just a two-way thing?

    What can I do to solve this problem?
    Last edited by Icedan; 08-16-2005 at 08:26 AM.

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Code:
    <html>
    <head>
    
    <script>
    
    function disableEntries(obj,Ena,Dis){
     f=obj.form;
     if (obj.checked){
      for (zxc0=0;zxc0<Ena.length;zxc0++){
       f.elements[Ena[zxc0]].removeAttribute('disabled');
      }
       for (zxc0=0;zxc0<Dis.length;zxc0++){
        f.elements[Dis[zxc0]].setAttribute('disabled','disabled');
       }
     }
     else {
      for (zxc0=0;zxc0<Ena.length;zxc0++){
       f.elements[Ena[zxc0]].setAttribute('disabled','disabled');
      }
       for (zxc0=0;zxc0<Dis.length;zxc0++){
        f.elements[Dis[zxc0]].removeAttribute('disabled');
       }
      }
    }
    
    </script>
    
    
    </head>
    <body );">
    
    
    
    
    //this radio enables the two options: Delegate and Accompanying Person in its column
    <form>
    <label for="opt1">OVERSEAS DELEGATE</label>
    <br>
    <input type="radio" name="Selection" id="opt1" onclick="disableEntries(this,[3,4],[5,6]);" value="1"> Yes<br>
    <input type="radio" name="Selection" id="opt1" onclick="disableEntries(this,[5,6],[3,4]);" value="1"> No 
    <br>
    or use a CheckBox<br>
    <input type="checkbox" name="Selection" id="opt1" onclick="disableEntries(this,[3,4],[6,5]);" value="1"> Yes/No<br>
    <br>
    //Delegate is enabled when Overseas Delegate is ticked.
    <input name="Del1" id="opt1" type="checkbox" value="Early Bird - Overseas - Delegate"  disabled="disabled">
    <br>
    //Accompanying Person is enabled when Overseas Delegate is ticked aswell.
    <input name="AccPer1" id="opt1" type="checkbox" value="Early Bird - Overseas Accompanying - Person" disabled="disabled" >
    <br>
    <br>
    
    //Delegate is enabled when Overseas Delegate is ticked.
    <input name="Del1" id="opt1" type="checkbox" value="Early Bird - Overseas - Delegate" >
    <br>
    //Accompanying Person is enabled when Overseas Delegate is ticked aswell.
    <input name="AccPer1" id="opt1" type="checkbox" value="Early Bird - Overseas Accompanying - Person" >
    <br>
    </form
    </body>

  • #5
    New Coder
    Join Date
    Apr 2005
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Your script flies over my head.

    I can't quite figure out how to make it work for all 4 options.

    I will try tho

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    each element in a form has a numbers related to its position in the form starting from o

    script I posed refers to these numbers in the call parameters

    parameter 1 enable
    parameter 2 disenable

    There are nany ways of achiving your requirement
    see

    http://www.vicsjavascripts.org.uk/Fo...Compendium.htm

    for other solutions

  • #7
    New Coder
    Join Date
    Apr 2005
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the help man.

    The link you gave is not working, server might be down, will check it out another time.

  • #8
    New Coder
    Join Date
    Apr 2005
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, I give up, I just don't have enough experience to fix this problem on time.

    The job has to be done by tomorrow, so if anyone can give me a complete working code, I will be much appreciated.

    thanks..

  • #9
    New Coder
    Join Date
    Apr 2005
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Can it be done in asp?

    Why isn't this simple to do?

    Why can't it just be

    if checkbox "option2" = true then
    checkbox option 1 = false
    checkbox option 3 = false
    checkbox option 4 = false

    else if checkbox "option 3 = true then
    checkbox option 1 = false
    checkbox option 2 = false
    checkbox option 4 = false

    etc

    If it can be done that way, then I would prefer to just do it like that (however it is done), since I can at least make sense of it, rather than try to learn a language of obscurity.


  •  

    Posting Permissions

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