如何在具有 Ajax 的单个表单中使用多个提交按钮 [关闭]
Posted
技术标签:
【中文标题】如何在具有 Ajax 的单个表单中使用多个提交按钮 [关闭]【英文标题】：How to use multiple Submit buttons in a single form having Ajax [closed] 【发布时间】：2017-02-03 18:51:53 【问题描述】：我正在构建一个使用 mysql 作为后端的简单网站。我有一个表单，它有 2 个按钮，其中一个从 db 搜索数据并使用 Ajax 填充页面，另一个按钮将新值更新为 db。现在我的问题是我不能将两个按钮都用作“提交”按钮。
Ajax 方法和 html 表单：
<script type="text/javascript">
$(document).ready(function()
$(document).on('submit', '#update-form', function()
var data = $(this).serialize();
$.ajax(
type : 'POST',
url : 'search.php',
data : data,
success : function(data)
$(".display").html(data);
);
return false;
);
);
</script>
<body>
<div id="update" class="tab-pane fade">
<form id="update-form" role="form" class="container" method="post" action="search.php">
<h3>Update details</h3>
<table class="display">
<tr class="space">
<td><label>File Number:</label></td>
<td><input type="text" class="form-control" name="filenum" required></td>
</tr>
</table>
<button type="submit" class="btn btn-default text-center" name="search_btn" >Search</button>
<button type="submit" class="btn btn-default text-center" name="submit_btn" formaction="update.php">Update</button>
</form>
</div>
</body>
现在我想知道如何修改上面的代码，以便我可以使用两个按钮作为提交。
尝试使用formaction 但由于使用了Ajax方法，它不起作用。
【问题讨论】：
为什么需要它们都作为提交按钮？ 不需要了。找到解决方案。 【参考方案1】：您可以通过多种方式做到这一点。
我首先想到的是： 将按钮类型更改为按钮而不是提交并添加 onclick 属性
<button type="button" onclick="submitForm('search.php')">Search</button>
<button type="button" onclick="submitForm('update.php')">Update</button>
然后在你的javascript中：
function submitForm(url)
var data = $("$update-form").serialize();
$.ajax(
type : 'POST',
url : url,
data : data,
success : function(data)
$(".display").html(data);
);
【讨论】：
完美解决方案。工作很棒。谢谢！【参考方案2】：在 jquery 中，您可以触发提交。检查这个：https://api.jquery.com/submit/
您创建一个 div 或其他，并在 jquery 中向该 div 添加一个侦听器：
<div id="button">Here my button</div>
在 jquery 中
$('#button').on('click', function()
$('#update-form').submit()
【讨论】：
我在上面的代码中使用了它，但我有多个提交按钮。我的要求是我想为两个按钮设置不同的目标。 （我建议您再次阅读我的问题） 在两个做不同事情的按钮上添加一个点击监听器？【参考方案3】：<form id="update-form">
...
...
<button type="button" class="submitForm" formaction="search.php">Search</button>
<button type="button" class="submitForm" formaction="update.php">Update</button>
</form>
然后是你的 JS：
$('.submitForm').click(function()
$.ajax(
method: 'post',
url: $(this).attr('formaction),
data: $("#update-form").serialize(),
...
...
success: function()
);
);
【讨论】：
此方法使用提交按钮的标准“formaction”属性，这在转换具有许多提交按钮的现有纯 HTML 表单时非常有用。【参考方案4】： $(document).ready(function()
$(document).on('submit', '#update-form', function()
var data = $(this).serialize();
$.ajax(
type : 'POST',
url : 'search.php',
data : data,
success : function(data)
$(".display").html(data);
);
return false;
);
$(document).on('click', '#update-btn', function()
var data = $("input[name='filenum']").val(); //Handle how you want
$.ajax(
type : 'POST',
url : 'update.php',
data : data,
success : function(data)
$(".display").html(data);
);
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="update" class="tab-pane fade">
<form id="update-form" role="form" class="container" method="post" action="search.php">
<h3>Update details</h3>
<table class="display">
<tr class="space">
<td><label>File Number:</label></td>
<td><input type="text" class="form-control" name="filenum" required></td>
</tr>
</table>
<button type="submit" class="btn btn-default text-center" name="search_btn" >Search</button>
<button form='forn-is-not-exist' class="btn btn-default text-center" name="submit_btn" id="update-btn" >Update</button>
</form>
</div>
</body>看看
【讨论】：
以上是关于如何在具有 Ajax 的单个表单中使用多个提交按钮 [关闭]的主要内容，如果未能解决你的问题，请参考以下文章