Skip to content

Commit fb44f8a

Browse files
author
zhangxinxu
committed
form submit
add form submit
1 parent afad4b8 commit fb44f8a

File tree

7 files changed

+452
-10
lines changed

7 files changed

+452
-10
lines changed

‎src/mobilebone.js

Lines changed: 52 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,17 @@
5353
**/
5454
Mobilebone.captureLink = true;
5555

56+
/**
57+
* Whether catch events of 'submit' from <form> element
58+
* If the value set to false, <form> is a normal form except data-ajax="true"
59+
* If the value set to true, <form> will submit as a ajax request,
60+
and the return value will be used to create a new page and transition into meanwhile.
61+
However, if data-ajax="false", <form> won't submit as a ajax.
62+
*
63+
* @type boolean
64+
**/
65+
Mobilebone.captureForm = true;
66+
5667
/**
5768
* The root of transition-callback
5869
* Default value is 'root', you can consider as window-object.
@@ -150,8 +161,7 @@
150161

151162
// rules as follow:
152163
// data-* > data-params > options > defaults
153-
["title", "root", "form"].forEach(function(key) {
154-
164+
["title", "root", "form"].forEach(function(key) {
155165
_params[key] = element.getAttribute("data-" + key) || _dataparams[key] || options[key] || defaults[key];
156166
});
157167

@@ -182,7 +192,6 @@
182192
}
183193
});
184194

185-
186195
return _params;
187196
};
188197

@@ -243,6 +252,10 @@
243252
} else if (typeof onpagefirstinto == "function") {
244253
onpagefirstinto(pageInto, pageOut, options.response);
245254
}
255+
// capture form submit
256+
slice.call(pageInto.querySelectorAll("form")).forEach(function(form) {
257+
Mobilebone.submit(form);
258+
});
246259
}
247260

248261
// do callback when animation start/end
@@ -313,6 +326,9 @@
313326
var href = "", formdata = "", clean_url = "";
314327
if (trigger) {
315328
if (trigger.nodeType == 1) {
329+
// form element
330+
if (trigger.action) return trigger.getAttribute("action");
331+
// a element
316332
href = trigger.getAttribute("href");
317333
formdata = trigger.getAttribute("data-formdata") || trigger.getAttribute("data-data");
318334
} else if (trigger.url) {
@@ -387,7 +403,7 @@
387403
if (element_or_options) {
388404
if (element_or_options.nodeType == 1) {
389405
// legal elements
390-
if (element_or_options.href) {
406+
if (element_or_options.href || element_or_options.action) {
391407
page_title = element_or_options.getAttribute("data-title") || options.title;
392408
}
393409
response = options.response;
@@ -459,7 +475,7 @@
459475
* For ajax request to get HTML or JSON.
460476
461477
* @params trigger_or_options - Necessary
462-
1. dom-object. or~
478+
1. dom-object:<a>|<form>.
463479
2. object.
464480
* @returns undefined
465481
* @example Mobilebone.ajax(document.querySelector("a"));
@@ -475,6 +491,7 @@
475491
// default params
476492
var defaults = {
477493
url: "",
494+
type: "",
478495
dataType: "",
479496
data: {},
480497
timeout: 10000,
@@ -486,7 +503,7 @@
486503
complete: function() {}
487504
};
488505

489-
var params = {}, ele_mask = null;
506+
var params = {}, ele_mask = null, formData = null;
490507

491508
// if 'trigger_or_options' is a element, we should turn it to options-object
492509
var params_from_trigger = {}, attr_mask;
@@ -504,10 +521,16 @@
504521
}
505522
}
506523
}
507-
508-
// the ajax url is special, we need special treatment
524+
509525
params.url = this.getCleanUrl(trigger_or_options, params.url);
510526

527+
var tagName = trigger_or_options.tagName.toLowerCase();
528+
if (tagName == "form") {
529+
params.type = trigger_or_options.method;
530+
531+
formData = new FormData(trigger_or_options);
532+
}
533+
511534
// get mask element
512535
attr_mask = trigger_or_options.getAttribute("data-mask");
513536
if (attr_mask == "true" || attr_mask == "") {
@@ -548,7 +571,7 @@
548571

549572
// ajax request
550573
var xhr = new XMLHttpRequest();
551-
xhr.open("GET", params.url + (/\?/.test(params.url)? "&" : "?") + "r=" + Date.now(), params.async, params.username, params.password);
574+
xhr.open(params.type || "GET", params.url + (/\?/.test(params.url)? "&" : "?") + "r=" + Date.now(), params.async, params.username, params.password);
552575
xhr.timeout = params.timeout;
553576

554577
xhr.onload = function() {
@@ -607,7 +630,25 @@
607630
ele_mask.style.visibility = "hidden";
608631
};
609632

610-
xhr.send(null);
633+
xhr.send(formData);
634+
};
635+
636+
/**
637+
* capture form submit events to a ajax request.
638+
639+
* @params form: formElement. - Necessary
640+
* @example Mobilebone.form(document.querySelector("form"));
641+
*
642+
**/
643+
Mobilebone.submit = function(form) {
644+
if (!form || typeof form.action != "string") return;
645+
var ajax = form.getAttribute("data-ajax");
646+
if (ajax == "false" || (this.captureForm == false && ajax != "true")) return;
647+
648+
form.addEventListener("submit", function(event) {
649+
Mobilebone.ajax(this);
650+
event.preventDefault();
651+
});
611652
};
612653

613654

@@ -711,6 +752,7 @@
711752
});
712753
}
713754
}
755+
714756
// change flag-var for avoiding repeat init
715757
hasInited = true;
716758
};

‎test/form-submit/form.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
6+
<title>表单页面</title>
7+
<link rel="stylesheet" href="../../src/mobilebone.css">
8+
<link rel="stylesheet" href="../test.css">
9+
<link rel="stylesheet" href="zxx.lib.css">
10+
</head>
11+
12+
<body>
13+
<div id="searchResult" class="page out">
14+
<p class="p10">本表单提交至php页面，返回数据为动态数据，因此在Github上是提交不成功的。</p>
15+
<form method="post" action="submit.php" class="pl10 pr10">
16+
<div class="mt20">
17+
<label>用户名：</label>
18+
<div class="mt5"><input name="username" required></div>
19+
</div>
20+
<div class="mt20">
21+
<label>手机号：</label>
22+
<div class="mt5"><input name="tel" type="tel" required></div>
23+
</div>
24+
<div class="mt20">
25+
<input type="submit" class="submit" value="提交">
26+
</div>
27+
</form>
28+
</div>
29+
30+
<script src="../../src/mobilebone.js"></script>
31+
</body>
32+
</html>

‎test/form-submit/index.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
6+
<title>表单提交</title>
7+
<link rel="stylesheet" href="../../src/mobilebone.css">
8+
<link rel="stylesheet" href="../test.css">
9+
<link rel="stylesheet" href="zxx.lib.css">
10+
<style>
11+
input { font-size: 100%; }
12+
input[name] {
13+
height: 40px; width: 100%; padding: 10px; box-sizing: border-box;font-size: 100%;
14+
}
15+
.search { height: 40px; padding: 10px; box-sizing: border-box; }
16+
.submit { height: 40px; font-size: 16px; padding: 0 25px; }
17+
</style>
18+
</head>
19+
20+
<body>
21+
<div id="pageHome" class="page out">
22+
<ul>
23+
<li class="pl10">
24+
<form method="get" action="search.html">
25+
<input type="search" class="search mr10"><input type="submit" class="submit" value="搜索">
26+
</form>
27+
</li>
28+
</ul>
29+
<ul>
30+
<li><a href="form.html">点击动态加载一个表单</a></li>
31+
</ul>
32+
<ul>
33+
<li><a href="../index.html" data-ajax="false">&laquo; 返回测试引导首页</a></li>
34+
</ul>
35+
</div>
36+
37+
<script src="../../src/mobilebone.js"></script>
38+
</body>
39+
</html>

‎test/form-submit/search.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
6+
<title>搜索结果</title>
7+
<link rel="stylesheet" href="../../src/mobilebone.css">
8+
<link rel="stylesheet" href="../test.css">
9+
</head>
10+
11+
<body>
12+
<div id="searchResult" class="page out">
13+
<ul>
14+
<li class="p5 bgf0 mt1 btc">搜索结果1</li>
15+
<li class="p5 bgf0 mt1 btc">搜索结果2</li>
16+
<li class="p5 bgf0 mt1 btc">搜索结果3</li>
17+
<li><a href="#pageHome" data-rel="back">点此返回</a></li>
18+
</ul>
19+
</div>
20+
21+
<script src="../../src/mobilebone.js"></script>
22+
</body>
23+
</html>

‎test/form-submit/submit.php

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<?php
2+
if (isset($_POST['username']) == false || isset($_POST['tel']) == false) {
3+
header('Location: index.html', true);
4+
}
5+
6+
$username = $_POST['username'];
7+
$tel = $_POST['tel'];
8+
9+
echo '<div class="p10">
10+
<p>提交的用户名是：'. $username .'</p>
11+
<p>提交的手机号是：'. $tel .'</p>
12+
<ul><li><a href="index.html" data-ajax="false">刷新至初始态</a></li></ul>
13+
</div>';
14+
?>

0 commit comments

Comments
 (0)