Javascript Buttons

[morrisdan1]

Hi,

Shown below, is an example of codes to create one javascript button in a web page"

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function goToURL() { window.location = "#List_of_Schools"; }
// End -->
</script>

<form>
<input type=button value="List of Schools" onClick="goToURL()">
</form>

However, does anyone know how to create more than one Javascript button on a page ? Seems that when browsing throughout different Javascript tutorials, I seem to find only codes that will create one Javascript button ? Anyone know what the codes should be to create more than one Javascript button on a page ? Please advise. I'd appreciate it. Thanks !

[dank]

A bit of terminology clarification would probably be in order first. The button example you supplied is not JavaScript. It's actually HTML. However, the onClick event handler is the JavaScript portion added to the button to trigger the JavaScript popup window.

Given that, there is absolutely nothing keeping you from putting as many forms and/or buttons on the page as you want.

<form><input type=button value="form1" onClick="goToURL()"></form>
<form><input type=button value="form2" onClick="goToURL()"></form>
<form><input type=button value="form3" onClick="goToURL()"></form>
etc.

Or, you could have several buttons within the same form:

<form>
<input type=button value="button1" onClick="goToURL()">
<input type=button value="button2" onClick="goToURL()">
</form>

Of course, you may want to name the forms with a <form name="form_1"> to separate them, depending on what you will end up doing with them.

Dan

[Rich]

... and you might want to specify a different onclick event for each button. Unless, of course, you want to say something like "click any button to continue..."

Rich

[morrisdan1]

Ok, thanks for your helpful answers thus far ! Which brings me to the next question.

Actually, it's this part I'm a bit confused about:

<!-- Begin
function goToURL()
{ window.location = "#List_of_Schools"; }
// End -->

How can I make each button go to a different location ? How can I make the second button go to a different location other than "List_of_Schools" shown in the code above and shown in the original posting. Thanks again !

[dank]

Best way would be to pass the desired location to the JavaScript function when you call it.


<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function goToURL(url) {
window.location = "url";
}
// End -->
</script>

<form>
<input type=button value="button1" onClick="goToURL('#List_of_Schools')">
<input type=button value="button2" onClick="goToURL('#List_of_Stores')">
</form>

[morrisdan1]

That did the trick. Thanks ! Except for one minor thing. I think they should be no quotes in "url". Instead, I think it worked as written shown below:

function goToURL(url) {
window.location =url;
}

Also thanks to everyone who posted in here under this topic. I appreciate it !

[dank]

Good point. I got sloppy with my copy and pasting. :mad:

Dan

[morrisdan1]

Dan, that's ok. You still got the credit for coming up with the codes to begin with... : )

Anyway, now I'm wondering what to do about the codes shown below for browsers that does not support Javascript.

I have no problems with the script and noscript tags. But, I'm not sure how to handle the form codes shown below in browsers that doesn't support javascript. Can I still use the script tag even though it isn't javascript ? Is there a way around this problem ? Please advise.

<form>
<input type=button value="button1" onClick="goToURL('#List_of_Schools')">
<input type=button value="button2" onClick="goToURL('#List_of_Stores')">
</form>

Thanks again for all your help !

[dank]

I'm wondering what to do about the codes shown below for browsers that does not support Javascript.
No shoes, no shirt, no service.

:)

Dan

[morrisdan1]

"No shoes, no shirt, no service."

Hmm, good advice ! ;-)

Anyway, shown below are the codes that does the trick:

<script language="javascript">

x1="<div align='center'><form>";

x2="<input type=button value='Fill out the Form' onClick=goToURL('#Book_Donation_Form')>";

x3="[nbsp]<input type=button value='List of Schools' onClick=goToURL('#List_of_Schools')>";

x4="</form></div>";

document.write(x1+x2+x3+x4);

</script>

The only thing is that I'm wondering about the onClick=goToURL('#Book_Donation_Form') part. Is it okay to have it written as it is ? That is without the apostrophe character ---> ' <--- ?

Cause it seems that having it written as onClick='goToURL('#Book_Donation_Form')' doesn't seem to work ? Yet, it works fine without it ? Would not having the apostrophe character cause problems with certain browsers ? Please advise. I'd appreciate it. Thanks again !

[dank]

It would be better to use escaped double quotes within the lines of HTML:

x3=" <input type=\"button\" value=\"List of Schools\" onClick=\"goToURL('#List_of_Schools')\">";

That will avoid confusing the JavaScript as to where the line starts and ends and which piece in single quotes is a passed value.

Dan

[morrisdan1]

Dan (aka Dank),

That did the trick ! Thanks, I appreciate all your help !

--Morrisdan1