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 10 of 10
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    Lincoln (UK)
    Posts
    138
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Unhappy if... else... problem

    Rather basic question but can anyone tell me what is wrong with this script:

    Code:
    <input type="checkbox" name="webspace" value="true" onClick="if(document.form2.webspace.value =='true') {ftpaddress.disabled = false} else {ftpaddress.disabled = true}">
    basically I need some text boxes to be disabled unless the checkbox is checked, problem above is that if the checkbox is un-checked then the textbox is still available.

    I know it's probably simple, but only if you know how

    Many thanks

  • #2
    New Coder
    Join Date
    Jun 2002
    Location
    London & Oxford
    Posts
    97
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi there

    The reason your code doesn't work is that you are testing if the value of the checkbox is true. This will always be the case. Insted you need to check the checked property of the checkbox.

    Might be a good idea to put all the code into a function too:

    <html>
    <head>
    <script language="javascript" type="text/javascript">
    <!--
    function checkIt(f){
    if(f.webspace.checked){
    f.ftpaddress.disabled=false;
    }
    else{
    f.ftpaddress.disabled=true;
    }
    }
    //-->
    </script>
    </head>
    <body>

    <form>
    <input type="checkbox" name="webspace" value="true" onClick="checkIt(this.form)" /><br />
    <input type="text" name ="ftpaddress" disabled="disabled" />
    </form>

    </body>

    </html>
    As easy as 3.1415926535897932384626433832795028841

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    Lincoln (UK)
    Posts
    138
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Many thanks,
    That worked a treat

    Q: I will need this to effect some other text fields and perform the same function in another area of the form. is it possible to reuse this kind of function? or do I need to write a function for each instance?

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    Lincoln (UK)
    Posts
    138
    Thanks
    3
    Thanked 0 Times in 0 Posts
    OK, stupid question... well half of it.
    I now have two itterations of this function, (two checkboxes enableing/disabling two different sets of text boxes) I guess it would be nice to only have one, but not really essential.

    Many thanks for your help

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I guess incorporating the name of the checkbox (which is now hardcoded as "webspace") as a param, in the function (additions in bold):
    Code:
    function checkIt(mybox,f){ 
    if(f.mybox.checked){ 
    f.ftpaddress.disabled=false; 
    } 
    else{ 
    f.ftpaddress.disabled=true; 
    } 
    } 
    
    ...
    
    <input type="checkbox" name="webspace" value="true"
       onClick="checkIt("webspace",this.form)" /><br />
    ...
    Would that work?
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    Lincoln (UK)
    Posts
    138
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Wouldn't I still need to double up the functions?
    This is what is happening at the moment:
    Code:
    <script language="javascript" type="text/javascript"> 
    <!-- 
    function checkIt(f){ 
    if(f.webspace.checked){ 
    f.ftpaddress.disabled=false;f.ftpusername.disabled=false;f.ftppassword.disabled=false; 
    } 
    else{ 
    f.ftpaddress.disabled=true;f.ftpusername.disabled=true;f.ftppassword.disabled=true; 
    } 
    } 
    
    function checkIt2(f){ 
    if(f.email.checked){ 
    f.pop3address.disabled=false;f.smtpaddress.disabled=false; 
    } 
    else{ 
    f.pop3address.disabled=true;f.smtpaddress.disabled=true 
    } 
    } 
    //--> 
    </script>
    the rest looks like this:
    Code:
    <form name="form2" method="post" action="ia_new2.asp">
                  <table border="0" cellspacing="0" cellpadding="0" class="kb_table" align="center" width="400">
                    <tr bgcolor="#CCCCCC" align="center"> 
                      <td colspan="2">Main Account Details</td>
                    </tr>
                    <tr> 
                      <td width="115" align="right">Domain Name:&nbsp;</td>
                      <td> 
                        <input type="text" name="domain" class="search" style="width:251">
                      </td>
                    </tr>
                    <tr> 
                      <td width="115" align="right">&nbsp;</td>
                      <td>&nbsp;</td>
                    </tr>
                    <tr> 
                      <td width="115" align="right">Web Space?&nbsp;</td>
                      <td> 
                        <input type="checkbox" name="webspace" value="true" onClick="checkIt(this.form)">
                        (not secure)</td>
                    </tr>
                    <tr> 
                      <td width="115" align="right">FTP Address:&nbsp;</td>
                      <td> 
                        <input type="text" name="ftpaddress" class="search" style="width:251" value="ftp." DISABLED>
                      </td>
                    </tr>
                    <tr> 
                      <td width="115" align="right">FTP Username:&nbsp;</td>
                      <td> 
                        <input type="text" name="ftpusername" class="search" style="width:251" DISABLED>
                      </td>
                    </tr>
                    <tr> 
                      <td width="115" align="right">FTP Password:&nbsp;</td>
                      <td> 
                        <input type="text" name="ftppassword" class="search" style="width:251" DISABLED>
                      </td>
                    </tr>
                    <tr> 
                      <td width="115" align="right">&nbsp;</td>
                      <td>&nbsp;</td>
                    </tr>
                    <tr> 
                      <td width="115" align="right">E-mail?&nbsp;</td>
                      <td> 
                        <input type="checkbox" name="email" value="True" onClick="checkIt2(this.form)">
                      </td>
                    </tr>
                    <tr> 
                      <td width="115" align="right">POP3 Address:&nbsp;</td>
                      <td> 
                        <input type="text" name="pop3address" class="search" style="width:251" value="post." DISABLED>
                      </td>
                    </tr>
                    <tr> 
                      <td width="115" align="right">SMTP Address:&nbsp;</td>
                      <td> 
                        <input type="text" name="smtpaddress" class="search" style="width:251" value="mail." DISABLED>
                      </td>
                    </tr>
                    <tr align="center"> 
                      <td colspan="2">
                        <input type="submit" name="Submit" value="submit main account details" class="search">
                      </td>
                    </tr>
                  </table>
                </form>
    I'm afraid I'm not exactly the king of JavaScript, but going by you logic, I'd need to have all the form elements as parameters...
    Is this correct?
    'fraid I don't know the correct syntax etc. that should be used...

    Any ideas?
    Well as I said, it's working, but, if anyone has any input?

  • #7
    New Coder
    Join Date
    Jun 2002
    Location
    London & Oxford
    Posts
    97
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's a way of doing it where both checkboxes call the same function. You will need to change the onclick handler for each checkbox so that it says:

    onclick="checkIt(this.form,this)"

    Then change the script to this:

    <script language="javascript" type="text/javascript">
    <!--
    function checkIt(f,box){

    if(box.name=="webspace"){
    if(f.webspace.checked)
    s=false;
    else
    s=true;
    f.ftpaddress.disabled=s;
    f.ftpusername.disabled=s;
    f.ftppassword.disabled=s;
    }

    else if(box.name=="email"){
    if(f.email.checked)
    s=false;
    else
    s=true;
    }
    f.pop3address.disabled=s;
    f.smtpaddress.disabled=s;

    }
    //-->
    </script>

    You will notice that you still need to examine which of the checkboxes was ticked and then do the disabling accordingly.
    As easy as 3.1415926535897932384626433832795028841

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Location
    Lincoln (UK)
    Posts
    138
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Some weird stuff going on there;
    Check the first box and both areas become available/unavailable.
    Check the second and only the second works its magic.

    Just a thought, but would it be possible for the checkbox name to be passed up to the function? Then there would only need to be one section to the function.

    thought... all this discussion for a few lines of code

  • #9
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Planet Earth Code Poet: True
    Posts
    282
    Thanks
    0
    Thanked 1 Time in 1 Post
    Check this out:

    Code:
    <script type="text.javascript">
    function checkIt(toCheck,toEnable){
      a=toEnable.split(",");
      for(i=0;i<a.length;i++) document.form2[a[i]].disabled=!document.form2[toCheck].checked;
    }
    </script>
    
    
    <form name="form2" method="post" action="ia_new2.asp">
                  <table border="0" cellspacing="0" cellpadding="0" class="kb_table" align="center" width="400">
                    <tr bgcolor="#CCCCCC" align="center"> 
                      <td colspan="2">Main Account Details</td>
                    </tr>
                    <tr> 
                      <td width="115" align="right">Domain Name: </td>
                      <td> 
                        <input type="text" name="domain" class="search" style="width:251">
                      </td>
                    </tr>
                    <tr> 
                      <td width="115" align="right"> </td>
                      <td> </td>
                    </tr>
                    <tr> 
                      <td width="115" align="right">Web Space? </td>
                      <td> 
                        <input type="checkbox" 
                        name="webspace" value="true" 
                        onClick="checkIt('webspace','ftpaddress,ftpusername,ftppassword')">NOTE: make sure this line does not break in real life!
                        (not secure)</td>
                    </tr>
                    <tr> 
                      <td width="115" align="right">FTP Address: </td>
                      <td> 
                        <input type="text" name="ftpaddress" class="search" style="width:251" value="ftp." DISABLED>
                      </td>
                    </tr>
                    <tr> 
                      <td width="115" align="right">FTP Username: </td>
                      <td> 
                        <input type="text" name="ftpusername" class="search" style="width:251" DISABLED>
                      </td>
                    </tr>
                    <tr> 
                      <td width="115" align="right">FTP Password: </td>
                      <td> 
                        <input type="text" name="ftppassword" class="search" style="width:251" DISABLED>
                      </td>
                    </tr>
                    <tr> 
                      <td width="115" align="right"> </td>
                      <td> </td>
                    </tr>
                    <tr> 
                      <td width="115" align="right">E-mail? </td>
                      <td> 
                        <input type="checkbox" name="email" value="True"
                        onClick="checkIt('email','pop3address,smtpaddress')">
                      </td>
                    </tr>
                    <tr> 
                      <td width="115" align="right">POP3 Address: </td>
                      <td> 
                        <input type="text" name="pop3address" class="search" style="width:251" value="post." DISABLED>
                      </td>
                    </tr>
                    <tr> 
                      <td width="115" align="right">SMTP Address: </td>
                      <td> 
                        <input type="text" name="smtpaddress" class="search" style="width:251" value="mail." DISABLED>
                      </td>
                    </tr>
                    <tr align="center"> 
                      <td colspan="2">
                        <input type="submit" name="Submit" value="submit main account details" class="search">
                      </td>
                    </tr>
                  </table>
                </form>
    You pass in the name of the checkbox used to determine if the fields are enabled or not then a comma separted list of the fields that are afected by the check box.
    Last edited by JohnKrutsch; 06-18-2002 at 04:46 PM.

  • #10
    Regular Coder
    Join Date
    Jun 2002
    Location
    Lincoln (UK)
    Posts
    138
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Very cool

    Thanks John, works a treat


  •  

    Posting Permissions

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