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
|
<!DOCTYPE html>
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
<div class="entry-content">
<div class="entry-title roundTop">
<h1 class="jq-clearfix">.submit()</h1>
<div class="entry-meta jq-clearfix">
Categories:
<span class="category"><a href="http://api.jquery.com/category/events/" title="View all posts in Events">Events</a> > <a href="http://api.jquery.com/category/events/form-events/" title="View all posts in Form Events">Form Events</a></span> | <span class="category"><a href="http://api.jquery.com/category/forms/" title="View all posts in Forms">Forms</a></span>
</div>
</div>
<div id="submit1" class="entry method">
<h2 class="jq-clearfix roundTop section-title">
<span class="name">.submit( handler(eventObject) )</span> <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#jQuery">jQuery</a></span>
</h2>
<div class="jq-box roundBottom entry-details">
<p class="desc"><strong>Description: </strong>Bind an event handler to the "submit" JavaScript event, or trigger that event on an element.</p>
<ul class="signatures">
<li class="signature" id="submit-handlereventObject">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.submit( handler(eventObject) )</h4>
<p class="arguement"><strong>handler(eventObject)</strong>A function to execute each time the event is triggered.</p>
</li>
<li class="signature" id="submit-eventData-handlereventObject">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.4.3/">1.4.3</a></span>.submit( [eventData], handler(eventObject) )</h4>
<p class="arguement"><strong>eventData</strong>A map of data that will be passed to the event handler.</p>
<p class="arguement"><strong>handler(eventObject)</strong>A function to execute each time the event is triggered.</p>
</li>
<li class="signature" id="submit"><h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.submit()</h4></li>
</ul>
<div class="longdesc">
<p>This method is a shortcut for <code>.bind('submit', handler)</code> in the first variation, and <code>.trigger('submit')</code> in the third.</p>
<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>
<blockquote><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></blockquote>
<p>For example, consider the HTML:</p>
<pre><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></pre>
<p>The event handler can be bound to the form:</p>
<pre>$('#target').submit(function() {
alert('Handler for .submit() called.');
return false;
});</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>$('#other').click(function() {
$('#target').submit();
});</pre>
<p>After this code executes, clicks on <span class="output">Trigger the handler</span> 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>
</div>
<h3 id="notes-0">Additional Notes:</h3>
<div class="longdesc"><ul><li>Forms and their child elements should not use input names or ids that conflict with properties of a form, such as <code>submit</code>, <code>length</code>, or <code>method</code>. Name conflicts can cause confusing failures. For a complete list of rules and to check your markup for these problems, see <a href="http://kangax.github.com/domlint/">DOMLint</a>.
</li></ul></div>
<h3>Examples:</h3>
<div class="entry-examples" id="entry-examples">
<div id="example-0">
<h4>Example: <span class="desc">If you'd like to prevent forms from being submitted unless a flag variable is set, try:</span>
</h4>
<pre class="prettyprint"><code class="example demo-code"><!DOCTYPE html>
<html>
<head>
<style>
p { margin:0; color:blue; }
div,p { margin-left:10px; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
</head>
<body>
<p>Type 'correct' to validate.</p>
<form action="javascript:alert('success!');">
<div>
<input type="text" />
<input type="submit" />
</div>
</form>
<span></span>
<script>
$("form").submit(function() {
if ($("input:first").val() == "correct") {
$("span").text("Validated...").show();
return true;
}
$("span").text("Not valid!").show().fadeOut(1000);
return false;
});
</script>
</body>
</html></code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div id="example-1">
<h4>Example: <span class="desc">If you'd like to prevent forms from being submitted unless a flag variable is set, try:</span>
</h4>
<pre class="prettyprint"><code class="example">$("form").submit( function () {
return this.some_flag_variable;
} );</code></pre>
</div>
<div id="example-2">
<h4>Example: <span class="desc">To trigger the submit event on the first form on the page, try:</span>
</h4>
<pre class="prettyprint"><code class="example">$("form:first").submit();</code></pre>
</div>
</div>
</div>
</div>
</div>
</body></html>
|
