如何使用一个提交按钮提交三个表单
How to submit three forms with one submit button
我想用一个按钮提交 3 份表格:
<form id="#formEditUsername">
//Code
</form>
<form id="#formEdituseremail">
//Code
</form>
<form id="#new_password_form">
//Code
</from>
<button type="submit" class="btn btn-success" id="btnUpdate">Save</button>
我知道最好的方法可能是 Ajax,但我不确定我会怎么做;为前两个表单创建两个 AJAX 函数,然后在提交第三个表单时调用这些函数?
试试这个
$(document).ready(function() {
$("#btnUpdate").click(function() {
$.post($("#formEditUsername").attr("action"), $("#formEditUsername").serialize(),
function() {
$.post($("#formEdituseremail").attr("action"), $("#formEdituseremail").serialize(),
function() {
$.post($("#new_password_form").attr("action"), $("#new_password_form").serialize(),
function() {
alert('All forms submitted');
});
});
});
});
});
正如@Jari提到的,您可以简单地从前两个表单中收集数据并将它们一起提交。
注意:此 aproach 要求输入name
属性在所有三种形式中是唯一的。
AJAX 调用的简单示例:
var firstFormData = $("#formEditUsername").serialize();
var secondFormData = $("#formEdituseremail").serialize();
var thirdFormData = $("#new_password_form").serialize();
$.post(
URL, // target URL of your choice
firstFormData + secondFormData + thirdFormData
);
<form id="#formEditUsername" class="frmToSubmit" method="post">
//Code
</form>
<form id="#formEdituseremail" class="frmToSubmit" method="post">
//Code
<form>
<form id="#new_password_form" class="frmToSubmit" method="post">
//Code
</from>
<script type="text/javascript">
$(document).ready(function() {
$("#btnUpdate").click(function() {
$(".frmToSubmit").submit();
});
});
</script>
相关文章:
- 为什么grunt contrib connect的中间件选项的第三个参数是未定义的
- 如何使用PHP和JS级联三个下拉列表
- 灯光问题(使用三个.js)
- 在三个.js中创建球体(例如地球)的磁力线
- 什么'这是从第三个函数上的async 1st函数获得结果的更好方法
- 在servlet中提交两个表单
- javascript第三个XMLHttpRequest被拒绝.但前两个是允许的
- 将循环中的两个文本框相乘,并在第三个文本框上显示结果
- 根据前两个下拉ID显示第三个下拉列表
- 通过Ajax一键提交多个表单
- 在数组JS中查找三个重复项
- 我如何让我的脚本连续提交两个表单
- Meteor和S3:如何通过一次上传/编辑定义三个不同的图像
- 保存两个模型(属于第三个模型)和一个提交
- 如何使用一个提交按钮提交三个表单
- 如果三个特定下拉字段中的三个全部为空,则禁用提交按钮
- 如何创建一个只有一个提交按钮的具有三个文本输入字段的表单
- 只允许三个按钮中的一个提交web表单
- 如何保存值到三个表单的数据库与一个提交在php
- 必须勾选最后三个复选框才能提交