使用jq来实现同一表单提交到不同的地址,共用表单from

°C local_li
下载地址: 下载包(1)

使用这个方法首先要调用jquery的一个from表单的提交插件这个插件可以去jquery的官网上下载,名字 jquery-form.js ,也可以直接下载上面的。

其实主要思路就是,利用 jq 获取到表单元素,调用他的 prop() 来改变  action 的值,然后再调用 ajaxSubmit()方法来提交表单。但是记住,在每次修改 action 的值之前一定要调用 reset()方法重置表单。


首先找到要提交的Form表单,然后使用action这个方法,然后用post来提交这个方法。
action=“路径”,method=“提交方法”,这里我用的是post这个方法,但除了这个方法还有很多其他如get方法。看自己需要什么方法就去调用就可以了。

<form id="activity_from" action="" method="post">


接下来这个路径就要去处理了,之需要在掉用的function里面加上from表单的路径即可。
这里有两种弹出模态框一个新增一个修改,但提交的form表单都是一个form表单只是设置的路径不一样而已,这里可以看到新增模态框里面的# avticity_form  这个form表单的调用路径设置,porp这个方法然后prop(a,b)里面a为设置路径的方法,b为设置的路径。
之后可以看到修改模态框里面的路径与新增的路径是不一样的。这样就可以达成一个form表单提交新增与修改了。

//点击新增按钮,要将表单中value清空   add_activity是新增按钮
$('#add_activity').on("click", function () {
    $("#activity_from")[0].reset()    //重置表单
    //可以在这里做一些你需要的操作
    $("#activity_from").prop("action","ActivityAdvanced/addActivityAdvanced")    //重新修改action的提交地址
})
//修改按钮
$('#upd_activity').on("click", function () {
    $("#activity_from")[0].reset()    //重置表单
    //可以在这里做一些你需要的操作
    $("#activity_from").prop("action","ActivityAdvanced/ActivityAdvanced")    //重新修改action的提交地址
})

写完了提交的路径接下来就开始保存了,接下来用ajaxSubmit这个方法来提交表单,这个方法可以把表单的内容给提交到控制器里面去。用ajax这个方法提交表单就不需要再去声明变量来接收表单数据。

// 点击提交,也就是保存新增或者是修改
$('#save_form').on('click', function () {
 
 //可以加一些判断,比如输入框不能为空 来决定是否调用下面这个方法,该方法是提交表单
 //_toastr()这个方法是我自定义的方法,弹出提示框,
            $("#activity_from").ajaxSubmit(function (res) {
                console.log(res)
                if (res) {
                    _toastr("success", "添加成功!重新刷新页面")
                }else _toastr("error", "添加失败!")
            })
});



上一篇: java工程师学习路线

下一篇: 小艾课程表-loding效果