一个表单多个按钮提交

在做到表单的提交的时候,如果是一个按钮提交的话,对应一个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>
### 使用一个按钮提交多个HTML表单的实现方法 在Web开发中,通常一个表单提交操作由一个`<form>`标签和一个提交按钮绑定。然而,在某些业务场景中(如CRM系统的任务记录编辑),需要实现一个按钮提交多个表单的需求,例如同时提交任务信息和跟进记录[^1]。这种情况下,可以通过以下几种方式实现。 #### 1. 使用JavaScript进行手动提交 通过JavaScript监听按钮点击事件,依次提交多个表单。这种方式不依赖HTML原生表单提交机制,而是通过脚本控制多个表单的数据发送。 示例代码如下: ```html <form id="form1" action="/submit-form1" method="post"> <input type="text" name="field1" /> </form> <form id="form2" action="/submit-form2" method="post"> <input type="text" name="field2" /> </form> <button type="button" onclick="submitForms()">提交所有</button> <script> function submitForms() { document.getElementById('form1').submit(); document.getElementById('form2').submit(); } </script> ``` 这种方式的优点是实现简单,适用于表单数量较少且不需要复杂校验的场景。但需注意浏览器对多个`submit`调用的执行顺序和并发限制[^1]。 #### 2. 合并表单数据并通过AJAX提交 如果多个表单需要提交到同一个后端接口,或者需要在提交前进行数据整合,可以将多个表单的数据合并后通过AJAX方式提交。这种方式可以避免页面刷新,提升用户体验。 示例代码如下: ```html <form id="form1"> <input type="text" name="field1" /> </form> <form id="form2"> <input type="text" name="field2" /> </form> <button type="button" onclick="submitAll()">提交所有</button> <script> function submitAll() { const formData1 = new FormData(document.getElementById('form1')); const formData2 = new FormData(document.getElementById('form2')); const combinedData = new FormData(); for (const [key, value] of formData1.entries()) { combinedData.append(key, value); } for (const [key, value] of formData2.entries()) { combinedData.append(key, value); } fetch('/submit-combined', { method: 'POST', body: combinedData }); } </script> ``` 此方法适用于需要前后端协作、数据校验、异步提交等复杂交互场景[^1]。 #### 3. 使用隐藏的iframe进行无刷新提交 在某些不支持AJAX的旧浏览器环境中,可以使用隐藏的`<iframe>`来实现多个表单的无刷新提交。每个表单的`target`属性设置为该iframe的name,这样提交时页面不会跳转。 示例代码如下: ```html <iframe name="hiddenFrame" style="display:none;"></iframe> <form action="/submit-form1" method="post" target="hiddenFrame"> <input type="text" name="field1" /> </form> <form action="/submit-form2" method="post" target="hiddenFrame"> <input type="text" name="field2" /> </form> <button type="submit">提交所有</button> ``` 此方法适用于兼容性要求较高的场景,但实现复杂度较高,且难以进行数据回传和状态反馈[^1]。 ### 总结 实现一个按钮提交多个HTML表单的核心思路是通过脚本控制表单提交流程,或者通过数据合并机制统一提交。根据项目的技术栈、兼容性要求和用户体验需求,可以选择适合的实现方式。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值