#11205 closed bug (invalid)
.submit() documentation example is outdated/incorrect about effect of trigerring submit
| Reported by: | Chealer | Owned by: | Chealer |
|---|---|---|---|
| Priority: | low | Milestone: | None |
| Component: | misc | Version: | |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
http://api.jquery.com/submit/ contains:
For example, consider the HTML:
<form id="target" action="destination.html">
<input type="text" value="Hello there" />
<input type="submit" value="Go" />
</form>
<div id="other">
Trigger the handler
</div>
The event handler can be bound to the form:
$('#target').submit(function() {
alert('Handler for .submit() called.');
return false;
});
Now when the form is submitted, the message is alerted. This happens prior to the actual submission, so we can cancel the submit action by calling .preventDefault() on the event object or by returning false from our handler. We can trigger the event manually when another element is clicked:
$('#other').click(function() {
$('#target').submit();
});
After this code executes, clicks on Trigger the handler will also display the message. In addition, the default submit action on the form will be fired, so the form will be submitted.
The last sentence is not correct, at least with current jQuery. Comments 5 and 6 in http://bugs.jquery.com/ticket/4930 suggest that jQuery's behavior changed.
Change History (7)
comment:1 Changed 10 years ago by
comment:2 Changed 10 years ago by
| Component: | unfiled → misc |
|---|---|
| Owner: | set to sindresorhus |
| Priority: | undecided → low |
| Status: | new → assigned |
Thanks for taking time to submit this ticket. In the future, please provide a testcase on jsfiddle.
I have created a jsfiddle for you: http://jsfiddle.net/mofle/hf87J/
Seems like the last sentence is wrong for every jQuery version. Using the code from the documentation in the jsfiddle shows that it doesn't submit the form when clicking on #other. At least in Chrome 16.
comment:3 Changed 10 years ago by
| Owner: | sindresorhus deleted |
|---|---|
| Status: | assigned → open |
comment:4 Changed 10 years ago by
Thanks. I don't know if it was wrong for old versions, but it seems wrong with the current. I tested with Iceweasel 8.
comment:5 Changed 10 years ago by
| Owner: | set to Chealer |
|---|---|
| Status: | open → pending |
The handler returns false, which prevents the form being submitted. That seems correct to me. Or am I missing something?
comment:6 Changed 10 years ago by
| Resolution: | → invalid |
|---|---|
| Status: | pending → closed |
Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!
comment:7 Changed 8 years ago by
This ticket is not invalid.
Here is an other jsfiddle demonstrating the documentation is wrong : http://jsfiddle.net/hf87J/1/
And before saying "this is perfectly normal, preventDefault() is called", read the documentation. This code is a pure paste of example code in documentation [1], which specifically states thereafter :
After this code executes, clicks on Trigger the handler will also display the message. In addition, the default submit action on the form will be fired, so the form will be submitted.
This is wrong. The form will not be submitted.
To anyone having problem with that, a workaround is to call the native submit() :
$( '#target' ).get(0).submit()
I can't see how to add an attachment. Here's a test:
<!DOCTYPE html> <html> <head> <title>jQuery behavior demonstration</title> <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $('#target').submit(function() { alert('Handler for .submit() called.'); return false; }); $('#other').click(function() { $('#target').submit(); }); }); </script> </head> <body> <form id="target" action="destination.html"> <input type="text" value="Hello there" /> <input type="submit" value="Go" /> </form> <div id="other"> Trigger the handler </div> </body> </html>