jQuery submit not working in Opera

Question

I have a simple form which can be submitted outside the element via a small jQuery Script.

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

The button is just a normal 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 always redirects to my home page, not to the url of the form action. I have tried setting the action in the script (as above) and normally within the form action parameter but with no luck. I'm running that latest jQuery and Opera.

Please help

Edit: I'm also using the jQuery UI framework to handle some of the content and interactions

Savanna

Hello, apparantly Opera wants to know what kind of target page you want to adress. Have you also tried to submit the form in a normal HTML way? If so did it work? – Rearrange

What is your html code for the #mybutton? – Gestalt

What does the markup for the button look like? Is it inside the form? – Wrac

@reporter when I submit the form via the normal way it works fine. It is only when I use the other button it breaks. – Savanna

@pointy the button is outside the form. – Savanna

OK so it's not a <button> or an <input type="button">; it's an anchor (an <a>). – Wrac

@bpneal: does Opera change the action property? remove the submit() at the end $('#myform').attr() to see if it does – Skelly

@bpneal Does it work if you add onClick="return false" to your submit link? – Rearrange

@dany opera correctly updates the action, because if I remove the sumbit, the form action will still change. – Savanna

Answer 1

I believe it will be something to do with, with the currently incomplete jquery ui select class. It adds an a tag with a href as # i believe this may be your problem.

Stilla

Ive had a look at the UI class and yes it does use # in the href. This appears to redirect the page on the submit for some reason. Changing this is the jQuery UI script stops this. Thanks – Savanna

Answer 2

First thing I would 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 that you have to be careful that the browser doesn't get confused over the semantics. I don't have a lot of experience debugging things on Opera, but that's the first thing I'd suspect.

If there's no real "href" associated with the "button", I would question why it's an <a> tag at all; it could be just a simple <span>, which can also have a click handler attached but which does not have any potentially-problematic native behavior.

Wrac

Answer 3

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

Edit: As the other answer said, you will first have to call event.preventDefault(); before doing anything on the click event, as that prevents the browser from redirecting you.

Edit2: The right 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.

Kid

the form action is probably subject to change – Skelly

@dany: Got it, changed the answer, which was incorrect anyway. – Kid

The a tag was more of an example rather than a design choice. I've changed it into a span and included the preventDefault command but still get the same problem. – Savanna