使用确认对话框提交表单时丢失按钮值答案

【问题标题】：Losing Button value on form submit with Confirm dialogue使用确认对话框提交表单时丢失按钮值
【发布时间】：2020-01-04 19:09:54
【问题描述】：

我正在尝试在表单提交上传递一个按钮值以及一个 jquery 确认对话框，但它没有通过。我知道这与使用“form.submit”函数的脚本有关，但我对 JS 不够熟悉，无法编写解决问题的方法。

有没有办法将第一个按钮的值重新分配给一个新的 JS 变量并传递它？

我已将表单简化为基本元素，以便于理解。在此示例中，我尝试传递的数据是“123”，使用与确认对话脚本绑定的按钮。添加了第二个“常规按钮”以演示成功的表单提交。一些 PHP 收集 POST 数据并显示它。

// Results:  
// $regularbutton = '456';
// $alertbutton = '';

testpage.php:

<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript">
//<![CDATA[    
$(function () {
    'use strict';

    function confirmDialog(title, message, success) {
        var confirmdialog = $('<div></div>').appendTo('body')
            .html('<div><h6>' + message + '</h6></div>')
            .dialog({
                modal: true,
                title: title,
                zIndex: 10000,
                autoOpen: false,
                width: 'auto',
                resizable: false,
                buttons: {
                    Yes: function () {
                        success();
                        $(this).dialog("close");
                    },
                    No: function () {
                        $(this).dialog("close");
                    }
                },
                close: function() {
                    $(this).remove();
                }
            });

        return confirmdialog.dialog("open");
    }

    $('#submit_alert').on('click', function (e) {
        e.preventDefault();
        var form = document.getElementById('form_alert');

        confirmDialog('Confirm', 'Are you sure you want to proceed?', function () {
            form.submit();
        });
    });
});
//]]>
</script>

<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
</head>
<body>

<?php
extract($_POST);
echo "button1: $alertbutton <br>";
echo "button2: $regularbutton <br>";
?>

<form method="post" id="form_alert" action="testpage.php">    
<button name="alertbutton" value="123" id="submit_alert">Alert Button</button>
<button name="regularbutton" value="456">Regular Button</button>
</form>
</body>
</html>

【问题讨论】：

标签： javascript jquery forms variables submit

【解决方案1】：

按钮的值未提交。

你可以在调用form.submit()之前注入一个隐藏字段：

confirmDialog('Confirm', 'Are you sure you want to proceed?', function () {
    $('#form_alert').append('<input type="hidden" name="alertbutton" id="submit_alert_hidden" value="' + $('#submit_alert').val() + '" />');
    form.submit();
});

【讨论】：

【解决方案2】：

您可以使用属性data-* 来传递一些数据：

$(function()
{
  $(".MyButton").on('click', function(e)
  {
    // note that some-value is camelCased to someValue
    console.log(e.target.dataset.someValue);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <button class="MyButton" name="alertbutton" data-some-value="123" id="submit_alert">Alert Button</button>
  <button class="MyButton" name="regularbutton" data-some-value="456">Regular Button</button>

【讨论】：

仍然必须将值附加到提交的表单中。