利用ajaxSubmit提交的时候,解决多个input name相同的问题

有时候我们在移动端提交表单的时候,为了不让submit按钮提交后,页面跳转到form action的地址,我们可能会用ajax form 插件来提交整个表单。

按钮会就这么写

<form>
<input name="test" value="test1" />
<input name="test" value="test2" />
<input name="test" value="test3" />
<button type="button">submit</button>
</form>

js部分,移动端如果用zepto的话 会这么写


$("button").on("tap",function(){
  $("form").ajaxSubmit({
   url: "https://www.goggle.com/",
   type:post,
   success:function(){
   alert("success!");
  return false; //防止页面跳转
}

});
});
如果用zepto 的 ajax form插件提交整个表单的话,含有相同name 的input 提交到服务器后,最后一个往往会覆盖前面所有的,服务器端接收的时候,只能看到最后一个value值。

通过查看zepto.form.min.js 这个插件的源码的时候发现里面这段js

items.each(function(index) {
	params[this.name] = this.value;
		});

这个直接把所有相同的属性的值给覆盖掉了,为了达到目的,能上传多个相同name的input的值,我在这里进行了一点点小的改动,成功可以提交了

items.each(function(index) {
			if (params[this.name] == undefined) {
				params[this.name] = this.value
			} else {
				params[this.name] += "," + this.value
			}
		});
特地查看了一下jquery 的ajax form插件,发现这个是完好的,所以如果有小伙伴用到了 zepto.form.min.js这个插件的时候,并且需要提交多个name相同的input的时候可以用以上办法解决。附上完整的zepto.form.min.js的代码,自行拷贝后,压缩一下就能直接调用。

(function($) {
	$.fn.ajaxSubmit = function(options) {
		var form = this;
		var formAction = form.attr("action");
		var formMethod = form.attr("method");
		if (formMethod == null || !/^(POST|GET)$/i.test(formMethod.trim())) {
			formMethod = "GET"
		}
		var params = new Object();
		var items = form.find("input[type=hidden]," + "input[type=text]," + "input[type=password]," + "textarea," + "select," + "input[type=radio]:checked," + "input[type=checkbox]:checked");
		items.each(function(index) {
			if (params[this.name] == undefined) {
				params[this.name] = this.value
			} else {
				params[this.name] += "," + this.value
			}
		});
		var dataType = options.dataType;
		if (dataType == null) {
			dataType = "json"
		}
		var success = options.success;
		if (success == null) {
			success = function() {}
		}
		$.ajax({
			type: formMethod,
			url: formAction,
			data: params,
			dataType: dataType,
			success: success
		})
	}
})(Zepto);










  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

问问那只猫

老板大气~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值