checkbox not working in IE

**mari** · Jan 15, 2013 07:21

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

**Pullo** · Jan 15, 2013 13:47

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.

**felgall** · Jan 15, 2013 14:18

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.

**mari** · Jan 16, 2013 05:22

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

User Tag List

Thread: checkbox not working in IE

Thread Tools

Display

checkbox not working in IE

Bookmarks

Bookmarks

Posting Permissions