1.在一些前台应用中或AJAX应用的时候,我们经常会遇到填充或取得整个form的需求。如果一个个的值去复制,很显然。数十个字段,很难想象,情况惨不忍睹啊。污染了页面是小,可是加大啦劳动量。
可以参考下面的代码。有空的时候,可以自己动手写一个Jquery 的插件。2个方法,一个自动获取form中的值,这个方法意义不大,因为现有的jquery.form插件formSerial()方法做到了。但是该插件好像没有对form 控件进行填充的功能。 有空,研究下。
下面的代码,是从某网站copy下来的,仅为自己做个参考而已!
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function getFrmQryStr(frmID) {
var obj = eval("document." + frmID);
if (obj == null)
obj = document.getElementById(frmID);
if (obj == null) return "";
var i, queryString = "", and = "";
var item; // for each form's object
var itemValue; // store each form object's value
var frmtype = obj.nodeName.toUpperCase();
if (frmtype == "FORM") {
for (i = 0; i < obj.length; i++) {
item = obj.elements[i]; // get form's each object
if (item != null && item.name != undefined && item.name != '') {
if (item.type == 'select-one') {
itemValue = item.options[item.selectedIndex].value;
}
else if (item.type == 'checkbox' || item.type == 'radio') {
if (item.checked == false) {
continue;
}
itemValue = item.value;
}
else if (item.type == 'button' || item.type == 'submit' || item.type == 'reset' || item.type == 'image') {
continue;
}
else {
itemValue = item.value;
}
itemValue = encodeURIComponent(itemValue);
queryString += and + item.name + '=' + itemValue;
and = "&";
}
}
}
else if (frmtype == "DIV") {
queryString = getFrmValues(obj);
}
return queryString;
}
function getFrmValues(obj) {
var item = null;
var itemValue = null;
var str = "";
for (var i = 0; i < obj.childNodes.length; i++) {
item = obj.childNodes[i];
if (item == null || item == undefined) continue;
if (item.name != undefined && item.name != null && item.name != '') {
if (item.type == 'select-one') {
itemValue = item.options[item.selectedIndex].value;
}
else if (item.type == 'checkbox' || item.type == 'radio') {
if (item.checked == false) {
continue;
}
itemValue = item.value;
}
else if (item.type == 'button' || item.type == 'submit' || item.type == 'reset' || item.type == 'image') {
continue;
}
else {
itemValue = item.value;
}
itemValue = encodeURIComponent(itemValue);
if (str != "") str += "&";
str += item.name + '=' + itemValue;
}
if (item.childNodes.length > 0) {
var temp = getFrmValues(item);
if (temp != "") {
if (str != "") str += "&";
str += temp;
}
}
}
return str;
}
function getdata() {
var str = getFrmQryStr("div");
alert(str);
}
</script>
</head>
<body>
<div>
<form id="frm" name="frm" action="" method="post">
<div id="div">
<input type="text" id="txt1" name="txt1" value="1" />
<div>
<input type="text" id="txt2" name="txt2" value="2" />
<select id="sel" name="sel">
<option value="hxh" selected="selected">China</option>
</select>
<input type="hidden" id="Text1" name="txt3" value="hidden" />
<input type="checkbox" id="chk" name="chk" value="chk " checked="checked" />
<input type="radio" id="rad1" name="rad" value="1111" />
<input type="radio" id="Radio1" name="rad" value="1222" />
<input type="radio" id="Radio2" name="rad" value="13333" checked="checked" />
<span>
<input type="text" id="txt3" name="txt3" value="3" /></span>
</div>
</div>
<input type="text" id="txt4" name="txt4" value="4" />
</form>
<input type="text" id="txt5" name="txt5" value="5" />
<br />
<button οnclick="getdata()">
Submit</button>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function getFrmQryStr(frmID) {
var obj = eval("document." + frmID);
if (obj == null)
obj = document.getElementById(frmID);
if (obj == null) return "";
var i, queryString = "", and = "";
var item; // for each form's object
var itemValue; // store each form object's value
var frmtype = obj.nodeName.toUpperCase();
if (frmtype == "FORM") {
for (i = 0; i < obj.length; i++) {
item = obj.elements[i]; // get form's each object
if (item != null && item.name != undefined && item.name != '') {
if (item.type == 'select-one') {
itemValue = item.options[item.selectedIndex].value;
}
else if (item.type == 'checkbox' || item.type == 'radio') {
if (item.checked == false) {
continue;
}
itemValue = item.value;
}
else if (item.type == 'button' || item.type == 'submit' || item.type == 'reset' || item.type == 'image') {
continue;
}
else {
itemValue = item.value;
}
itemValue = encodeURIComponent(itemValue);
queryString += and + item.name + '=' + itemValue;
and = "&";
}
}
}
else if (frmtype == "DIV") {
queryString = getFrmValues(obj);
}
return queryString;
}
function getFrmValues(obj) {
var item = null;
var itemValue = null;
var str = "";
for (var i = 0; i < obj.childNodes.length; i++) {
item = obj.childNodes[i];
if (item == null || item == undefined) continue;
if (item.name != undefined && item.name != null && item.name != '') {
if (item.type == 'select-one') {
itemValue = item.options[item.selectedIndex].value;
}
else if (item.type == 'checkbox' || item.type == 'radio') {
if (item.checked == false) {
continue;
}
itemValue = item.value;
}
else if (item.type == 'button' || item.type == 'submit' || item.type == 'reset' || item.type == 'image') {
continue;
}
else {
itemValue = item.value;
}
itemValue = encodeURIComponent(itemValue);
if (str != "") str += "&";
str += item.name + '=' + itemValue;
}
if (item.childNodes.length > 0) {
var temp = getFrmValues(item);
if (temp != "") {
if (str != "") str += "&";
str += temp;
}
}
}
return str;
}
function getdata() {
var str = getFrmQryStr("div");
alert(str);
}
</script>
</head>
<body>
<div>
<form id="frm" name="frm" action="" method="post">
<div id="div">
<input type="text" id="txt1" name="txt1" value="1" />
<div>
<input type="text" id="txt2" name="txt2" value="2" />
<select id="sel" name="sel">
<option value="hxh" selected="selected">China</option>
</select>
<input type="hidden" id="Text1" name="txt3" value="hidden" />
<input type="checkbox" id="chk" name="chk" value="chk " checked="checked" />
<input type="radio" id="rad1" name="rad" value="1111" />
<input type="radio" id="Radio1" name="rad" value="1222" />
<input type="radio" id="Radio2" name="rad" value="13333" checked="checked" />
<span>
<input type="text" id="txt3" name="txt3" value="3" /></span>
</div>
</div>
<input type="text" id="txt4" name="txt4" value="4" />
</form>
<input type="text" id="txt5" name="txt5" value="5" />
<br />
<button οnclick="getdata()">
Submit</button>
</div>
</body>
</html>
本文转自 randy_shandong 51CTO博客,原文链接:http://blog.51cto.com/dba10g/281180,如需转载请自行联系原作者