-2

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?

s427
  • 1,454
  • 5
  • 17
  • 33

1 Answers1

3

OK, I found what caused this problem!

My submit button had the following HTML code:

<button type="submit" name="submit" id="submit"><span>Search</span></button>

It turns out, submit is a reserved word that should not be used as a name attribute (nor as an id, actually).

This is what prevented the form from being submitted.

After I changed both the id and name attributes for this button, my script worked like a charm.

s427
  • 1,454
  • 5
  • 17
  • 33