PLEASE HELP! I am very new to JavaScript, and I am completely stuck on why my code is not producing an output. The object of my assignment is to accept a users input into a pre-established form. Once the user clicks submit the pre-established form will replace key variables with the users input. Here is my source code and js:
Code and js:
`
function showFormInput() { //get data from the form
var a1 = document.getElementsById('rname').value;
var b2 = document.getElementsById('orgname').value;
var c3 = document.getElementsById('date').value;
var d4 = document.getElementsById('web').value;
var e5 = document.getElementsById('hname').value;
// Displaying data in the HTML
document.getElementById('recipientName').innerHTML = a1;
document.getElementById('organizationName').innerHTML = b2;
document.getElementById('eventDate').innerHTML = c3;
document.getElementById('websiteURL').innerHTML = d4;
document.getElementById('hostName').innerHTML = e5;
}
<header>
<div class="top">
<a class="logo" href="index.html">CapellaVolunteers<span
class="dotcom">.org</span></a>
</div>
<nav>
<ul class="topnav">
<li>Home</li>
<li>Invitation</li>
<li>Gallery</li>
<li>Registration</li>
</ul>
</nav>
</header>
<section id="pageForm">
<label for="recipientName">Recipient name:</label>
<input type="text" id="rname" name="recipientName" placeholder="Enter your
Recipient Name" />
<label for="organizationName">Organization name:</label>
<input type="text" id="orgname" name="organizationName" placeholder="Enter
your Organization Name" />
<label for="eventDate">Event Date:</label>
<input type="text" id="date" name="eventDate" placeholder="Enter your
Event Date" />
<label for="websiteURL">URL:</label>
<input type="text" id="web" name="websiteURL" placeholder="Enter your
Website URL" />
<label for="hostName">Host name:</label>
<input type="text" id="hname" name="hostName" placeholder="Host Name" />
<input type="submit" value="Submit" onclick="showFormInput()" />
</section>
<article id="placeholderContent">
Hello
<span id="recipientName">recipientName</span>!
<br/>
<br/> You have been invited to volunteer for an event held by
<span id="organizationName">organizationName</span> on
<span id="eventDate">eventDate</span>. Please come to the following website:
<span id="websiteURL">websiteURL</span> to sign up as a volunteer.
<br/>
<br/> Thanks!
<br/>
<br/>
<span id="hostName">hostName</span>
</article>
<footer>This events site is for IT-FP3215 tasks.</footer>
Seems to work after a few fixes after running it through a linter.
A couple of the issues:
You meant getElementById (not getElementsById)
The bottom half of the code was wrapped in a {} block (not sure why). It needs to all be in the same block if it should run on click.
Comments start with two forward slashed: (//).
function showFormInput() { //get data from the form
var a1 = document.getElementById('rname').value; // 'rname reference id in html(not included with html you will need to add.)
var b2 = document.getElementById('orgname').value;
var c3 = document.getElementById('date').value;
var d4 = document.getElementById('web').value;
var e5 = document.getElementById('hname').value;
document.getElementById('recipientName').innerHTML = a1; // 'recipientName reference name in the html
document.getElementById('organizationName').innerHTML = b2;
document.getElementById('eventDate').innerHTML = c3;
document.getElementById('websiteURL').innerHTML = d4;
document.getElementById('hostName').innerHTML = e5;
}
document.getElementById('showFormInput').addEventListener('click', showFormInput);
// You can leave this in the <script> tags with an inline `onclick=` if needed (though I wouldn't recommend it). Just easier to edit in the JS.
<html lang="en-US">
<head>
<title>Invitation Page</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<header>
<div class="top">
<a class="logo" href="index.html">CapellaVolunteers<span
class="dotcom">.org</span></a>
</div>
<nav>
<ul class="topnav">
<li>Home</li>
<li>Invitation</li>
<li>Gallery</li>
<li>Registration</li>
</ul>
</nav>
</header>
<section id="pageForm">
<label for="recipientName">Recipient name:</label>
<input type="text" id="rname" name="recipientName" placeholder="Enter your Recipient Name" />
<label for="organizationName">Organization name:</label>
<input type="text" id="orgname" name="organizationName" placeholder="Enter your Organization Name" />
<label for="eventDate">Event Date:</label>
<input type="text" id="date" name="eventDate" placeholder="Enter your Event Date" />
<label for="websiteURL">URL:</label>
<input type="text" id="web" name="websiteURL" placeholder="Enter your Website URL" />
<label for="hostName">Host name:</label>
<input type="text" id="hname" name="hostName" placeholder="Host Name" />
<input type="submit" id='showFormInput' value="Submit" />
</section>
<article id="placeholderContent">
Hello
<span id="recipientName">recipientName</span>!
<br/>
<br/> You have been invited to volunteer for an event held by
<span id="organizationName">organizationName</span> on
<span id="eventDate">eventDate</span>. Please come to the following
website:
<span id="websiteURL">websiteURL</span> to sign up as a volunteer.
<br/>
<br/> Thanks!
<br/>
<br/>
<span id="hostName">hostName</span>
</article>
<footer>This events site is for IT-FP3215 tasks.</footer>
</body>
</html>
Related
Only numbers are to be entered in the Phone number input box. Code is given below. Also, I want users to enter only text in the Name input box. Pls, help using simple js.............................................................................................................................
<!DOCTYPE html>
<html>
<head>
<title>Navya Malhotra - Contact Us</title>
<link rel="stylesheet" href="styles/style.css" type="text/css">
<link rel="stylesheet" href="styles/contact.css" type="text/css">
<script>
var h2 = document.getElementById('h2')
function setValue(e, el) {
var element = document.getElementById(el)
element.innerHTML = e;
}
</script>
</head>
<body>
<div class="navbar">
<div class="title">
<p><span style="font-size: 50px;">N</span>avya <span style="font-size: 50px;">M</span>alhotra</p>
</div>
<div class="main-menu">
<ul>
<li>Home</li>
<li>Products</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
<div class="nav_links">
<ul>
<li><img src="pics/Youtube.png" alt="The Source is down" style="height: 45px;"></li>
<li><img src="pics/Instagram.png" alt="The Source is down" style="height: 33px;"></li>
<li style="margin-top: 32px;"><img src="pics/Facebook.png" alt="The Source is down" style="height: 29px;"></li>
</ul>
</div>
</div>
<p class="home_title"><span style="font-size: 40px;">C</span>ontact <span style="font-size: 40px;">U</span>s</p>
<form action="" class="contact_form">
<input type="text" class="input_fields" pattern=".{8,}" required placeholder="Full Name" id="fullname"/>
<input type="email" class="input_fields" required pattern=".{13,}" placeholder="Your Email"/>
<input type="text/number" pattern=".{10,10}" class="input_fields" required placeholder="Phone number (+91)"/>
<select class="dropdown" id="dropdown" onchange="setValue(this.value, 'h1')" >
<option value="feedback">Feedback</option>
<option value="review">Review</option>
<option value="query">Query</option>
<option value="complain">Complaint</option>
<option value="custom">Custom</option>
</select>
<textarea class="text_area" cols="39" rows="8" minlength="50" maxlength="350" required placeholder="Your Review"></textarea>
<input type="submit" class="submit_button" id="submit_button"/>
</form>
<h1 id="h1"></h1>
<h1 id="h2"></h1>
</body>
</html>
Instead of
<input type="text/number" pattern=".{10,10}" class="input_fields" required placeholder="Phone number (+91)"/>
You can use type="number" and that only only accept numbers for your input.
<input type="number" pattern=".{10,10}" class="input_fields" required placeholder="Phone number (+91)"/>
I've added the snippet inside the tag:
<script src='https://www.google.com/recaptcha/api.js?render=EXAMPLE123456789-_987654321'></script>
After that, I added this javascript callback inside each form on the site: (grecaptcha above the submit button).
<form accept-charset="UTF-8" target="_blank" action="https://website.infusionsoft.com/app/form/process/1234567890" class="infusion-form" id="inf_form_1234567890" method="POST">
<input name="inf_form_xid" type="hidden" value="1234567890" />
<input name="inf_form_name" type="hidden" value="First Last.com&#a;Web Form submitted&#a;HOME PAGE&#a;First / Last" />
<input name="infusionsoft_version" type="hidden" value="1.00.00.1" />
<div>
<div>
<p class ="white">Register Now</p>
</div>
</div>
<div>
<div> </div>
</div>
<div class="user-fields">
<div class="infusion-field">
<label for="inf_field_FirstName_home">First Name *</label>
<input class="infusion-field-input" id="inf_field_FirstName" name="inf_field_FirstName" placeholder="First Name *" type="text" required />
</div>
<div class="infusion-field">
<label for="inf_field_Email_home">Email *</label>
<input class="infusion-field-input" id="inf_field_Email" name="inf_field_Email" placeholder="Email *" type="text" required />
</div>
</div>
<div>
<div> </div>
</div>
<script>
grecaptcha.ready(function() {
grecaptcha.execute('EXAMPLE123456789-_987654321', {action: 'homepage'})
.then(function(token) {
// Verify the token on the server.
});
});
</script>
<div class="infusion-submit">
<button class="infusion-btn" type="submit">Submit!</button>
</div>
</form>
<script type="text/javascript" src="https://website.infusionsoft.com/app/webTracking/getTrackingCode"></script>
<script type="text/javascript" src="https://website.infusionsoft.com/app/timezone/timezoneInputJs?xid=12345678900987654321"></script>
Is this the correct way?
OMG I am tired of trying to figure this out myself. I am using the developer tools in Chrome and in Firefox and I keep getting the SyntaxError: Unexpected Token <. It keeps flagging the first line . Please tell me what I am doing wrong here, thank you! I have tried YouTube videos and W3schools.com and still unable to figure out why it continues to be thrown.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Invitation Page</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<script>
function showFormInput() { //get data from the form
var a1 = document.getElementById('rname').value; // 'rname reference
// id in html(not included with html you will need to add.)
var b2 = document.getElementById('orgname').value;
var c3 = document.getElementById('date').value;
var d4 = document.getElementById('web').value;
var e5 = document.getElementById('hname').value;
document.getElementById('recipientName').innerHTML = a1; // 'recipientName
// reference name in the html
document.getElementById('organizationName').innerHTML = b2;
document.getElementById('eventDate').innerHTML = c3;
document.getElementById('websiteURL').innerHTML = d4;
document.getElementById('hostName').innerHTML = e5;
}
</script>
<body>
<header>
<div class="top">
<a class="logo" href="index.html">CapellaVolunteers<span
class="dotcom">.org</span></a>
</div>
<nav>
<ul class="topnav">
<li>Home</li>
<li>Invitation</li>
<li>Gallery</li>
<li>Registration</li>
</ul>
</nav>
</header>
<section id="pageForm">
<label for="recipientName">Recipient name:</label>
<input type="text" id="rname" name="recipientName" placeholder="Enter your
Recipient Name" />
<label for="organizationName">Organization name:</label>
<input type="text" id="orgname" name="organizationName" placeholder="Enter
your Organization Name" />
<label for="eventDate">Event Date:</label>
<input type="text" id="date" name="eventDate" placeholder="Enter your
Event Date" />
<label for="websiteURL">URL:</label>
<input type="text" id="web" name="websiteURL" placeholder="Enter your
Website URL" />
<label for="hostName">Host name:</label>
<input type="text" id="hname" name="hostName" placeholder="Host Name" />
<input type="submit" value="Submit" onclick="showFormInput()" />
</section>
<article id="placeholderContent">
<br/>
<br/>
Hello
<span id="recipientName">recipientName</span>!
<br/>
<br/> You have been invited to volunteer for an event held by
<span id="organizationName">organizationName</span> on
<span id="eventDate">eventDate</span>. Please come to the following
website:
<span id="websiteURL">websiteURL</span> to sign up as a volunteer.
<br/>
<br/> Thanks!
<br/>
<br/>
<span id="hostName">hostName</span>
</article>
<footer>This events site is for IT-FP3215 tasks.</footer>
</body>
</html>
It seems to be rendering perfectly fine to me. I would not recommend putting a script take outside of the body tag. I would put it at the very end of the tag so that it doesn't hold up the loading of the page. In addition, I'd use "Brackets" as my code editor for projects like this. It's super useful, and you can download "Beautify" as an extension to make your code format out nicely.
Trying to create a form that will force people to select the checkbox with the phrase "I accept the terms and conditions" in order to send the form.
This is what I have but it is not submitting the form — I get an error.
Javascript that I have placed in the header:
<script type="text/javascript">
<!--
function validate_form ( )
{
valid = true;
if ( document.form1.cb.checked == false )
{
alert ( "Please check the Terms & Conditions box ." );
valid = false;
}
return valid;
}
//-->
</script>
Form:
<form action="/cgi-bin/FormMail.pl" method="POST" name="frmOne" id="frmOne">
<input type=hidden name="recipient" value="XXX#XXX.com"/>
<table width="100%" cellspacing="5" cellpadding="5" style="margin-top:-20px">
<tr>
<td width="50%" valign="top">
<br/>
<p><span id="sprytextfield1">
<label for="Full Name">Full Name (First and Last): </label>
<input name="Full Name" type="text" id="name" tabindex="10" size="60" />
<span class="textfieldRequiredMsg"><br />Please provide information.</span></span> </p>
<p><span id="sprytextfield2">
<label for="Your Email">Your e-mail address: </label>
<input name="email" type="text" id="email" size="60" />
<span class="textfieldInvalidFormatMsg"></span></span> </p>
<p><span id="sprytextfield3">
<label for="Phone Number"> Phone Number: </label>
<input name="Phone Number" type="text" id="phone" size="60" />
<span class="textfieldInvalidFormatMsg"><br />Invalid format.</span><span class="textfieldRequiredMsg"><br/>A phone number is required.</span></span></p>
<p class="text">
<span id="sprytextfield4">
<label for="Nature Of The Accident">Nature of Accident, i.e. slip and fall, motor vehicle accident, etc.: </label>
<input name="Nature Of The Accident" type="text" id="natureOfAccident" size="60" />
</span></p>
<p><span id="sprytextfield5">
<label for="Date Of The Accident">Date of the Accident: </label>
<input name="Date Of The Accident" type="text" id="dateOfAccident" size="60" />
<span class="textfieldRequiredMsg"><br />Please provide information.</span><span class="textfieldInvalidFormatMsg"><br />Invalid format.</span></span></p>
<p class="text">
</td>
<td width="50%" valign="top">
<p class="text">
<span id="sprytextarea1">
<label for="Description Of The Injury"><br />Brief Description of your Injuries: </label>
<textarea name="Description Of The Injury" cols="45" rows="4" id="descriptionOfInjury">
</textarea>
<span class="textareaRequiredMsg"><br />Please provide information.</span></span></p>
<p class="text">
<span id="sprytextarea2">
<label for="Description Of The Accident">Brief Description of the Accident:</label>
<textarea name="Description Of The Accident" id="descriptionOfAccident" cols="45" rows="4"></textarea>
<span class="textareaRequiredMsg"><br />
Please provide information.</span></span></p>
<p class="text">
<span id="sprytextfield6">
<label for="How Did You Hear About Us">How did you hear about us?: </label>
<input name="How Did You Hear About Us" type="text" id="howDidYouHear" size="56" />
<span class="textfieldRequiredMsg"><br />Please provide information.</span></span> </p>
<input type="checkbox" name="agree" value="agree_terms" id="disclaimer" />
<label for="disclaimer">I have read the Disclaimer</label>
<br/><br />
<input type="reset" name="reset" id="reset" value="Reset Form" />
<input type="submit" name="Form Action" id="send" tabindex="100" value="Submit" />
</td>
</tr>
</table>
</form>
<script type="text/javascript">
<!--
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "none", {validateOn:["blur", "change"]});
var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2", "email", {validateOn:["blur", "change"], isRequired:false});
var sprytextfield3 = new Spry.Widget.ValidationTextField("sprytextfield3", "phone_number", {validateOn:["blur"], useCharacterMasking:true});
var sprytextfield4 = new Spry.Widget.ValidationTextField("sprytextfield4", "none", {isRequired:false, validateOn:["blur", "change"]});
var sprytextfield5 = new Spry.Widget.ValidationTextField("sprytextfield5", "date", {hint:"dd/mm/yyyy", validateOn:["blur", "change"], format:"dd/mm/yyyy"});
var sprytextarea1 = new Spry.Widget.ValidationTextarea("sprytextarea1", {validateOn:["blur", "change"]});
var sprytextarea2 = new Spry.Widget.ValidationTextarea("sprytextarea2", {validateOn:["blur", "change"]});
var sprytextfield6 = new Spry.Widget.ValidationTextField("sprytextfield6", "none", {validateOn:["blur", "change"], hint:"Google, etc"});
//-->
</script></div>
You are referencing the form and elements wrong, try something like this:
<form name="frmOne" method="POST" onSubmit="return checkForm(frmOne);" action="/cgi-bin/FormMail.pl">
<script>
function checkForm(form)
{
if(!form.agree.checked)
{
alert("You must agree to this disclaimer before applying.");
return false;
}
}
</script>
I hope that helped
Change <form action="/cgi-bin/FormMail.pl" method="POST" name="frmOne" id="frmOne"> to <form action="/cgi-bin/FormMail.pl" method="POST" name="frmOne" id="frmOne" onSubmit="validate_form();">
What other errors are you getting?
and change document.form1.cb.checked to document.frmOne.agree.checked
Give a try with document.getElementById("disclaimer").checked == false.
Here's the script-
<script language=javascript>
function apply()
{
document.form1.sub.disabled=true;
if(document.form1.chk.checked==true)
{
document.form1.sub.disabled=false;
}
if(document.form1.chk.checked==false)
{
document.form1.sub.enabled=false;
}
}
</script>
If I use this html it doesn't work--
<input class="field checkbox" type="checkbox" name="chk" onClick="apply()" value="accept" />
However, this also doesn't work--
<input class="field" type="checkbox" name="chk" onClick="apply()" value="accept" />
But this does work--
<input class="checkbox" type="checkbox" name="chk" onClick="apply()" value="accept" />
So if the class "field" is in there it breaks the JS. Of course I can take it out, but I want to know why it doesn't work?
Thanks!
EDIT
Sorry folks, here's the whole page. The CSS is just controlling the position of the element, it shouldn't interfere with the JS as far as I know...? -
<?php
session_start();
if(!isset($_SESSION['referrer'])){
//get the referrer
if ($_SERVER['HTTP_REFERER']){
$referrer = $_SERVER['HTTP_REFERER'];
} else {
$referrer = "unknown";
}
//save it in a session
$_SESSION[’referrer’] = $referrer; // store session data
}
//grab campaign var from url
$campaign = $_GET['campaign'];
?>
<!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>
<title>Beerfest Packages Sweepstakes - Blue Ridge Country</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="scripts/wufoo.js"></script>
<link rel="stylesheet" href="css/structure.css" type="text/css" />
<link rel="stylesheet" href="css/form.css" type="text/css" />
<link rel="stylesheet" href="css/theme.css" type="text/css" />
<script language=javascript>
function apply()
{
document.form1.sub.disabled=true;
if(document.form1.chk.checked==true)
{
document.form1.sub.disabled=false;
}
if(document.form1.chk.checked==false)
{
document.form1.sub.enabled=false;
}
}
</script>
</head>
<body id="public">
<img id="top" src="images/top.png" alt="" />
<div id="container">
<h1>Wufoo</h1>
<form class="wufoo" action="insert.php" method="post" name="form1">
<div class="info">
<h2>Register to Win & Subscribe to Blue Ridge Country</h2>
<div>Now's your chance to not only register to win our free beerfest tickets and getaway, but also receive the #1 magazine in the Blue Ridge Mountains!</div>
</div>
<ul>
<li class="section first">
<h3>Your information</h3>
<div>Whether you're registering to win or subscribing to the magazine (or both!) we need your info!</div>
</li>
<li>
<label class="desc">Name <span class="req">*</span></label>
<span>
<input class="field text" size="8" value=""/>
<label>First</label>
</span>
<span>
<input class="field text" size="3" value=""/>
<label>M.I.</label>
</span>
<span>
<input class="field text" size="14" value=""/>
<label>Last</label>
</span>
</li>
<li>
<label class="desc">Email <span class="req">*</span></label>
<div>
<input class="field text medium" type="text" name="email" maxlength="100" value="" />
</div>
<p class="instruct">Don't worry, we won't spam you, share or sell your email address!</p>
</li>
<li>
<label class="desc">Address <span class="req">*</span></label>
<div>
<input class="field text medium" type="text" maxlength="100" value="" />
</div>
</li>
<li>
<span>
<input class="field text" size="15" value="" />
<label>City</label>
</span>
<span>
<input class="field text" size="2" value="" />
<label>State</label>
</span>
<span>
<input class="field text" size="5" maxlength="10" value="" />
<label>Zip</label>
</span>
</li>
<li>
<label class="desc">Phone <span class="req">*</span></label>
<span>
<input class="field text" type="text" size="3" maxlength="3" value=""/> -
<label>Area</label>
</span>
<span>
<input class="field text" type="text" size="8" maxlength="8" value=""/>
<label>Phone</label>
</span>
</li>
<li class="section">
<h3>Legal mumbo jumbo</h3>
<div>Don't worry, you're almost done and this is the last bit we need from you!</div>
</li>
<li>
<label class="desc">Official Rules <span class="req">*</span></label>
<div>
<textarea rows="10" cols="50" class="field textarea medium" readonly="readonly" style="font-size: 0.8em;">1. To enter, complete an online request by submitting this completed form. Or, send a stamped, self-addressed envelope to: "Blue Ridge Country Beerfest Promotion," Leisure Publishing, PO Box 21535, Roanoke, VA 24018, requesting an entry form. Limited to one entry per household. Entries must be received by June 30, 2009. 2. Reservation procedures to come with notification of winning. Package not available during holidays and special events. Notification of prizes will be sent to winners at the email address on the entry form. The odds of winning will depend upon the number of entries. 3. All prizes will be awarded to winners selected by random drawing from all valid entries received. Drawing will be conducted by Leisure Publishing Inc., an independent publisher, whose decisions are final on all matters relating to this sweepstakes. Winners will be notified by email to the address provided on the entry form. Only one prize to a family or household. Due to the nature of this competition, you must be 21 or older to win. Proof of age will be required prior to receiving free tickets to alcohol-related events. 4. Sweepstakes is open to all residents of the U.S. and Canada except advertisers, their employees, their advertising and promotion agencies, and the families of each. Void wherever taxed, restricted or prohibited by law. Prizes are not transferable; may not be exchanged or substituted; cannot be redeemed for cash; must be taken in their entirety; no substitutions permitted. Taxes, if any, are the responsibility of the individual winners. 5. Entry in sweepstakes constitutes permission to use winners’ names and photograph for advertising and publicity purposes, without further compensation to winners. For names of prize winners, send a stamped, self-addressed envelope to: "Blue Ridge Country Beerfest Promotion" — Winners, P.O. Box 21535, Roanoke, VA 24018.</textarea>
</div>
</li>
<li class="section">
<h3>Subscribe / Win!</h3>
<div>While you don't have to subscribe to win, we hope you will!</div>
</li>
<li>
<label class="desc">Sweepstakes Selection</label>
<div class="col">
<span><input id="choice1" name="mc" class="field radio" type="radio" value="Robots" checked="checked" />
<label class="choice" for="choice1">Robots</label></span>
<span><input id="choice2" name="mc" class="field radio" type="radio" value="Monkeys"/>
<label class="choice" for="choice2">Monkeys</label></span>
</div>
</li>
<li>
<label class="desc">Official Rules</label>
<div class="col">
<span><input class="checkbox" type="checkbox" name="chk" onClick="apply()" value="accept" />
<label class="choice">I accept the terms and conditions from the "Official Rules" above.</label></span>
</div>
</li>
<li class="buttons">
<input id="saveForm" class="btTxt" type="submit" name="sub" value="Submit" disabled="disabled" />
</li>
</ul>
<div style="display: none;">
<input type="hidden" name="referrer" value="<?php echo $referrer; ?>" />
<input type="hidden" name="campaignID" value="<?php echo $campaign; ?>" />
</div>
</form>
</div>
Without waiting for your edit, I can almost guarantee that the problem lies in some other bit of JS code on your page which is changing the state to something other than you think it is. There's simply no way I can see this being related to CSS. I advise you check the DOM and walk through the method executing in firebug.
And fwiw I'll also wager that your function should be rewritten:
function apply()
{
with(document.form1) { sub.disabled = !chk.checked; }
}