Question

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

...
<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按钮以触发表单提交取决于按下哪个原始提交按钮（例如，如果{{1}按下按钮，我想与用户确认要删除，如果是，请正常提交表单。

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

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

Answer 1

检查JS确认功能并将其作为onclick事件。

你有一个很好的例子here。

Answer 2

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

Answer 3

首先，您必须截取两个（所有）按钮，您可以通过获取特定表单中的任何提交按钮轻松地执行此操作，然后您可以提出您的问题并给出您仍然拥有当前事件处理程序，你可以弄清楚按下了什么按钮并进行你想要的回调。例如：

 <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块可以工作，但这取决于你，我不知道你的应用程序的范围。

Answer 4

如果用户选择ok，则window.confirm函数返回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!");
}

Answer 5

我认为你太复杂了，你可以做一些简单的事情：

<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>

如果用户在确认对话框中单击“确定”，则表单将从按下的任何按钮提交。如果没有，它就没有。

Answer 6

我的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
}

如何使用jQuery提交表单并指定要使用的提交按钮

6 个答案: