Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    May 2004
    Location
    Suffolk, GB
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Best way to use HREF / ONCLICK

    We have a function that validates a form and then does submit (and a bunch of other stuff)

    We called it using:
    Code:
    <td class="MyButtonStyle">
    <a href="#" OnClick="MyFunction();" title="Save changes and continue">SAVE</a>
    </td>
    This worked fine on the browsers we were using (IE6 in the main), but we now find doesn't work on IE5.01, Mac and some others.

    OK, so having done some research I now realise I needed RETURN FALSE in OnClick.

    So ... faced with having to change a lot of pages I'd like to have the best possible syntax (by which I suppose I rellay mean most-browser-compatible), and I've seen a number of options; advice on picking a good'un would be much appreciated.

    Amongst the stuff I've seen is:
    Code:
    1. href="#" onclick="MyFunction();return false;"
    
    2. href="#null" onclick="MyFunction();return false;"
    
    3. href="NoJavaScriptAbility.htm" onclick="MyFunction();return false;"
    
    4. href="#" onclick="return MyFunction();"
    
    5. href="javascript:;" onclick="return MyFunction();"
    
    6. href="javascript://" onclick="return MyFunction();"
    
    7. href="javascript:void(0);" onclick="return MyFunction();"
    
    8. href="javascript:MyFunction();"
    What about what shows in the Status bar? Should I have an OnMouseOver event too to describe what MyFunction is going to do? Rather than displaying a meaningless link.

    Anything else to note? (This function is part of a library being reused for major web site development over the next however many years, and not for single-project build-and-throw-away, so all possible functionality, including The Kitchen Sink!, is up for consideration).

    Thanks

    Kristen

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    There is no "good", "better" or "best" way to do it - there is one right way and plenty of wrong ways.

    In order to verify form data you use form's onsubmit event.
    <form onsubmit="return verify(this)">

    Browsers with JS disabled, browsers without JS, or with older incompliant versions will rely on server side data validation that you need to have anyway.

    When you need to envoke a script on a page you use an element the script acts upon. To initiate some action you can use span element:
    <span onclick="scriptFunction()">

    When the scripting is such that alternative content is in order
    !!! "alternative content" is different from "This page requires Javascript" message!!!
    you use anchor element in the following manner
    <a href="alternativeContent.html" onclick="return scriptFunction()">
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #3
    New to the CF scene
    Join Date
    May 2004
    Location
    Suffolk, GB
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Vladdy
    In order to verify form data you use form's onsubmit event.
    <form onsubmit="return verify(this)">
    In effect this is what we do. We use a validation script that "hooks" the onsubmit event; we then place an anchor tag to trigger the SUBMIT function (allowing flexible use of CSS for formatting etc.) which calls a function which:
    • Sets an "Action" code for server-side
      (e.g. Save/Delete/Clone etc.)
    • Tickles onsubmit()
      If onsubmit() returns TRUE it:
      • Hides the "body" of the page to indicate processing
      • Calls submit()


    Quote Originally Posted by Vladdy
    you use anchor element in the following manner
    <a href="alternativeContent.html" onclick="return scriptFunction()">
    That's what I'll run with, thanks. Presumably if I don't care about alternative content using "#" is the most appropriate option?

    Kristen

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by kristenbm
    <snip /> Presumably if I don't care about alternative content using "#" is the most appropriate option?

    Kristen
    No, if you are not linking anywhere, use <span>
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #5
    New Coder
    Join Date
    Feb 2006
    Posts
    60
    Thanks
    2
    Thanked 0 Times in 0 Posts

    this reference

    Quote Originally Posted by kristenbm
    Code:
    8. href="javascript:MyFunction();"
    Kristen
    I'd just like to add, href="javascript:MyFunction( this );" has caused me many problems!

    The 'this' reference seems lost somehow, but is okay when triggered with onclick.

    This kept me up for a long time! I seem to remember people warning against href="javascript: before... I'm starting to see why.

  • #6
    New Coder
    Join Date
    Oct 2010
    Posts
    99
    Thanks
    10
    Thanked 1 Time in 1 Post
    woops.. wrong thread


  •  

    Posting Permissions

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