表单提交2个按钮+ sweetalert2

Question

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

1. For- Publish story
2. For-Draft story

如果用户点击发布故事，则会简单地发布故事。 但是，如果用户点击草稿故事，则会出现一个警告（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();

}

Answer 1

我为你尝试了一些东西，这是你想要的东西吗？

＆＃13;

＆＃13;

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");
        }
    });
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

像这样。

＆＃13;

＆＃13;

$('#draft').on('click', (e) => {
	e.preventDefault()
  swal({
    title: 'You want to save?',
    text: "You can come back to this later!",
    type: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Yes, save it!'
  }).then((result) => {
    if (result.value) {
			let data = $('form').serialize();
      let urlToPostTo = 'https://posttestserver.com/post.php';
  		$.post(urlToPostTo, data, function(){
          swal(
            'Saved!',
            'Your file has been saved.',
            'success'
          )
      });
    }
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="ePHP/storyPublish.php" method="post">
  <input name="storyTitle">
  <input name="storyDetail">
  <input name="storyCategory">
  <button type="submit">Publish</button>
  <button id="draft" type="submit">Draft</button>
</form>
<script src="https://unpkg.com/sweetalert2@7.1.3/dist/sweetalert2.all.js"></script>

＆＃13;

＆＃13;

＆＃13;