jquery 对话框 post 如果为真

Question

我有以下代码示例，我试图仅在用户单击“是”按钮时发出 post 请求。如果用户单击“否”按钮，则不会发生任何事情。感谢您的帮助和提示。

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"
        rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
    <form action="" method="post">
        <button id="save" onclick="return ConfirmDialog('this is a test')">Save</button>
    </form>

<script>
    function ConfirmDialog(message) {
        $('<div></div>').appendTo('body')
            .html('<div><h6>' + message + '?</h6></div>')
            .dialog({
                modal: true,
                title: 'Delete message to use',
                zIndex: 10000,
                autoOpen: true,
                width: 'auto',
                resizable: false,
                width: 400,
                buttons: {
                    Yes: function () {
                        // $(obj).removeAttr('onclick');                                
                        // $(obj).parents('.Parent').remove();

                        //$('body').append('<h1>Confirm Dialog Result: <i>Yes</i></h1>');
                        $(this).dialog("close");
                        return true;
                    },
                    No: function () {
                        //$('body').append('<h1>Confirm Dialog Result: <i>No</i></h1>');
                        $(this).dialog("close");
                        return false;
                    }
                },
                close: function (event, ui) {
                    $(this).remove();
                }
            });
    };
</script>     
</body>
</html>

Answer 1

问题是您的按钮默认为 type="submit"，您可以将其更改为 type="button" 并正常执行您的功能：

function ConfirmDialog(message) {
  $('<div></div>').appendTo('body')
    .html('<div><h6>' + message + '?</h6></div>')
    .dialog({
      modal: true,
      title: 'Delete message to use',
      zIndex: 10000,
      autoOpen: true,
      width: 'auto',
      resizable: false,
      width: 400,
      buttons: {
        Yes: function() {
          $('body').append('<h1>Confirm Dialog Result: <i>Yes</i></h1>');
          $(this).dialog("close");
          return true;
        },
        No: function() {
          $('body').append('<h1>Confirm Dialog Result: <i>No</i></h1>');
          $(this).dialog("close");
          return false;
        }
      },
      close: function(event, ui) {
        $(this).remove();
      }
    });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<form action="" method="post">
  <button type="button" id="save" onclick="return ConfirmDialog('this is a test')">Save</button>
</form>

jquery 对话框 post 如果为真

jquery dialog post if true

javascript

jquery

dialog