.htm?x.y. vs. window.location

**Wouter** · Oct 1, 2002 02:13

When I click on the image it gives me .htm?x.y. and is not executing the window.location command? Please tell me why ?
I would like to keep my redirection command inside the input brackets in the javascript part. Tx

<head>
</head>
<body>

<form name="test">
<input type=image src="image.gif"
onclick= "javascript:

window.location.href = 'http://www.yahoo.com';

">

</form>

</body>
</html>

**Add** · Oct 1, 2002 04:13

[code<img src="image.gif" onClick="window.location.href='http://www.yahoo.com';">
form>[/code]

or just...

Code:

<a href="http://www.yahoo.com"><img src="Image.gif" border="0"></a>

or if you reaaaaaaaaaly want it in a form

i might write it when i get home. as i have to go from here now

**Wouter** · Oct 1, 2002 06:39

found the reason somewhere on the net:

According to the Netscape JavaScript Reference manual there isn't a form input type of image. Therefore there can't be any event handlers for a non existent input type.

------------- button

<form name="form1">
<input type="button" name="Next"
onmouseout="action1()"
onmouseover="acion2()"
onclick= "javascript: action3();">
</form>

I can use : window.document.form1.Next.click();

------------- image

<form name="form1">
<a href="javascript:action3();"
onmouseout="action1()"
onmouseover="acion2()"
>
<img src="image.gif" border="0">
</a>

How can I invoke the click ?????????

Thanks

**Add** · Oct 1, 2002 08:51

onmouseover or onclick

**Wouter** · Oct 2, 2002 05:51

I'm almost there !

<form name="form1">
<a href="#"
onmouseout="action1();"
onmouseover="action2();"
onclick = "javascript:action3();"
>

<img src="img.gif" border="0" name="Next">

</a></form>

in IE the following command is working
javascript: window.document.form1.Next.click();

NetScape replies
Error: window.document.form1.Next.click is not a function

How to invoke a click in NS.
Thanks

**Bill Posters** · Oct 2, 2002 07:31

Fwiw, onmouseover, onmousedown (an alternative to onclick), onclick, onmouseout, onload, etc... are all javascript events so whatever comes after them (inside the quotes) will be treated as a javascript instruction.
You don't need to put the javascript lead into the command.

Each of these events are part of the basic standard of javascript and will be supported in all major borwsers.
(The list is much longer, but cross-browser support gets a bit iffy towards the obscure end)

onclick="javascript:action3();"

...should simply be...

onclick="action3();"

Anyway...

click() should work fine as it's in the Gecko DOM and should therefore be within Netscape's reach (though I'm not sure I understand the logic behind your use of it).

If you have a current version of the page online (even if it's partially broken) it would help us to go through the code properly.

**Wouter** · Oct 2, 2002 07:59

Tx for the correction + explanation
but the problem is how to invoke the click event from another function in NetScape (in IE window.document.form1.Next.click(); is working fine)

<form name="form1">
<a href="#"
onmouseout="action1();"
onmouseover="action2();"
onclick = "action3();"
>

<img src="img.gif" border="0" name="Next">

</a></form>

action1 = the classic swapImgRestore
action2 = the classic swapImage somewhere else on the page
action3 = form validation + go to next page function

window.document.form1.Next.click(); is not a function in NS JavaScript ????? Is working fine in IE.

The use is when I click the swapImg image it will be the same as clicking on the image in the above form. Its for a better GUI.

Greetings

**Bill Posters** · Oct 2, 2002 10:14

The problem lays in the DOM method you are using to address the form and its elements.

The DOM method you are using is IE proprietory, so will only work in IE.

If you use the W3C DOM it will/should work in IE5+, Mozilla/Netscape and Opera.
I've tested the lines below in IE 5.2.2, Mozilla 1.0.1 and Opera 6.0b1 (all Mac) and they both work fine.

Code:

document.getElementById('form1').Next.click()

...or...

Code:

document.forms[0].Next.click()

The 0 used here refers to the number of forms on that page.
Javascript counts through them (starting at 0) then uses the number to address elements within that form.

If it is the first form on the page, it will be forms[0], the second will be forms[1], etc...

Try swapping either of these lines in and let me know if things improve.

**Wouter** · Oct 3, 2002 03:41

negative :

The JavaScript Console in NS 7.x is reporting

Error: window.document.getElementById("form1") has no properties

IE is working as usual --

I entered the line

window.document.getElementById('form1').Next.click() or
document.getElementById('form1').Next.click()

**Bill Posters** · Oct 3, 2002 05:07

I think your opening <form> tag may be lacking an id attribute.

In your example, you have only given it a name.
The name attribute alone is not enough to address an element using the W3C DOM.
Give the form an id that is the same as the name.

e.g... <form name="form1" id="form1" ...> ... </form>

If there is no form tag with the form1 id then, as far as the W3C DOM is concerned, the form1 element does not exist and cannot be used as part of an element address.
An element that does not exist will have "no properties" either.

Fwiw, if you are using getElementById() then you don't even need to reference the form in the command.
If the Next button/image tag has an id (id="Next") then you can simply reference it directly.

e.g... document.getElementById('Next').click()

That should do it, but in case you are still unclear I will post the entire code from my basic test page.

It shows several DOM methods of address and clicking the alert button at the bottom.
This code has been tested and found to work without error on the browsers that I mentioned earlier.

Code:

<html>
<head>
<title>proxy click() test (W3C DOM)</title>
<script type="text/javascript">

function clickMe1() {
document.getElementById('Next').click()
}

function clickMe2(id) {
document.getElementById(id).click()
}

function clickMe3() {
document.getElementById('form1').Next.click()
}

function clickMe4() {
document.forms[0].Next.click();
}

</script>
</head>

<body>
<form id="form1">
<input type="button" value="proxy alert button 01" onclick="clickMe1()"><br>
<input type="button" value="proxy alert button 02" onclick="clickMe2('Next')"><br>
<input type="button" value="proxy alert button 03" onclick="clickMe3()"><br>
<input type="button" value="proxy alert button 04" onclick="clickMe4()"><br><br>
<input type="button" value="alert button" id="Next" onclick="alert('This Works')">
</form>
</body>
</html>

Again, try the adjustments I mentioned above and let me know how you get on.

Footnote:
Fwiw, the name attribute in form elements has become largely obsolete and id is more commonly used to identify elements.
However, if you are using old CGI scripts they still may require that you use the name attribute.
The best thing to do would be to update your CGI to a newer script.
Alternatively, you can use both the id attribute *and* the name attribute (though not If you want your page to validate as either HTML 4 Strict or XHTML 1 Strict. Both of these standards no longer use the name attribute and use the id attribute instead. Name is still valid in X/HTML Transitional.)

P.S.
As I mentioned earlier, it is sometimes easier to look at the entire page's code (from <html> to </html>). It would possibly have made spotting the problem here simpler with less need to test/guess.

Just a thought.

**Wouter** · Oct 3, 2002 06:46

Tx for all the help : below the full code with the problem in NS --- IE is working fine

<html>
<head>
<title>proxy click() test (W3C DOM)</title>
<script type="text/javascript">
function action1() { return true; }
function action2() { return true; }
function action3() { alert('This Works'); }
</script>
</head>

<body>

<form name="form1" id="form1">
<a href="#"
onmouseout="action1();"
onmouseover="action2();"
onclick = "action3();"
>
<img src="image1.gif" border="0" name="image1" id="image1">
</a></form>

<form>
<a href="#"
onclick = "document.getElementById('image1').click();"
>
<img src="image2.gif" border="0">
</a></form>

</body>
</html>

**Bill Posters** · Oct 3, 2002 11:04

I see what you mean.

I haven't had a decent play around with this yet, but there definately seems to be a blind spot in Moz's support for the click() method in certain circumstances.

If all you want to do with the second button/image is make it emulate the onclick behaviour of the first button, then why not just use the same javascript command action3() for the onclick event of the second button too.

Code:

...
<body>

<form name="form1" id="form1">
<a href="#"
onmouseout="action1();"
onmouseover="action2();"
onclick="action3();"
>
<img src="image1.gif" border="0" name="image1" id="image1">
</a></form>

<form>
<a href="#"
onclick="action3();"
>
<img src="image2.gif" border="0">
</a></form>

</body>
...

Why have you chosen to go at it this way?
Is there anything that prevents you from using the same javascript for both onclick events?

**blufive** · Oct 3, 2002 11:09

negative :
The JavaScript Console in NS 7.x is reporting
Error: window.document.getElementById("form1") has no properties
[...]
I entered the line
window.document.getElementById('form1').Next.click() or
document.getElementById('form1').Next.click()

While getElementById() will work in Netscape 6/7 and other gecko browsers, it will NOT work in Netscape 4.x.

**Wouter** · Oct 6, 2002 10:07

"Why have you chosen to go at it this way?
Is there anything that prevents you from using the same javascript for both onclick events?"

the reason is I have several pages containing the same form with GUI images (an external document write js file) describing the progress.

each page contains a next button image when click performing form validation of the elements of that particular page. The action3() code differs for each page since the form elements are different.

If I have to implement the functionname in the GUI form then I have to write extra code to specify the correct action3() function.

Thank you for the input -- but if a reason can be found why it is not working in NS it would be gratefull.

**Wouter** · Oct 6, 2002 10:17

I will send a postcard for the solution.

User Tag List

Thread: .htm?x.y. vs. window.location

Thread Tools

Display

.htm?x.y. vs. window.location

Bookmarks

Bookmarks

Posting Permissions