Bug Tracker

#11205 closed bug (invalid)

Opened January 21, 2012 08:32PM UTC

Closed March 25, 2012 08:14AM UTC

Last modified May 16, 2014 09:51AM UTC

.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.

Attachments (0)
Change History (7)

Changed January 21, 2012 08:57PM UTC by Chealer comment:1

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>

Changed January 23, 2012 09:52PM UTC by sindresorhus comment:2

component: unfiled → misc
owner: → 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.

Changed January 23, 2012 10:02PM UTC by sindresorhus comment:3

owner: sindresorhus
status: assigned → open

Changed January 23, 2012 10:20PM UTC by Chealer comment:4

Thanks.

I don't know if it was wrong for old versions, but it seems wrong with the current. I tested with Iceweasel 8.

Changed March 10, 2012 01:36PM UTC by dmethvin comment:5

owner: → Chealer
status: open → pending

The handler returns false, which prevents the form being submitted. That seems correct to me. Or am I missing something?

Changed March 25, 2012 08:14AM UTC by trac-o-bot comment:6

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!

Changed May 16, 2014 09:51AM UTC by oelmekki comment:7

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()

[1] https://api.jquery.com/submit/