This repository has been archived by the owner on Oct 8, 2021. It is now read-only.
/
forms-sample.html
executable file
·90 lines (71 loc) · 4.92 KB
/
forms-sample.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Sample Form Submit</title>
<link rel="stylesheet" href="../../themes/default/" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script src="../../js/jquery.js"></script>
<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
<script src="../_assets/js/jqm-docs.js"></script>
<script src="../../js/"></script>
</head>
<body>
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="f">
<h1>Forms</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<h2>Ajax form submission</h2>
<p>In jQuery Mobile, form submissions are automatically handled using Ajax whenever possible, creating a smooth transition between the form and the result page. To ensure your form submits as intended, be sure to specify <code>action</code> and <code>method</code> properties on your form element. When unspecified, the method will default to <code>get</code>, and the <code>action</code> will default to the current page's relative path (found via <code>$.mobile.path.get()</code></p>
<p>Forms also accept attributes for transitions just like anchors, such as <code>data-transition="pop"</code> and <code>data-direction="reverse"</code>. To submit a form without Ajax, you can either disable Ajax form handling globally, or per form via the <code>data-ajax="false"</code> attribute. The <code>target</code> attribute (as in <code>target="_blank"</code>) is respected on forms as well, and will default to the browser's handling of that target when the form submits. Note that unlike anchors, the <code>rel</code> attribute is not allowed on forms.</p>
<h2>Non-Ajax handling</h2>
<p>To prevent form submissions from being automatically handled with Ajax, add the <code>data-ajax="false"</code> attribute to the form element. You can also turn of Ajax form handling completely via the <code>ajaxEnabled</code> <a href="../api/globalconfig.html">global config option</a>.</p>
<h2>Simple Ajax form example</h2>
<p>This page demonstrates automated ajax handling of form submissions. The form below is configured to send regular a <code>get</code> request to <code>forms-sample-response.php</code>. On submit, jQuery Mobile will make sure that the Url specified is able to be retrieved via Ajax, and handle it appropriately. Keep in mind that just like ordinary HTTP form submissions, jQuery Mobile allows <code>get</code> result pages to be bookmarked by updating the Url hash when the response returns successfully. Also like ordinary form submissions, <code>post</code> requests do not contain query parameters in the hash, so they are not bookmarkable.</p>
<form action="forms-sample-response.php" method="get">
<fieldset>
<div data-role="fieldcontain">
<label for="shipping" class="select">Choose shipping method:</label>
<select name="shipping" id="shipping">
<option value="Standard shipping">Standard: 7 day</option>
<option value="Rush shipping">Rush: 3 days</option>
<option value="Express shipping">Express: next day</option>
<option value="Overnight shipping">Overnight</option>
</select>
</div>
<button type="submit" data-theme="a" name="submit" value="submit-value">Submit</button>
</fieldset>
</form>
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>More in this section</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Form elements</li>
<li><a href="docs-forms.html">Form basics</a></li>
<li><a href="forms-all.html">Form element gallery</a></li>
<li><a href="texts/index.html">Text inputs</a></li>
<li><a href="forms-search.html">Search inputs</a></li>
<li><a href="forms-slider.html">Slider</a></li>
<li><a href="forms-switch.html">Flip toggle switch</a></li>
<li><a href="radiobuttons/index.html">Radio buttons</a></li>
<li><a href="checkboxes/index.html">Checkboxes</a></li>
<li><a href="selects/index.html">Select menus</a></li>
<li><a href="forms-themes.html">Theming forms</a></li>
<li><a href="forms-all-native.html">Native form elements</a></li>
<li data-theme="a"><a href="forms-sample.html">Submitting forms</a></li>
<li><a href="plugin-eventsmethods.html">Plugin methods</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>© 2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>