SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Enthusiast Wouter's Avatar
    Join Date
    Jan 2002
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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>

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2002
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    [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

  3. #3
    SitePoint Enthusiast Wouter's Avatar
    Join Date
    Jan 2002
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    SitePoint Zealot
    Join Date
    Aug 2002
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    onmouseover or onclick

  5. #5
    SitePoint Enthusiast Wouter's Avatar
    Join Date
    Jan 2002
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  7. #7
    SitePoint Enthusiast Wouter's Avatar
    Join Date
    Jan 2002
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wink

    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

  8. #8
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Last edited by Bill Posters; Oct 2, 2002 at 11:01.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  9. #9
    SitePoint Enthusiast Wouter's Avatar
    Join Date
    Jan 2002
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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()

  10. #10
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Last edited by Bill Posters; Oct 3, 2002 at 05:13.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  11. #11
    SitePoint Enthusiast Wouter's Avatar
    Join Date
    Jan 2002
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  12. #12
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  13. #13
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  14. #14
    SitePoint Enthusiast Wouter's Avatar
    Join Date
    Jan 2002
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "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.

  15. #15
    SitePoint Enthusiast Wouter's Avatar
    Join Date
    Jan 2002
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    I will send a postcard for the solution.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •