Getting OnClick to work in my form

@floridaFeb 13.2003

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>???

<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

</cfform>
</ilayer>

to post a comment

JavaScript

10 Comments(s) _↴

@gil_davisFeb 13.2003 — #What you posted does not show up for me in NS 4. It does not recognize <CFFORM> tag

@floridaauthorFeb 13.2003 — #sorry it is suppose to be a <form> not <cfform>

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

@gil_davisFeb 13.2003 — #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?

@floridaauthorFeb 13.2003 — #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_davisFeb 13.2003 — #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:

[font=monospace]document.layers["ilayer"].document.form3[/font]

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

[font=monospace]<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)">[/font]

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

@floridaauthorFeb 14.2003 — #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_davisFeb 14.2003 — #[i]Originally posted by florida [/i]

[B]Please advise if I have everything correct???[/b][/quote]You're having a rough time grasping this, aren't you?

[font=monospace]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>[/font]

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").

@floridaauthorFeb 14.2003 — #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_davisFeb 14.2003 — #Attached please find a working example. Save the file and change the extension to ".htm". It will work in NS 4.

[upl-file uuid=8ea887bf-9534-4779-bf75-34b4ecdc3f7a size=663B]florida.txt[/upl-file]

@floridaauthorFeb 19.2003 — #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!

Also in #JavaScript _↴

Question, might not be related to JS.form validation javascript isnt working .....Need help with adding in Javascript PLEASE!

Success!

Help @florida spread the word by sharing this article on Twitter...

Tweet This

Getting OnClick to work in my form

10 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Getting OnClick to work in my form

10 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #JavaScript _↴