Strange Safari onClick problem

Discussion in 'Javascript' started by Jacqui, Apr 21, 2008.

  1. Jacqui

    Jacqui Guest

    Hi,

    I am trying to write a webpage that has a form on it, which gets
    submitted when a button is pressed, but also has an onclick event
    which does some DOM manipulation to display a waiting page.

    The issue that I am facing is that in Safari, a blank screen is being
    displayed rather than the waiting page. This is only happening if
    there are form tags around the button

    i.e., this works and brings up the waiting page:

    <input type="submit" name="submit" onclick='return interstitial();'/>

    whereas this does not:

    <form method="get" action="<slow loading page>">
    <input type="submit" name="submit" onclick='return
    interstitial();'/>
    </form>

    This does not appear to be a problem in Firefox/IE. Has anybody else
    faced this problem and would be willing to help me out with this?

    Many thanks in advance,
    Jacqui
    Jacqui, Apr 21, 2008
    #1
    1. Advertising

  2. Jacqui

    VK Guest

    On Apr 21, 12:57 pm, Jacqui <> wrote:
    > Hi,
    >
    > I am trying to write a webpage that has a form on it, which gets
    > submitted when a button is pressed, but also has an onclick event
    > which does some DOM manipulation to display a waiting page.
    >
    > The issue that I am facing is that in Safari, a blank screen is being
    > displayed rather than the waiting page. This is only happening if
    > there are form tags around the button
    >
    > i.e., this works and brings up the waiting page:
    >
    > <input type="submit" name="submit" onclick='return interstitial();'/>
    >
    > whereas this does not:
    >
    > <form method="get" action="<slow loading page>">
    > <input type="submit" name="submit" onclick='return
    > interstitial();'/>
    > </form>
    >
    > This does not appear to be a problem in Firefox/IE. Has anybody else
    > faced this problem and would be willing to help me out with this?


    <form method="GET"
    action="slow_loading_page.cgi"
    target="hidden_frame"
    onsubmit="return interstitial(this)">
    <!-- other form elements -->
    <input type="submit">
    </form>
    <iframe name="hidden_frame" src="blank.html"
    style="display: none !important"></iframe>

    where

    where interstetial does validation, sets waiting message and returns
    true

    Because form submission means leaving the current page, you have to
    dump the server output to a hidden frame, otherwise it has no sense to
    display any DOM waiting message - they will disappear a ms later.

    If you are using an ajaxoid to submit your form then respectively you
    have to cancel form submission and do the job manually, in such case
    iframe is not needed:

    <form method="GET"
    action="slow_loading_page.cgi">
    <!-- other form elements -->
    <input type="button" value="Submit"
    onclick="interstitial(this.form)">
    </form>

    1) interstitial has to show waiting message first, then over
    setTimeout proceed with form submission: otherwise the screen will
    never be updated.
    2) a fallback should be provided in case Javascript disabled. One of
    options:

    <script>
    document.write(''.concat(
    '<input type="button" value="Submit"',
    ' onclick="interstitial(this.form)">'));
    </script>
    <noscript>
    <input type="submit">
    </noscript>
    VK, Apr 21, 2008
    #2
    1. Advertising

  3. Jacqui wrote:

    > The issue that I am facing is that in Safari, a blank screen is being
    > displayed rather than the waiting page.  This is only happening if
    > there are form tags around the button
    >
    > i.e., this works and brings up the waiting page:
    >
    > <input type="submit" name="submit" onclick='return interstitial();'/>
    >
    > whereas this does not:
    >
    > <form method="get" action="<slow loading page>">
    >     <input type="submit" name="submit" onclick='return
    > interstitial();'/>
    > </form>


    Two errors in your logic:

    1. A user does not need to click the submit-button in order to submit
    the form; he might hit the Enter-key as well.

    2. http://www.w3.org/TR/html401/interact/scripts.html#adef-onclick

    | The onclick event occurs when the pointing device
    | button is clicked over an element. This attribute may
    | be used with most elements.

    (especially note the vague "most elements")

    And a few sentences higher:

    | Authors of HTML documents are advised that changes are
    | likely to occur in the realm of intrinsic events (e.g.,
    | how scripts are bound to events).

    Seems reason enough for me not to trust onclick-events for submit-
    buttons accross browsers.

    The recommended way:

    <form method="get" action="script.php"
    onsubmit="return interstitial();">
    <input type="submit">
    </form>

    --
    Bart
    Bart Van der Donck, Apr 21, 2008
    #3
  4. Jacqui

    Jacqui Guest

    On 21 Apr, 15:49, Bart Van der Donck <> wrote:
    > Jacqui wrote:
    > > The issue that I am facing is that in Safari, a blank screen is being
    > > displayed rather than the waiting page.  This is only happening if
    > > there are form tags around the button

    >
    > > i.e., this works and brings up the waiting page:

    >
    > > <input type="submit" name="submit" onclick='return interstitial();'/>

    >
    > > whereas this does not:

    >
    > > <form method="get" action="<slow loading page>">
    > >     <input type="submit" name="submit" onclick='return
    > > interstitial();'/>
    > > </form>

    >
    > Two errors in your logic:
    >
    > 1. A user does not need to click the submit-button in order to submit
    > the form; he might hit the Enter-key as well.
    >
    > 2.http://www.w3.org/TR/html401/interact/scripts.html#adef-onclick
    >
    >     | The onclick event occurs when the pointing device
    >     | button is clicked over an element. This attribute may
    >     | be used with most elements.
    >
    > (especially note the vague "most elements")
    >
    > And a few sentences higher:
    >
    >     | Authors of HTML documents are advised that changes are
    >     | likely to occur in the realm of intrinsic events (e.g.,
    >     | how scripts are bound to events).
    >
    > Seems reason enough for me not to trust onclick-events for submit-
    > buttons accross browsers.
    >
    > The recommended way:
    >
    >    <form method="get" action="script.php"
    >     onsubmit="return interstitial();">
    >    <input type="submit">
    >    </form>
    >
    > --
    >  Bart


    Hi,

    Thank you for your help. We have managed to get round this in the
    following manner:

    In the mark up created an interstitial panel which is included based
    on browser type. So when the browser is safari, it is then placed on
    the page in a hidden state. When the form is submitted a further
    check is carried out on browser type, if the browser is safari this is
    simply shown and the rest of the screen hidden using style: display
    block/none respectively. All other browser will create this page by
    doming.

    As it’s a loading issue: this gets around it by loading the content
    prior to a submit, just hidden on page until a submit is carried out.

    This is a bit hacky…but it works.

    Cheers,
    Jacqui
    Jacqui, Apr 23, 2008
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. bob
    Replies:
    3
    Views:
    183
  2. Replies:
    2
    Views:
    253
  3. Roger
    Replies:
    1
    Views:
    103
  4. Replies:
    4
    Views:
    176
  5. James Black

    onclick on option not working on IE or safari

    James Black, Apr 12, 2006, in forum: Javascript
    Replies:
    3
    Views:
    97
Loading...

Share This Page