Title: Form submit with 2 buttons + sweetalert2
Tags: javascript;jquery;forms;sweetalert;sweetalert2
Question: I have a form in which 2 submit button.
For- Publish story
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.
<form method="POST" name="storyForm" novalidate enctype="multipart/form-data"&gt;
<input name="storyTitle" required&gt;
<input name="storyDetail" required&gt;
<input name="storyCategory" required&gt;
<button type="submit" onclick="storyPublish()"&gt;Publish</button&gt;
<button type="submit" onclick="storyDraft()"&gt;Draft</button&gt;
</form&gt;
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();

Here is the accepted answer: 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) =&gt; {
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"&gt;</script&gt;
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;</script&gt;
<script src="https://reactiveraven.github.io/jqBootstrapValidation/js/jqBootstrapValidation.js"&gt;</script&gt;
<script src="https://steven26@example.net/dist/sweetalert2.all.js"&gt;</script&gt;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
<form method="POST" name="storyForm" novalidate enctype="multipart/form-data"&gt;
<div class='control-group'&gt;
<div class="controls"&gt;
<input name="storyTitle" class='validated' id='storyTitle' required data-validation-required-message='test'&gt;
<p class="help-block"&gt;</p&gt;
</div&gt;
</div&gt;
<div class='control-group'&gt;
<div class="controls"&gt;
<input name="storyDetail" class='validated' required&gt;
<p class="help-block"&gt;</p&gt;
</div&gt;
</div&gt;
<div class='control-group'&gt;
<div class="controls"&gt;
<input name="storyCategory" class='validated' required&gt;
<p class="help-block"&gt;</p&gt;
</div&gt;
</div&gt;
<div class='form-action'&gt;
<button type="submit" onclick="storyPublish(event)"&gt;Publish</button&gt;
<button type="submit" onclick="storyDraft(event)"&gt;Draft</button&gt;
</div&gt;
</form&gt;
Comment for this answer: I have updated my answer please check now, I have added jquery validation @GermanCoder
Comment for this answer: @GermanCoder again I have updated to sweetalert original before I have used bootstrap-sweetalert, please check that
Comment for this answer: can u please check in console if you found any error in developer console tab, and again I have updated the code with sweetalert main script instead of bootstrap please copy that
Comment for this answer: let me check with that i have implemented with jqueryValidation plugin
Comment for this answer: its due to jquery validation plugin let me check with jqBootstrapValidation for you
Comment for this answer: @GermanCoder please check I have updated the code and let me know if it works for you or not.
Comment for this answer: Actually in your means you are right. But the thing is I already tried that. It is not validating form. That the respected fields are empty or not!
Comment for this answer: I have checked your updated script and I have no idea why it is not working on my script. That is exactly what I want.
Comment for this answer: I was a lil bit wrong above, I am using [jqBootstrapValidation](http://reactiveraven.github.io/jqBootstrapValidation/) could you please check with it.
Comment for this answer: In console it says `.valid is not a function` and also `.validate is not a function`
Comment for this answer: Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/162012/discussion-between-germancoder-and-prateik-darji).
Comment for this answer: Exactly that is what I want. Thank you so much for help. My brain is totally ended up!

Here is another answer: Something like this.
$('#draft').on('click', (e) =&gt; {
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) =&gt; {
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"&gt;</script&gt;
<form action="ePHP/storyPublish.php" method="post"&gt;
<input name="storyTitle"&gt;
<input name="storyDetail"&gt;
<input name="storyCategory"&gt;
<button type="submit"&gt;Publish</button&gt;
<button id="draft" type="submit"&gt;Draft</button&gt;
</form&gt;
<script src="https://steven26@example.net/dist/sweetalert2.all.js"&gt;</script&gt;
Comment for this answer: ^I didn't do that I am sorry. You're also right in your means but It your script in also not validating form.

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2017:00:12/27/17', 'FavoriteCount': 1.0, 'PostTypeId': 1, 'Tags': '<javascript><jquery><forms><sweetalert><sweetalert2>', 'Title': 'Form submit with 2 buttons + sweetalert2', 'ViewCount': 6400, 'id': 47986638, 'user_AboutMe': '<p>I am a <strong>passionate</strong> <code>Web Designer</code> from Berlin, Germany.<br/>\nI love to spend to learn new stuff and also helping other in that work.</p>\n', 'user_AccountId': 12053144.0, 'user_DisplayName': 'GermanCoder', 'user_Reputation': 73.0, 'user_Views': 36.0, 'user_id': 8815277.0}}