[RESOLVED] Collapsable Divs

[Shaolins-Finest]

Hi guys,

Im trying to use div tags to check my form fields. The problem is when I submit it doesn't do anything. See code:

<form action="continue.php" name="signup" method="post" onsubmit="return toggleDiv(this);">
<p><label for="name">Your Name:</label><br />
<input type="text" name="name" size="26" /><br />
<br />
<label for="contact">Your Contact No:</label><br />
<input type="text" name="contact" size="26" /><br />
<br />
<label for="email">Your Email:</label><br />
<input type="text" name="email" size="26" /><br />
<br />
<input type="radio" name="sex" value="Male" class="radioStyle" /> Male <input type="radio" name="sex" value="Female" class="radioStyle" /> Female<br />
<br />
<input type="reset" class="altButtonFormat" /> <input type="submit" value="Continue &gt;&gt;" class="altButtonFormat" /></p>
</form>

<script language="javascript">

function toggleDiv(signup){
if(signup.name.value == "")
{
document.getElementById(mydiv).style.display = 'block';
return false;
}
}
</script>

<div id="mydiv" style="display:none"><h3>This is a test!<br>Can you see me?</h3></div>

[coothead]

Hi there Shaolins-Finest,

add the quotation marks as hilighted....
document.getElementById('mydiv').style.display='block';

[Shaolins-Finest]

Hi coothead,

Great, it worked. I have another problem though now. I've moved all my javascript and call it from an external file. The problem is that it won't run properly, it only runs the first IF statement and doesnt run the other 2. But when I run the script in the html file it works perfectly fine. Here is the js code:

//Declare required variables
var emailID=document.signup.email;

function toggleDiv(signup)
{
//Reset Divs
document.getElementById('mydiv').style.display = 'none';
document.getElementById('invalidemail').style.display = 'none';
document.getElementById('sdiv').style.display = 'none';

//Start field validation process
if(signup.name.value == "" || signup.contact.value == "")
{
document.getElementById('mydiv').style.display = 'block';
return false;
}

if (echeck(emailID.value)==false)
{
emailID.value="";
emailID.focus();
return false;
}

if (!checkRadio("signup","sex"))
{
document.getElementById('sdiv').style.display = 'block';
return false;
}
return true;
}

//Validation Functions
function checkRadio (frmName, rbGroupName) {

var radios = document[frmName].elements[rbGroupName];

for (var i=0; i <radios.length; i++) {
if (radios[i].checked) {
return true;
}
}
return false;
}

function echeck(str) {

var at="@"
var dot="."
var lat=str.indexOf(at)
var lstr=str.length
var ldot=str.indexOf(dot)
if (str.indexOf(at)==-1){
document.getElementById('invalidemail').style.display = 'block';
return false
}

if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){
document.getElementById('invalidemail').style.display = 'block';
return false
}

if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){
document.getElementById('invalidemail').style.display = 'block';
return false
}

if (str.indexOf(at,(lat+1))!=-1){
document.getElementById('invalidemail').style.display = 'block';
return false
}

if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){
document.getElementById('invalidemail').style.display = 'block';
return false
}

if (str.indexOf(dot,(lat+2))==-1){
document.getElementById('invalidemail').style.display = 'block';
return false
}

if (str.indexOf(" ")!=-1){
adocument.getElementById('invalidemail').style.display = 'block';
return false
}

return true
}

FORM:
<form action="continue.php" name="signup" method="post" onsubmit="return toggleDiv(this);">
<p><label for="name">Your Name:</label><br />
<input type="text" name="name" size="26" /><br />
<br />
<label for="contact">Your Contact No:</label><br />
<input type="text" name="contact" size="26" /><br />
<br />
<label for="email">Your Email:</label><br />
<input type="text" name="email" size="26" /><br />
<br />
<input type="radio" name="sex" value="Male" class="radioStyle" /> Male <input type="radio" name="sex" value="Female" class="radioStyle" /> Female<br />
<br />
<input type="reset" class="altButtonFormat" /> <input type="submit" value="Continue &gt;&gt;" class="altButtonFormat" /></p>
</form>

[coothead]

Hi there Shaolins-Finest,

looking at your code, I would guess that the script has been placed after the form in your html file.

This means the form gets parsed before the script.

When placing the script in an external file the script will be parsed before the form. ;)

To get the script to work from an external file change this...

//Declare required variables
var emailID=document.signup.email;

...to this...

window.onload=function() {
//Declare required variables
var emailID=document.signup.email;
}

[Shaolins-Finest]

That didn't work :( I tried placing the external js include after the form, that didnt work either.

[Pegasus]

You can't have a javascript include in the body of the page. It needs to be in the <head> tags. Maybe try the change to the code that Coot has suggested?

Peg

[Shaolins-Finest]

I've tried the code addition, didn't work. Moved js back into head tag.

[coothead]

Hi there Shaolins-Finest,

post a link to your site or supply us with the total page code that you say worked before using an external script.
This will allow us to test fully.

[Shaolins-Finest]

Hi coothead,

Here is a link to the page: http://www.geocities.com/qbs_finest2003/mypage.htm

Press the continue button and you;ll get a message. Type something into the Name and press continue and you'll get a message, once you add text into the second text box then it will redirect, when it should give you a message.

I messed around with the js code and figured out the following code is causing the problems:

if (echeck(emailID.value)==false)
{
emailID.value="";
emailID.focus();
return false;
}

Here is the function for it:

function echeck(str) {

var at="@";
var dot=".";
var lat=str.indexOf(at);
var lstr=str.length;
var ldot=str.indexOf(dot);
if (str.indexOf(at)==-1){
document.getElementById('invalidemail').style.display = 'block';
return false;
}

if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){
document.getElementById('invalidemail').style.display = 'block';
return false;
}

if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){
document.getElementById('invalidemail').style.display = 'block';
return false;
}

if (str.indexOf(at,(lat+1))!=-1){
document.getElementById('invalidemail').style.display = 'block';
return false;
}

if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){
document.getElementById('invalidemail').style.display = 'block';
return false;
}

if (str.indexOf(dot,(lat+2))==-1){
document.getElementById('invalidemail').style.display = 'block';
return false;
}

if (str.indexOf(" ")!=-1){
adocument.getElementById('invalidemail').style.display = 'block';
return false;
}

return true;
} Note that I have added colons to the end of most statements (wasnt the case before).

[coothead]

Hi there Shaolins-Finest,

I can see the solution now. :agree:

Change this...

window.onload=function() {

//Declare required variables

var emailID=document.signup.email;

}

...to this...

var emailID;

window.onload=function() {

//Declare required variables

document.signup.name.focus();

emailID=document.signup.email;

}

...and this ...
<body scroll="no" OnLoad="document.signup.name.focus();">
...to this...
<body>

[Shaolins-Finest]

excellent! :D Thanks x1000

Btw, do you know of any other way I could remove the scroll bar from <= IE6 ? the srcoll = "no" worked a charm.

[coothead]

Hi there Shaolins-Finest,
...do you know of any other way I could remove the scroll bar from IE
Try this CSS...

<style type="text/css">
html,body{
overflow:auto;
}
</style>