I have a rather basic form (using the POST method) that I want to submit when the user clicks on a link (outside said form). I also have a submit button in the form, which works perfectly, so it's not a problem with the form per se.
Basically, what I have is (simplified, obviously):
HTML
<form method="post" id="searchForm" action="[absolute https URL]">
<!-- (some text fields, checkboxes, select elms, hidden fields, a submit button) -->
</form>
<a href="#" class="close">Confirm</a>
JS
} else if ($(e.target).is('a.close')) {
// do some stuff (<- this works)
// ...
// then submit form
$('#searchForm').submit(); // <- no effect
// $('#searchForm').trigger('submit'); // also no effect
// document.forms['searchForm'].submit(); // still nothing
console.log($('#searchForm')); // <- this works
}
My problem is: the .submit(); line doesn't seem to do anything. The form isn't submitted (the page doesn't even reload), and no error appear in the browser console either. I know the code is triggered when clicking the link because of the console.log inside it (which also confirms that the form element is found (length 1)).
There's no other form on the page, and no other element with the id "searchForm". As far as I can tell, no event handler is bound to the form element.
What am I missing? What should I check for?