Jquery submit form error

Question

I have a form which I want to submit upon button click which is outside the form, here is my HTML :

<form id="checkin" name="checkin" id="checkin" action="#" method="post">
    <input type="text" tabindex="100" class="identifier" name="identifier" id="identifier">
    <input type="submit" tabindex="101" value="Submito" class="elsubmito" name="submit">
</form>

Here is my jQuery :

$("button").live('click', function() {
    $("#checkin").submit();
});

$("#checkin").live('submit', function() {

});

When I click submit button inside the form its submitting ok, but its not submitting when I click on the button which is outside the form tags, why? how can I fix this ?

Answer 1

you can have a simple hyperlink outside of your form like this
<a href="javascript: $('form checkin').submit()"> click to submit </a>
and that's all you need

Answer 2

You are selecting all the <button> elements but you are trying to select an <input>.

It works when it is inside the form because the the normal submit functionality runs.

Change the selector to match the element you actually have: input[type=submit]

Better yet, forget about the JS and just structure your HTML better so that the submit button is inside the form.

Answer 3

If you're handling the form processing using JavaScript, then you'll want to return false in your button and form processing code.

I was able to achieve identical results using the JavaScript below, and the two HTML examples (with the button inside and outside of the form element).

JavaScript/jQuery

    $("button").live('click', function() {
        $("#checkin").submit();
        return false;
    });

    $("#checkin").live('submit', function(){
        alert("Hello world!");
        return false;
    });

HTML Example 1

Button inside the form.

<form id="checkin" name="checkin" id="checkin" action="" method="post">
    <input type="text" tabindex="100" class="identifier" name="identifier" id="identifier">
    <input type="submit" tabindex="101" value="Submito" class="elsubmito" name="submit">
    <button>test</button>
</form>

HTML Example 2

Button outside the form.

<form id="checkin" name="checkin" id="checkin" action="" method="post">
    <input type="text" tabindex="100" class="identifier" name="identifier" id="identifier">
    <input type="submit" tabindex="101" value="Submito" class="elsubmito" name="submit">

</form>

<button>test</button>

As I said, both examples performed as expected. You may want to double-check your button listening code to ensure that you are in fact using the button element. If you're using an element with the id attribute set to button, then you'll want to ensure you are using the proper jQuery selector:

$("#button").live('click', function() { // ...