JS 无限长form表单提交
1 简介
开发时候,总会遇到根据后台传的变量{组件数}来动态渲染组件的情况,比如后台传命令要绑定10个父子关系,则前台展开十个input组件,后台决定绑定5个福字关系,则前台展开5个input组件.再比如,每个门店可以针对每个商品类型设置安全库存,那么随着厂家生产的商品类别增加,则前端动态增加form->input组件.
思路:借用smarty魔板(没有smarty则需要js源生一个个添加组件),根据商品类别变量{$count} ,foreach渲染出表格;表格的每一行有input框.给每一行 <tr> 设置以固定字符串str+key的id,点击确定提交时,获取从str0到str{$count}的input值,集合到一个数组当中,ajax提交到api.
2 源码讲解
2.1 html部分
<table class="layui-table">
<thead>
<tr>
<th>产品ID</th>
<th>产品型号</th>
<th>产品名称</th>
<th>当前库存</th>
<th style="width: 15%; ">满库存值</th>
<th style="width: 15%; ">低库存值</th>
</tr>
</thead>
<tbody>
{foreach $have_inventories as $key =>$vo}
<tr id = "tb1tr{$key}">
<td>{$vo.product_id}</td>
<td>{$vo.product.type}</td>
<td>{$vo.product.name}</td>
<td>{$vo.now_inventory}</td>
<td><input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="layui-input" placeholder="请输入" name="max_inventory" value="{$vo.max_inventory}"></td>
<td><input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="layui-input" placeholder="请输入" name="min_inventory" value="{$vo.min_inventory}"></td>
</tr>
{/foreach}
{foreach $nohave_products as $key => $vo}
<tr id = "tb2tr{$key}">
<td>{$vo.id}</td>
<td>{$vo.type}</td>
<td>{$vo.name}</td>
<td>{$vo.now_inventory}</td>
<td><input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="layui-input" placeholder="请输入" name="max_inventory" value=""></td>
<td><input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="layui-input" placeholder="请输入" name="min_inventory" value=""></td>
</tr>
{/foreach}
</tbody>
</table>
2.2 js部分 (onclick事件)
var gettr1,id1,max1,min1 //初始化变量:tr1部分的节点,节点id->child值,节点id->input值
var gettr2,id2,max2,min2
var newdata = new Array(); //初始化数组
for(var i = 0;i<"{$have_count}";i++){
var itemobj = {
wid : 0,wtype : 0,prid : 0,max : 0,min : 0,
}
itemobj.wid = "{$warehouse_id}";
itemobj.wtype = "{$warehouse_type}";
gettr1 = document.getElementById('tb1tr'+i)
id1 = gettr1.children[0].innerHTML;
max1 = gettr1.children[4].children[0].value;
min1 = gettr1.children[5].children[0].value;
max1 = (max1 == ''||max1 == undefined)? 0:max1;
min1 = (min1 == ''||min1 == undefined)? 0:min1;
itemobj.prid = id1;
itemobj.max = max1;
itemobj.min = min1;
newdata.push(itemobj);
}
for(var i = 0;i<"{$nohave_count}";i++){
var itemobj = {
wid : 0,wtype : 0,prid : 0,max : 0,min : 0,
}
itemobj.wid = "{$warehouse_id}";
itemobj.wtype = "{$warehouse_type}";
gettr2 = document.getElementById('tb2tr'+i)
id2 = gettr2.children[0].innerHTML;
max2 = gettr2.children[4].children[0].value;
min2 = gettr2.children[5].children[0].value;
max2 = (max2 == ''||max2 == undefined)? 0:max2;
min2 = (min2 == ''||min2 == undefined)? 0:min2;
itemobj.prid = id2;
itemobj.max = max2;
itemobj.min = min2;
newdata.push(itemobj);
}
if(newdata.length == "{$have_count + $nohave_count}"){
$.ajax({
url: '{$action}',
type: 'POST',
dataType : "TEXT",
data: {
newdata:newdata,
do:'edit'
},
success:function(data){
data = eval("("+ data+ ")");
if(data.code === 0) {
layer.msg(data.msg, {icon: 1}, function(){
// 关闭本iframe层
// 父页面刷新
});
} else {
//报错
}
}
})
}else{
//报错
}
3 结尾
① 每个<tr>中有两个input,说明要用二维数组来提交(当然分成两个数组提交也可以,但没必要).js中,二维数组可以传入对象,每个对象存储一个<tr>的两个input值.
② 每次给数组添加对象时,需要重新生成一个新的对象,不然数组中所有一维数组都相同(因为是同一个对象,这个地方在下踩到了坑,为了简化代码,将对象初始化放到了全局)
③ 可以不选择id赋str+key的形式,可以直接遍历页面所有tr获取,只是个人觉得加了id将使得思路更清晰
JS 无限长form表单提交的更多相关文章
- js实现无刷新表单提交文件,将ajax请求转换为form请求方法
最近在做项目的时候遇到一个需要上传文件的需求,因为ajax请求是无法上传二进制文件流的,所以只能用form表单提交,而form提交有一个问题就是会使页面刷新,本文解决了form表单提交文件时页面刷新的 ...
- js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题
js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...
- Form表单提交,js验证
Form表单提交,js验证 1, Onclick() 2, Onsubmit() Button标签 input (属性 submit button )标签 Input type=button ...
- js的form表单提交url传参数(包含+等特殊字符)的解决方法
方法一:(伪装form表单提交) linkredwin = function(A,B,C,D,E,F,G){ var formredwin = document.createElemen ...
- jQuery Form 表单提交插件-----formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的 应用
一.jQuery Form的其他api 1. formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可 ...
- jQuery Form 表单提交插件----Form 简介,官方文档,官方下载地址
一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...
- ajax form表单提交 input file中的文件
ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...
- 2017-01-11小程序form表单提交
小程序form表单提交 1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了微信端,用小程序固定的格式前前端进行布局.事件触发和数据的输送和读取,服务器端可以用任何后端语言写,但 ...
- Form表单提交,Ajax请求,$http请求的区别
做过前端同学想必都避免不了要和后台server打交道.而以下这三种与后台交互的方式想必大家都不陌生. Form表单提交,Ajax请求,Angular的$http请求 以前一直搞不清楚什么时候应该用哪种 ...
随机推荐
- css与html基础收集
1.css去掉iPhone.iPad默认按钮样式 nput[type="button"], input[type="submit"], input[type=& ...
- 访问不了虚拟机 ubuntu中的myql,解决方案
============================================================== 1. 现象 2. 原因分析 2.1 访问虚拟机中的mysql的前提: 你的 ...
- Pycharm画五角星
import turtle turtle.setup(600,400,0,0) turtle.bgcolor('red') turtle.color('yellow') turtle.fillcolo ...
- python3 stack/ queue和deque模块
'''栈stack 先进后出FILO (first in last out)'''lst = []lst.append("张一山")lst.append("杨紫" ...
- 【RL-TCPnet网络教程】第6章 RL-TCPnet底层驱动说明
第6章 RL-TCPnet底层驱动说明 本章节为大家讲解RL-TCPnet的底层驱动,主要是STM32自带MAC的驱动实现和PHY的驱动实现. 6.1 初学者重要提示 6.2 KEI ...
- OSGi解决的问题
osgi最明显的缺陷 bundle尽管可以为隔离的服务建立独立生命周期管理的热部署方式,以及明确的服务导出和导入依赖能力,但是其最终基于jvm,无法对bundle对应的服务实现计算资源的隔离,一个服务 ...
- [Swift]LeetCode149. 直线上最多的点数 | Max Points on a Line
Given n points on a 2D plane, find the maximum number of points that lie on the same straight line. ...
- [Swift]LeetCode159.具有最多两个不同字符的最长子串 $ Longest Substring with At Most Two Distinct Characters
Given a string S, find the length of the longest substring T that contains at most two distinct char ...
- [Swift]LeetCode520. 检测大写字母 | Detect Capital
Given a word, you need to judge whether the usage of capitals in it is right or not. We define the u ...
- 起底区块链人脸识别黑马,一个没有人像的人脸识别:iFace Chain(爱妃链)
近几年来,人脸识别技术可谓在移动互联网中得到了空前广泛应用,从银行APP免密转账,人脸快捷支付到证券人脸开户,人脸识别技术已经应用到了移动互联的诸多应用场景.互联网无处不在的今天,便捷与安全貌似是一个 ...