How to reset form with sweetalert2

Question

I am using SweetAlert2. I want when user click on Reset button a popUp of SweetAlert appears for confirmation. I had done this already.
HTML

<form id="storyForm" action="ephp/storyPublish.php" method="POST">
 <input type="text" name="userName" />
 <input type="Email" name="userEmail" />
 <button type="submit">Publish</button>
 <button type="reset" class="model_img" id="sa-warning">Reset</button>
</form>

JS

$("#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(function(isConfirm) {
        swal({
            title: 'Success!', 
            text: 'Invoice created! Go to the invoice tab to pay it.', 
            type: 'success'
        }, function() {
           form.reset();
        });
    },function(dismiss) {
        if(dismiss == 'cancel') {
            swal("Cancelled", "Invoice not created!", "error");
        }
    });
});

PopUp is appearing but form is not reseting, what's wrong with this Javascript?
Here is the Fiddle

Hayden Passmore Hayden Passmore · Accepted Answer · 2017-12-10T03:07:41

Hi I was able to get your form to reset but not using your form.reset() function, I was able to get it to work by giving the inputs ids and then handling the reset using sweetalerts result.

HTML

<form id="storyForm" action="ephp/storyPublish.php" method="POST">
 <input type="text" name="userName" id="userName" /> <!--added the id here-->
 <input type="Email" name="userEmail" id="userEmail" /> <!--added the id here-->
 <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");
         }
      });
});

NOTE - I commented out your Success swal as it wasn't adding an invoice but if you want it to do so just un comment it and remove the sweetalert above it.

Here is a jsFiddle

I hope this helps good luck!

How to reset form with sweetalert2

1 Answers