JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.js"></script>
<script src="https://unpkg.com/[email protected]/dist/sweetalert2.all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.js"></script>
<link rel="stylesheet" href="https://limonte.github.io/sweetalert2/dist/sweetalert2.min.css">
<script src="https://limonte.github.io/sweetalert2/dist/sweetalert2.min.js"></script>
<script src="https://cdn.ckeditor.com/4.5.1/standard/ckeditor.js"></script>
<form id="storyForm" action="ephp/storyPublish.php" method="POST">
<input type="text" name="userName" id="userName" placeholder="Name" />
<br/><br/>
<input type="Email" name="userEmail" id="userEmail" placeholder="Email" />
<br/><br/>
<textarea name="editor1" id="editor1" rows="10" cols="80"></textarea>
<button type="submit">Publish</button>
<button type="reset" class="model_img" id="sa-warning">Reset</button>
</form>
JavaScript
$("#storyForm").on('reset', function(e) {
var form = $(this);
e.preventDefault();
swal({
title: "Are you sure?",
text: "Do you really want to reset?",
type: "warning",
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'Go on!',
cancelButtonText: "Ops no!",
}).then((result) => {
if (result.value) {
$("#userName").val("");
$("#userEmail").val("");
CKEDITOR.instances.editor1
.setData( '', function() { this.updateElement(); } );
$("#editor1").val("");
swal(
'Reset!',
'Your form has been reset.',
'success'
)
/*swal({
title: 'Success!',
text: 'Invoice created! Go to the invoice tab to pay it.',
type: 'success'
});*/
// result.dismiss can be 'cancel', 'overlay',
} else if (result.dismiss === 'cancel') {
swal("Cancelled", "Invoice not created!", "error");
}
});
});
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.editorConfig = function (config) {
config.language = 'es';
config.uiColor = '#F7B42C';
config.height = 300;
config.toolbarCanCollapse = true;
};
CKEDITOR.replace('editor1');