Form submit with 2 buttons + sweetalert2

Question

I have a form in which 2 submit button.

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

If an user click on Publish story, story will be publish, simply. But if an user click on Draft story, an alert (which is SweetAlert2) will be appear for confirmation that this user actually want to save this story in Draft.
PS: I am also using jqBootstrapValidation in my form.
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>

Previously I was using this javascript for submitting form but now I want sweetalert before sending it to 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

I have tried something for you, is this the same thing what you want?

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>