JBB JBB - 1 month ago 7
jQuery Question

Why jQuery $('#form').submit(); works perfectly BUT Not $('#form').submit(function(){...});?

When I try to submit a form with jQuery, a simple

$('#form').submit();


works perfectly but

$('#form').submit(function(){...});


is purely and simply ignored.
No error message, no nothing.
It move on and proceed the rest of my code just fine.

The closer issue I've found here is this one:
JQuery form submit with function not working
It works better but the submit() reload the page and cancel the benefit of the Ajax.
So unfortunatly, it doesn't works for me :(

Here is my entire code (I reduced the true project to the simplest for test purpose) :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>please help</title>
<link href="../htdocs/css/styles.css" rel="stylesheet">
</head>
<body>

<form id="myForm" method="post">
<input name="key01" type="checkbox" id="key01" checked>
<input name="key02" type="checkbox" id="key02" checked>
<input name="key03" type="checkbox" id="key03" checked>
<input name="key04" type="checkbox" id="key04" checked>
<input name="key05" type="checkbox" id="key05" checked>

<div id="testBtn">test submit</div>
</form>

<div id="resultDisplay"></div>

<script src="../htdocs/js/jquery-2.2.4.min.js"></script>
<script src="../htdocs/js/icheck.min.js"></script>
<script type="application/javascript">
$(function () {
$('#testBtn').click(function () {
console.log('click out');
$('#myForm').submit(function () {
console.log('click In');
$.ajax({
method: 'POST',
url: 'myResult.php',
data: $(this).serialize()
}).done(function (data) {
console.log('data back');
$("#resultDisplay").html(data);
}).fail(function () {
alert("error");
});
});
});
});
</script>

</body>
</html>


The only console.log I have is the first one outside the submit function.
I tried with alert instead, with get method, with differents jQuery versions on Apache and nginx server...
it's all the same :'(

PHP : 5.6.23
jQuery 2.2.4 (several versions tested)

Please help, I'm desperate :(

Answer

Actually $('#form') returns an array and the properly way of performing it is by specifying what array's item will perform the given function:

$("#form")[0].submit(function(){
    //do the stuff
})