<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 ?
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.
why dont u place the button outside (as you said) and call just this:
$("#formReg").submit();
btw: you should use this to bind events
$("#sub").on("click", function(){
... your code ...
});
Try this
$("#sub").click( function() {
$.post( $("#formReg").attr("action"), $("#formReg").serialize());
});
Note I have remove the semi-colon after the serialize method and am calling serialize() on the form element. This is if you want to do it using Ajax.
If you just want to submit the form, use this
$("#sub").click( function() {
$("#formReg").submit();
});
