一个表单多个按钮提交

在做到表单的提交的时候,如果是一个按钮提交的话,对应一个action。只需要将form表单属性method=”post” action=”aasubmit”(aasubmit是一个action名字,只需要在后台写上此方法即可)
可是如果是多个按钮,如何将一个表单与多个方法关联呢?
思路是这样的:先不指定表单的action,让action属性为“”,method=“post”,为你的button写onclick方法,注意这里每一个button的onclick方法是一样的,只是传递的参数不一样,这里的参数只是起到标记是哪一个button的作用。
最后根据传递的参数不同,可以判断是来自哪一个按钮的消息,再为表单设置方法并提交。

<form name="form1" method="post" action="" id="form1">
<input type="button" id="querrybyid" value="ID查询" onclick="is_submit(1)"/>
<input type="button" id="querrybyname" value="片名查询" onclick="is_submit(2)" />
<input type="button" id="querrybyprice" value="价格查询" onclick="is_submit(3)" />
<input type="button" id="querrybyison" value="是否上映查询" onclick="is_submit(4)" />
<script>
    function is_submit(value) {
        var form1 = $("#form1");
        if (value == 1) {          
            var id = $("#id").val();
            form1.action = "/Test/querrybyid?id="+id;
             $("#form1").attr("action",form1.action);
            form1.submit();
        }
        if (value == 2) {
            var title = $("#title").val();
            form1.action = "/Test/querrybyname?title=" + title;
            $("#form1").attr("action", form1.action);
            form1.submit();

        }
        if (value == 3) {
            var minprice = $("#minprice").val();
            var maxprice = $("#maxprice").val();
            form1.action = "/Test/querrybyprice?minprice=" + minprice + "&maxprice=" + maxprice;
            $("#form1").attr("action", form1.action);
            form1.submit();
        }
        if (value == 4) {
            var ison = $(":radio[name='ison']:checked").val()
            form1.action = "/Test/querrybyison?ison=" + ison;
            $("#form1").attr("action", form1.action);
            form1.submit();
        }
    }


</script>
  • 5
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
可以使用 JavaScript 来实现多个表单共用一个提交的功能。具体实现步骤如下: 1. 给每个表单添加一个 class 或 ID,用于标识不同的表单。 2. 给提交按钮添加一个点击事件,获取所有表单的数据,并进行提交。 3. 在点击事件中,使用 `document.querySelectorAll()` 方法获取所有表单元素,然后遍历每个表单,获取表单数据,并将数据拼接成一个对象。 4. 最后将获取到的数据对象使用 Ajax 或表单提交方式进行提交。 下面是一个简单的示例代码,供参考: HTML 代码: ```html <form class="form1"> <input type="text" name="username" /> <input type="password" name="password" /> </form> <form class="form2"> <input type="text" name="email" /> <input type="text" name="phone" /> </form> <button id="submitBtn">提交</button> ``` JavaScript 代码: ```js const submitBtn = document.querySelector('#submitBtn'); submitBtn.addEventListener('click', () => { const forms = document.querySelectorAll('form'); const data = {}; forms.forEach((form, index) => { const formData = new FormData(form); for (let [key, value] of formData.entries()) { data[`form${index + 1}_${key}`] = value; } }); // 使用 Ajax 或表单提交方式进行提交 // ... }); ``` 在上面的代码中,我们将表单数据拼接成了一个对象 `data`,并通过 `data` 对象来传递数据。在实际开发中,可以根据需求来选择使用 Ajax 或表单提交方式进行提交

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值