Bug Tracker

Opened 5 years ago

Closed 5 years ago

Last modified 3 years ago

#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 5 years ago by Chealer

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>

comment:2 Changed 5 years ago by sindresorhus

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 5 years ago by sindresorhus

Owner: sindresorhus deleted
Status: assigned → open

comment:4 Changed 5 years ago by Chealer

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 5 years ago by dmethvin

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 5 years ago by trac-o-bot

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 3 years ago by oelmekki

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/

Note: See TracTickets for help on using tickets.