JSFiddle - React, Tailwind, and code Playground

by Muhammad Hamza Khan

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("");
          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');