-
Notifications
You must be signed in to change notification settings - Fork 265
/
submit.xml
127 lines (123 loc) · 5.02 KB
/
submit.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<?xml version="1.0"?>
<entries>
<desc>Bind an event handler to the "submit" event, or trigger that event on an element.</desc>
<entry type="method" name="on" return="jQuery">
<title>submit event</title>
<desc>Bind an event handler to the "submit" event.</desc>
<signature>
<added>1.7</added>
<argument name=""submit"" type="string">
<desc>The string <code>"submit"</code>.</desc>
</argument>
<argument name="eventData" type="Anything" optional="true">
<desc>An object containing data that will be passed to the event handler.</desc>
</argument>
<argument name="handler" type="Function">
<desc>A function to execute each time the event is triggered.</desc>
<argument name="eventObject" type="Event" />
</argument>
</signature>
<longdesc>
<div class="warning">
<p>This page describes the <code>submit</code> event. For the deprecated <code>.submit()</code> method, see <a href="/submit-shorthand/"><code>.submit()</code></a>.</p>
</div>
<p>The <code>submit</code> event is sent to an element when the user is attempting to submit a form. It can only be attached to <code><form></code> elements. Forms can be submitted either by clicking an explicit <code><input type="submit"></code>, <code><input type="image"></code>, or <code><button type="submit"></code>, or by pressing <kbd>Enter</kbd> when certain form elements have focus.</p>
<div class="warning">
<p>Depending on the browser, the Enter key may only cause a form submission if the form has exactly one text field, or only when there is a submit button present. The interface should not rely on a particular behavior for this key unless the issue is forced by observing the keypress event for presses of the Enter key.</p>
</div>
<p>For example, consider the HTML:</p>
<pre><code>
<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></code></pre>
<p>The event handler can be bound to the form:</p>
<pre><code>
$( "#target" ).on( "submit", function( event ) {
alert( "Handler for `submit` called." );
event.preventDefault();
});
</code></pre>
<p>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 <code>.preventDefault()</code> on the event object or by returning <code>false</code> from our handler. We can trigger the event manually when another element is clicked:</p>
<pre><code>
$( "#other" ).on( "click", function() {
$( "#target" ).trigger( "submit" );
} );
</code></pre>
<p>After this code executes, clicks on <samp>Trigger the handler</samp> will also display the message. In addition, the default <code>submit</code> action on the form will be fired, so the form will be submitted.</p>
<p>The JavaScript <code>submit</code> event does not bubble in Internet Explorer. However, scripts that rely on event delegation with the <code>submit</code> event will work consistently across browsers as of jQuery 1.4, which has normalized the event's behavior. </p>
</longdesc>
<note id="domlint" type="additional"/>
<example>
<desc>If you'd like to prevent forms from being submitted unless a flag variable is set, try:</desc>
<code><![CDATA[
$( "form" ).on( "submit", function( event ) {
if ( $( "input" ).first().val() === "correct" ) {
$( "span" ).text( "Validated..." ).show();
return;
}
$( "span" ).text( "Not valid!" ).show().fadeOut( 1000 );
event.preventDefault();
} );
]]></code>
<css><![CDATA[
p {
margin: 0;
color: blue;
}
div,p {
margin-left: 10px;
}
span {
color: red;
}
]]></css>
<html><![CDATA[
<p>Type 'correct' to validate.</p>
<form action="javascript:alert( 'success!' );">
<div>
<input type="text">
<input type="submit">
</div>
</form>
<span></span>
]]></html>
</example>
<example>
<desc>If you'd like to prevent forms from being submitted unless a flag variable is set, try:</desc>
<code><![CDATA[
$( "form" ).on( "submit", function() {
return this.some_flag_variable;
} );
]]></code>
</example>
<example>
<desc>To trigger the submit event on the first form on the page, try:</desc>
<code><![CDATA[
$( "form" ).first().trigger( "submit" );
]]></code>
</example>
<category slug="events/form-events"/>
<category slug="forms"/>
<category slug="version/1.0"/>
<category slug="version/1.7"/>
</entry>
<entry type="method" name="trigger" return="jQuery">
<title>submit event</title>
<desc>Trigger the "submit" event on an element.</desc>
<signature>
<added>1.0</added>
<argument name=""submit"" type="string">
<desc>The string <code>"submit"</code>.</desc>
</argument>
</signature>
<longdesc>
<p>See the description for <a href="#on1"><code>.on( "submit", ... )</code></a>.</p>
</longdesc>
<category slug="events/form-events"/>
<category slug="version/1.0"/>
</entry>
</entries>