之前使用了很多Jquery的表单插件,一直用的很不舒服,不能满足我现在的工作,所以就萌生了自己写一个插件的想法,于是就有了JFormJS
在开发使用的时候只要导入jForm.values.min.js文件就可以了
用于HTML的表单初始化赋值和表单数据提交的轻量级Jquery插件
类型 | 配置 |
---|---|
text、textarea | data-text=”text” |
checkbox | data-text=”checkbox” |
select | data-text=”select” |
radio | data-text=”radio” |
目前只支持Json格式数据进行表单初始化
调用方式:
forms.resetValues(formID,jsonData);
Demo
<body>
<div>
<form method="post" id="formDemo">
<input name="first" type="text" data-text="text">
<textarea name="firstArea" cols="20" rows="5" data-text="text"></textarea>
<input type="checkbox" name="checkboxFirst" value="1" data-text="checkbox">1
<input type="checkbox" name="checkboxFirst" value="2" data-text="checkbox">2
<select name="selectFirst" data-text="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="radio" name="radioFisrt" value="1" data-text="radio">1
<input type="radio" name="radioFisrt" value="2" data-text="radio">2
</form>
</div>
</body>
<script>
$(function(){
setValue();
function setValue(){
var json={first:"11",firstArea:"22",checkboxFirst:[1],checkboxSecond:[4],selectFirst:3,radioFisrt:2,radioSecond:2};
forms.resetValues("formDemo",json);
}
});
</script>
最后获取得到的是Json对象
调用方式
forms.values(formID);
Demo
<body>
<div>
<form method="post" id="formDemo">
<input name="first" type="text" data-text="text">
<textarea name="firstArea" cols="20" rows="5" data-text="text"></textarea>
<input type="checkbox" name="checkboxFirst" value="1" data-text="checkbox">1
<input type="checkbox" name="checkboxFirst" value="2" data-text="checkbox">2
<select name="selectFirst" data-text="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="radio" name="radioFisrt" value="1" data-text="radio">1
<input type="radio" name="radioFisrt" value="2" data-text="radio">2
<button onclick="getValue();">确定</button>
</form>
</div>
</body>
<script>
function getValue(){
forms.values("formDemo");
}
</script>
以上