javascript - 一种表单中的两个提交按钮具有不同的操作

Question

我有一个用于编辑的页面，该页面包含一个带有两个按钮(确定和删除)的表单。我通过 PHP SELF 发送表单。页面顶部有两个函数，用于测试 POST 中接收到的内容，如果接收正常，则执行此操作，如果接收到 DELETE，则执行其他操作。按“删除”按钮，我会弹出“确认”消息，并且出现此问题。如果用户在“确认”窗口中单击“确定”，我尝试使用 Jquery 函数提交表单，但它不起作用。

    <?
     if(isset($_POST["delete_page"])){
       echo "DELETE PAGE";
     }
     if(isset($_POST["submit"])){
       echo "SUBMIT PAGE";
     }
    ?>


 <form role="form" data-toggle="validator" method="post" action="<?echo "$_SERVER[REQUEST_URI]";?>" id="update_page_frm">
    <button type="submit" class="btn btn-success" name="submit">אישור</button>
    <button type="button" class="btn btn-danger" name="delete_page" id="delete_page">הסר עמוד</button>
</form>

自定义.js:

$(document).ready(function() {
$('#delete_page').click(function() {
bootbox.confirm("Are you sure want to delete?", function(result) {
    if (result) {
        $("#update_page_frm").submit();
    }

     });
   });
 });

Answer 1

将多个操作与单个表单关联是相当常见的。更灵活的方法是不使用 native 提交类型按钮，而是使用 AJAX 请求处理这两个操作。例如:

function callAction(action, callback) {
     $.ajax({
         url: '/path/to/submit/to',
         data: {
              action: action,
              form: $('#update_page_frm').serialize()
         },
         success: function(response) {
             callback(response);
         }
    });
};

$('#update_page').on('click', function(e) {
    e.preventDefault();
    callAction('update', function(response) {
         console.log('All done!');
    });
});

$('#delete_page').on('click', function(e) {
    e.preventDefault();
    callAction('delete', function(response) {
         console.log('All done!');
    });
});

请注意，上面的代码是在 SO 上即时编写的，未经测试。不过应该相当接近。