JQuery submit not working in Opera

Question

I have a simple form that can be represented outside an element through a little jQuery Script.

<script type="text/javascript"> $(document).ready(function() { $('#mybutton').click(function(){ $('#myform').attr('action', '/url/to/form').submit(); }); }); </script> 

The button is a regular link.

 <a href="javascript:void(0);" id="mybutton">Just a normal link</a> 

The form is just a normal form.

 <form id="myform" action="/url/to/form"> .... <input type="submit" value="Search"> </form> 

This works fine in IE, FF, Chrome, and Safari, but not for Opera. In Opera, it is always redirected to my home page, not the form URL. I tried to set the action in a script (as indicated above) and usually in the form action parameter, but no luck. I am running the latest jQuery and Opera.

Please, help

Edit: I also use jQuery UI to handle some content and interactions

Answer 1

I believe this will have something to do with it since currently incomplete jquery ui is choosing a class. It adds a tag with href as # I believe this may be your problem.

Answer 2

The first thing I would like to do is change the handler to prevent the default action for the link:

  $('#mybutton').click(function(ev){ ev.preventDefault(); $('#myform').attr('action', '/url/to/form').submit(); }); 

Using <a> tags for buttons means you have to be careful that your browser doesn't get confused with semantics. I don't have much experience debugging things in Opera, but this is the first thing I suspected.

If there is no real "href" associated with the "button", I would question why it is a <a> tag at all; it could just be a <span> , which might also have an attached click handler, but that doesn't have potentially problematic behavior.

Answer 3

Try just $('#myform').submit(); instead of $('#myform').attr('action', '/url/to/form').submit();

Edit: as another answer said, you first need to call event.preventDefault(); before doing anything in the click event, as this prevents browser redirection.

Edit2: The correct code would be:

 <script type="text/javascript"> $(document).ready(function() { $('#mybutton').click(function(event){ event.preventDefault(); $('#myform').attr('action', '/url/to/form').submit(); }); }); 

This should work fine.