Question

<form id="formReg" action="reg.php" method="post">
. . . 
<button id="sub">Register</button>
</form>

This works, but I want to place button #sub outside the form tag, and run the form processing using jquery:

$("#sub").click( function() {
    $.post( $("#formReg").attr("action")),
    $("#formReg :input").serializeArray();      
});

It doesn’t work. Is it possible at all ?

Answer 1

Well, it probably doesn’t work because the form submission cancels the calling of any further event listeners. You should do form processing like this:

$("#formReg").on('submit', function() {
    // process form
    // You can even stop the form submission here,
    // just return 'false' and it will stop.
    // That's very useful for form validation etc.
});

If you need that button to submit the form, you could do this:

$("#sub").on('click', function() {
    $("#sub").submit(); // This will submit the form AND call the event listener. Nice, eh?
});

That should work whereever the button is on the page.

EDIT:
Thanks, fibreFoX, for remembering me of the deprecation of .click() and .submit()!

EDIT 2:
Musa is right, you used $.post() incorrectly. But I don’t know if the AJAX request actually completes if the user gets thrown of the page by the form submission. If you don’t want the user to go to the page the form is submitted to, you should return false from the submit listener.