使用 2 个按钮 + sweetalert2 提交表单

Question

我有一个表单，其中有 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 提交表单，但现在我想在将它发送到 Draft:

之前提醒

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

我已经为你试过了，这和你想要的一样吗？

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>

Answer 2

像这样。

$('#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'
          )
      });
    }
  })
})

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

使用 2 个按钮 + sweetalert2 提交表单

Form submit with 2 buttons + sweetalert2

javascript

forms

jquery

sweetalert

sweetalert2