如何使用jQuery提交表单并指定使用哪个提交按钮

How to use jQuery to submit a form and specify which submit button to use

本文关键字：提交 按钮 何使用 jQuery 表单      更新时间：2023-09-26

假设表单有多个提交按钮:

...
<button type="submit" value="deletefoo">Delete Foo</button>
<button type="submit" value="deletebar">Delete Bar</button>
<button type="submit" value="Edit">Edit</button>
...

我拦截点击只有2个删除按钮和禁用表单提交触发一个自定义模态对话框，其中有OK和CANCEL按钮，以确认用户的选择。如果用户按OK，我想提交表单。如果取消，那么对话框被取消，什么也不会发生。

我已经连接了第一部分来触发对话框，但是我不知道如何在对话框中获得OK按钮来触发表单提交，这取决于原始提交按钮被按下的位置(例如，如果按下Delete按钮，我想与用户确认他们想要删除，然后如果是这样，正常提交表单。

我已经四处搜索并查看了jQuery文档，但还没有找到答案，所以我一定错过了一些非常简单的东西。

更新:我不想使用JS的确认函数。在我上面的原始问题中，由于各种原因，我希望使用自定义模态对话框。

查看JS的confirm函数并将其作为onclick事件。

你这里有一个很好的例子

为什么不让它们成为常规按钮然后onclick设置一个变量来确定动作类型然后在表单提交时包含这个隐藏变量并检查它来找到你应该做的

首先，您必须拦截两个(所有)按钮，您可以通过获取特定表单中的任何提交按钮轻松做到这一点，然后您可以询问问题，并且给定您仍然有当前事件处理程序，您可以找出哪个按钮被按下并执行您想要的回调。例如:

 <form id="myform">
   <button type="submit" value="delete">Delete</button>
   <button type="submit" value="Edit">Edit</button>
</form>

, 

$(function() {
  $("form#myform button[type='submit']").click(function(ev) {
    ev.preventDefault();
    if (confirm("you sure")) {
        var action = $(ev.currentTarget).val();
        console.log(action);    
    }
   });
});

JSLint在这里:http://jsfiddle.net/r48Cb/

基本上，console.log(action)将根据原始点击输出"删除"或"编辑"。如何处理这个值取决于你。一个switch语句，一个简单的if块可以工作，但这取决于你，我不知道你的应用程序的范围。

窗口。Confirm函数如果用户选择ok返回true，如果用户取消返回false。使用这个逻辑，你可以这样做:

<button id="delete" type="submit" value="delete">Delete</button>
<button type="submit" value="Edit">Edit</button>
var question;
$("#delete").click(function(){question=window.confirm("Are you sure?");)
if (question){
    //Submit the form here
}
else{
    alert("Not deleted!");
}

我认为你把它弄得太复杂了，你可以做一些简单的事情，如:

<form >
  <input name="foo" value="foo">
  <button name="sub0" value="sub0" onclick="
    return window.confirm('sure?');
  ">submit 0</button>
  <button name="sub1" value="sub1" onclick="
    return window.confirm('sure?');
  ">submit 1</button>
</form>

如果用户在确认对话框中单击OK，则表单将从按下的按钮提交。如果不是，它就不会。

My 2c:

... (edited: removed the value parameter. buttons don't need that)
<button onclick='deleteFoo(); ' >Delete Foo</button>
<button onclick='deleteBar(); ' >Delete Bar</button>
<button onclick='allowEdit(); ' >Edit</button>   
...
function deleteFoo() {
    do-your-modal-whichever-way-you-want;
    if confirmed, 
         $('#form-id').attr('action','your-action-for-delete-foo');
         $('#form-id').submit();
    else-just-return
}

function deleteBar() {
    do-your-modal-whichever-way-you-want;
    if confirmed, 
         $('#form-id').attr('action','your-action-for-delete-bar');
         $('#form-id').submit();
    else-just-return
}

function allowEdit() {
    whatever
}
相关文章：