By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,616 Members | 1,184 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,616 IT Pros & Developers. It's quick & easy.

onsubmit in form in Safari (windows)

P: 7
Gents,

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.
The HTML:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.  
  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>
  12.  
  13. <body>
  14.  
  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>
  19.  
  20. </body>
  21.  
  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. }
  6.  
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, 229 views)
File Type: txt mootools_1_11.js.txt (93.0 KB, 472 views)
Jan 2 '10 #1
Share this Question
Share on Google+
2 Replies


acoder
Expert Mod 15k+
P: 16,027
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

P: 7
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.