SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict mari's Avatar
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation checkbox not working in IE

    Hi Guys,

    i have a registration form and i have added a terms and conditions checkbox on it.
    If a user trys to register without accepting terms and conditions a pop up should appear letting them know they need to check the box to continue
    This works fine in firefox
    In IE nothing happens when i click the submit button, i don't get any error, even if the checkbox is ticked still nothing happens when the submit button is pressed

    I dont have a direct link to the form but this is the code that is causing the issue

    Code:
    <script type="text/javascript">
    window.onload=function(){
    document.forms[0].onsubmit=function(){
       return checkIt();
      }
     }
    
    function checkIt() {
    if(document.getElementById('tos').checked==false) {
       alert('you need to check the "I accept terms of service" box');
       document.getElementById('tos').className='highlight'
       return false;
      }
    else {
       document.getElementById('tos').className='';
       return true;
      }
     }
    </script>
    HTML Code:
    <FORM ACTION="" NAME="CorpForm" METHOD="post">
     
          </TABLE></TD></TR></TABLE><BR><BR>
          <TABLE BORDER="0" CELLPADDING="1" CELLSPACING="0" WIDTH="100%"><TR><TD CLASS="maindarker" ALIGN="left">&nbsp;&nbsp;Login Information
          <TABLE BORDER="0" CELLPADDING="4" CELLSPACING="0" WIDTH="100%">
    <TR><TD CLASS="mainlightest" COLSPAN="2"> Please enter below a username and a password of your choice. </TD></TR>
          <TR>
            <TD CLASS="mainlightest" >Username *</TD><TD CLASS="mainlightest" ><INPUT TYPE="TEXT" NAME="username" value="USERNAME" /></TD></TR>
    
          <TR>
            <TD CLASS="mainlightest" >Password *</TD><TD CLASS="mainlightest" ><INPUT TYPE="PASSWORD" NAME="password" /></TD></TR>
    
          <TR>
            <TD CLASS="mainlightest" >Confirm Password *</TD><TD CLASS="mainlightest" ><INPUT TYPE="PASSWORD" NAME="password_confirm" /></TD></TR>
    <TR><TD>##TERMS##</TD></TR>
        </TABLE></TD></TR></TABLE>
        <INPUT TYPE="hidden" NAME="submitted" VALUE="true" />
        <input type="hidden" name="scheck" value="" />
        <P ALIGN="right"><INPUT TYPE="Image" NAME="SUBMIT" VALUE="NEXT" SRC="/images/submit.png" ALT="NEXT" /></P>
    
      </FORM>
    PHP Code:
    $terms '<form method="post" action="checkIt();">
    <input id="tos" type="checkbox"><label for="tos"> I accept terms of service</label>
    </form><br><a id="displayText" href="javascript:toggle();">click here to view terms and conditions</a>
    <div id="toggleText" style="display: none">
    <p>here are the terms and conditions</p>
    </div>'
    ;


    $content preg_replace('/##TERMS##/'$terms$content); 
    does anyone know what i am doing wrong

    any help is appreciated

    thanks

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    177 Post(s)
    Tagged
    8 Thread(s)
    Hi mari,

    As such, I can see nothing wrong with the JavaScript code you posted, except perhaps the fact that you don't need to explicitly return true from the function checkIt.

    I think what's going wrong is that you seem to be embedding a form within a form (stored as a PHP variable $terms).
    This does not look good and could well be causing unexpected behaviour.
    Also your mark-up is rather convoluted and you really shouldn't be using tables for layout purposes.

    Unfortunately, I couldn't actually reproduce your error.
    If I substituted ##TERMS## for the content of $terms, then nothing worked at all.
    If I just added a checkbox with an id of "tos" then everything worked as expected.

    So, where does this leave you?

    To give you an idea of how this should be done properly, consider the following code:


    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Form checkbox example</title>
        <style>div{margin-bottom:10px;}</style>
      </head>
      
      <body>
        <form action="myscript.php" method="post" id="myForm">
          <div>
            <label for="accountNo">Bank account number:</label>
            <input type="text" id="accountNo" name="accountNo" />
          </div>
          <div>
            <label for="terms">I accept the terms and conditions.</label>
            <input type="checkbox" id="terms" name="terms" />
          </div>
          
          <input type="submit" value="Submit" />
        </form>
        
        <script>
          f = document.getElementById("myForm");
          f.onsubmit=function(){
            if (!f.terms.checked){
              alert("Please accept the terms and conditions first!");
              return false;
            }
          }
        </script>
      </body>
    </html>
    This will work in all browsers.

    If you're unsure of how to implement this and would like further help, then go to the page with your form on, view the page's source code, then copy and paste the complete source code here (please use code tags).
    Then at least I will be able to see your exact markup and in so doing remove PHP from the equation.

    If you would like some help to move your form away from a table-based layout, then I'll also be glad to help.

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,595
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    One possible cause of problems is that you have a field with the name "SUBMIT" which in Internet Explorer can interfere with the submit method on the form as they both get created in the same namespace.

    You should never give a submit button the name "SUBMIT" and most of the time there is no need to give that button a name at all.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Addict mari's Avatar
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    thanks very much guys, the issue is resolved and the problem was as Pullo pointed out, embedding a form within a form

    thanks again


Bookmarks

Posting Permissions

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