Getting OnClick to work in my form

[florida]

Please advise how to get the onClick to work on my form when using layer in Netscape 4? As an example here I have the "return false" working just as a test BUT when I put in the <ilayer> part it Ignores the onClick part entirely! How do you get the OnClick part to work in layer? Normally I would put a Javascript validation in the onClick but I cant put Javascript in their because it wont work so I just tried a simple "return false" and it wont work. If I take away the <ilayer> part the onClick will work so it is coming down to how do I get the OnClick to work inside an <ilayer>???


<ilayer>
<CFFORM name="form" action="form.cfm">

<INPUT TYPE="text" NAME="announce" ID="announce" VALUE="Help">
//I ALSO TRIED TO PUT onClick="return false" in the above input type area and still wont work



<input type="submit" name="form" value="Submit" onclick="return false">

</cfform>
</ilayer>

[gil davis]

What you posted does not show up for me in NS 4. It does not recognize <CFFORM> tag

[florida]

sorry it is suppose to be a <form> not <cfform>

Any ideas on how I can get this to work??

[gil davis]

It worked for me, once I fixed the <CFFORM> to <FORM>. There must be something else in the page that is broken.

Are you getting any JS errors?

[florida]

Gil, here it is with the script. If I take away the <ilayer> then the function does work but when I add the <ilayer> the function doesnt work (it doesnt give me the alert statement) with the onclick. Any advise?

<script>
function myFunction()
{
var f = document.form3;
if(f.announcement.options[f.announcement.selectedIndex].value == "None")
{
alert("Select one option to continue.");
return false;
}
}
</script>
<ilayer>
<FORM name="form3" action="form3.html">

<INPUT TYPE="button" NAME="announce" ID="announce" VALUE="Help">
<SELECT NAME="announcement">
<OPTION VALUE="None" SELECTED>Select Options:</OPTION>
<OPTION VALUE="test" SELECTED>test</OPTION>
</SELECT>



<input type="submit" name="form" value="Select" onclick="return myFunction();">

</form>
</ilayer>

[gil davis]

That is because the form is in the layer, not the document. You have two choices: 1) give the layer an ID and change the handle to:

document.layers["ilayer"].document.form3

or 2) use the "this" operator and pass the form handle to the function:

<script>
function myFunction(f)
{
//var f = document.form3; you don't need this line anymore
...
</script>
...
<input type="submit" name="form" value="Select" onclick="return myFunction(this.form)">

The first option will need to detect Netscape browsers. The second one will work in all browsers.

[florida]

Gil,

Thanks for your help and I did try both ways. The first one did execute the alert statement BUT it did not hide the form as if the ilayer part never worked? The second one had the same problems as I had before where it did hide my form BUT the alert statement never came up. Please advise if I have everything correct???


//FIRST CHOICE:
<script>
function va_select()
{
if(document.form4.announcement.options[document.form4.announcement.selectedIndex].value == "None")
{
alert("Select one option to continue.");
return false;
}
}

if(document.layers)
{
document.layers["ilayer name=tt"].document.form4
}
</script>

<FORM name="form4" action="form4.cfm">

<INPUT TYPE="button" NAME="announce" ID="announce" VALUE="Help">
<SELECT NAME="announcement">
<OPTION VALUE="None" SELECTED>Select Options:</OPTION>
<OPTION VALUE="test" SELECTED>test</OPTION>
</SELECT>



<input type="submit" name="form4" value="Select" onclick="return myFunction(this.form4)">

</form>
</ilayer>





//SECOND CHOICE:

<script>
function myFunction()
{
if(document.form4.announcement.options[document.form4.announcement.selectedIndex].value == "None")
{
alert("Select one option to continue.");
return false;
}
}

</script>
<ilayer name="tt">
<FORM name="form4" action="form4.cfm">

<INPUT TYPE="button" NAME="announce" ID="announce" VALUE="Help">
<SELECT NAME="announcement">
<OPTION VALUE="None" SELECTED>Select Options:</OPTION> <OPTION VALUE="test" SELECTED>test</OPTION>
</SELECT>



<input type="submit" name="form4" value="Select" onclick="return myFunction(this.form4)">

</form>
</ilayer>


===============================================


//Here is the layer "tt" used to hide the form which is located in my pop up javascript in a javascript file. Again, this part does work with the exception of my problems with the onClick part.

if(document.layers)
{
document.tt.visibility = "hide";
}

[gil davis]

Originally posted by florida
Please advise if I have everything correct???You're having a rough time grasping this, aren't you?

FIRST CHOICE:
<script>
function va_select() {
var fm = (document.layers) ? document.tt.document.form4 : document.form4;
if (fm.announcement.options[fm.announcement.selectedIndex].value == "None")
{alert("Select one option to continue.");
return false;}
}
</script>
<ilayer id="tt">
<FORM name="form4" action="form4.cfm">
<INPUT TYPE="button" VALUE="Help">
<SELECT NAME="announcement">
<OPTION VALUE="None" SELECTED>Select Options:</OPTION>
<OPTION VALUE="test">test</OPTION>
</SELECT>
<input type="submit" value="Select" onclick="return myFunction()">
</form>
</ilayer>

SECOND CHOICE:
<script>
function myFunction(fm) {
if (fm.announcement.options[fm.announcement.selectedIndex].value == "None")
{alert("Select one option to continue.");
return false;}
}
</script>
<ilayer id="tt">
<FORM name="form4" action="form4.cfm">
<INPUT TYPE="button" VALUE="Help">
<SELECT NAME="announcement">
<OPTION VALUE="None" SELECTED>Select Options:</OPTION>
<OPTION VALUE="test">test</OPTION>
</SELECT>
<input type="submit" value="Select" onclick="return myFunction(this.form)">
</form>
</ilayer>

You shouldn't specify "selected" for more than one option in a select unless you specify "multiple" in the select tag. If you really wanted a multiple select, then you cannot use selectedIndex to find which one is selected - you have to look at each option and test it's "selected" property to find each one selected.

I believe that you have the visibility thing correct.

I removed redundant names and ids. You weren't using them anyway. BTW, you shouldn't use the same name for different things, and you should avoid names that are the same or similar to HTML objects (e.g.: a form named "form").

[florida]

Gil,

Thanks for all your help! Still not working so I am just going to keep trying. I tried both examples exactly as you gave and it seems to do the same thing where it wont work with the <ilayer> and then works only if I take the <ilayer> off.

This is one hard learning experience for me!

[gil davis]

Attached please find a working example. Save the file and change the extension to ".htm". It will work in NS 4.

[florida]

Gil,

Again many thanks for your answers. It still does not pass that function. I tried the example you supplied. Are there any books on Netscape 4 layering that could advise more on how to pass a javascript function similiar to what I am trying to do? Any other suggestions? If not I appreciate ALL your time!