javascript - 带有两个按钮的表单提交+ sweetalert2

我有一个表单，其中有2个提交按钮。

For-发布故事

For-草稿故事

如果用户单击“发布故事”，则故事将被简单地发布。
但是，如果用户单击草稿故事，则将显示警报(即SweetAlert2)，以确认该用户确实要将此故事保存在草稿中。
PS :我也在表单中使用jqBootstrapValidation。
HTML

<form method="POST" name="storyForm" novalidate enctype="multipart/form-data">
  <input name="storyTitle" required>
  <input name="storyDetail" required>
  <input name="storyCategory" required>

  <button type="submit" onclick="storyPublish()">Publish</button>
  <button type="submit" onclick="storyDraft()">Draft</button>
</form>

以前，我使用此javascript提交表单，但现在我需要sweetalert，然后再将其发送到草稿:

function storyPublish()
{
    document.storyForm.action = "ePHP/storyPublish.php"
    document.storyForm["storyForm"].submit();

}
function storyDraft()
{
    document.storyForm.action = "ePHP/storyDraft.php"
    document.storyForm["storyForm"].submit();

}

最佳答案

我已经为您尝试过一些东西，这是您想要的吗？

function storyPublish(e)
{
    $(".validated").jqBootstrapValidation(
    {
        preventSubmit: true,
        submitError: function($form, event, errors) {
            // Here I do nothing, but you could do something like display
            // the error messages to the user, log, etc.
        },
        submitSuccess: function($form, event) {
            document.storyForm.action = "ePHP/storyPublish.php"
            document.storyForm.submit();

            event.preventDefault();
        },
        filter: function() {
            return $(this).is(":visible");
        }
    }
  );
}
function storyDraft(event)
{
    $(".validated").jqBootstrapValidation(
    {
        preventSubmit: true,
        submitError: function($form, event, errors) {
            // Here I do nothing, but you could do something like display
            // the error messages to the user, log, etc.
        },
        submitSuccess: function($form, event) {
                swal({
            title: "Are you sure?",
            text: "You want to save as draft?",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Yes, Draft it!",
            cancelButtonText: "No, cancel plx!"
        }).then((result) => {
            if(result.value){
                document.storyForm.action = "ePHP/storyDraft.php";
                document.storyForm.submit();
            } else {
                swal("Cancelled", "Your imaginary file is safe :)", "error");
            }
        });

        event.preventDefault();
        },
        filter: function() {
            return $(this).is(":visible");
        }
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://reactiveraven.github.io/jqBootstrapValidation/js/jqBootstrapValidation.js"></script>
<script src="https://unpkg.com/sweetalert2@7.1.3/dist/sweetalert2.all.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<form method="POST" name="storyForm" novalidate enctype="multipart/form-data">
    <div class='control-group'>
        <div class="controls">
            <input name="storyTitle" class='validated' id='storyTitle' required data-validation-required-message='test'>
            <p class="help-block"></p>
        </div>
    </div>
    <div class='control-group'>
        <div class="controls">
            <input name="storyDetail" class='validated' required>
            <p class="help-block"></p>
        </div>
    </div>
    <div class='control-group'>
        <div class="controls">
            <input name="storyCategory" class='validated' required>
            <p class="help-block"></p>
        </div>
    </div>
    <div class='form-action'>
        <button type="submit" onclick="storyPublish(event)">Publish</button>
        <button type="submit" onclick="storyDraft(event)">Draft</button>
    </div>

</form>