471,897 Members | 2,045 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,897 software developers and data experts.

onsubmit in form in Safari (windows)


I have a problem (only in Safari) with the onsubmit in webforms. This topic covers the same subject: http://bytes.com/topic/javascript/an...nsubmit-safari but not as detailed as I will.

Let me illustrate the problem with examples.
Expand|Select|Wrap|Line Numbers
  1. <html>
  3. <head>
  4. <script type="text/javascript" src="/js/mootools_1_11.js"></script>
  5. <script type="text/javascript">
  6. function postForm(f, c) {
  7. //    $(f).send({onComplete: c});
  8.     return false;
  9. }
  10. </script>
  11. </head>
  13. <body>
  15. <form method="post" action="other_page.html" onsubmit="return postForm(this,function(t){alert(t.length);});">
  16.     <input type="text" name="oele" value="boele" />
  17.     <input type="submit" value="Submit" />
  18. </form>
  20. </body>
  22. </html>
As you can see, Mootools is my JS library (love it!). The onsubmit calls postForm with the form and a handler functions as arguments. postForm should than post the form with Ajax and call the handler ($(form).send() does that). The postForm functions returns false, and the onsubmit returns postForm, so that FALSE is in fact returned to the webform. With the $(f).send() commented (like now), it "works": the form isn't posted and the page doesn't change. But Ajax does nothing! With the (very important) line uncommented, the form posts! The page changes! << ONLY in Safari! The rest (firefox, chrome, internet explorer and opera) work fine.

So I thought, maybe returning false just isn't enough SOMETIMES (because obviously sometimes it IS enough). So Mootools has a stop function for events (where the submit is the event). So I added this to the postForm function:
Expand|Select|Wrap|Line Numbers
  1. new Event(window.event).stop();
making the function look like this:
Expand|Select|Wrap|Line Numbers
  1. function postForm(f, c) {
  2.     new Event(window.event).stop();
  3.     $(f).send({onComplete: c});
  4.     return false;
  5. }
In a way that was a solution: the form didn't post anymore and the page didn't change. But the Ajax request didn't fire either!! So the event.stop() halted the entire event and it's child process(es)! Again: in Firefox, Chrome, IE and Opera, this method works fine.

Does anyone know the problem and a solution? It doesn't have to be pretty, but it has to be possible with Mootools. Thanks a bunch
Attached Files
File Type: txt form.html.txt (492 Bytes, 283 views)
File Type: txt mootools_1_11.js.txt (93.0 KB, 535 views)
Jan 2 '10 #1
2 4525
16,027 Expert Mod 8TB
I don't know if this might be the solution, but often when something like this happens, there's a JavaScript error which causes it, i.e. when there's an error in the script, the rest of the code will be ignored and the form will be posted. That means there may be a problem in the Mootools send method in Safari. Not definite by any means, but something you could look into.
Jan 8 '10 #2
A litte late but very thankful.
acoder, you were absolutely right. And the error was my own fault :( I edited the mootools lib so that Safari didn't understand it anymore, which led to a very indirect javascript Type error.
And now it works! Perfect!
Jun 13 '10 #3

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by JM Rosengard | last post: by
3 posts views Thread by Amir Michail | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.