Submit button outside the <form> tags [duplicate]

Question

I've been searching for two hours and I couldn't find any solutions.

I would like to have two submit buttons, one inside the < form > tag and one outside the < form > tag.

<form id="example" name="example" action="post">
    Input <input type="text" name="text" />
    <input type="submit" name="submit" value="submit" />
</form>

<div class="button">Submit</div>

JS / jQuery

$(".button").click( function() {
    alert("Button clicked");
}); 

How can I send the form with the ('.button') class outside the form ?

JS Fiddle here: http://jsfiddle.net/ZQLXb/

Answer 1

Use the submit() function to trigger the form submission:

$(".button").click( function() {
    $('#example').submit();
});

You can also use the trigger() function:

$(".button").click( function() {
    $('#example').trigger('submit');
});

Although they do exactly the same thing.

Answer 2

use submit() function to submit the form

$(".button").click( function() {
   $('#example').submit();
}); 

Answer 3

You could trigger the submit event on the form:

$('#example').trigger('submit')

Answer 4

$(".button").click( function() {
    $('#example').submit();
});