Question

我正在使用SweetAlert2。我希望当用户点击Reset按钮时，会出现一个SweetAlert的popUp进行确认。我已经这样做了。
的 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正在出现但是表单没有重置，这个Javascript出了什么问题？
这是 Fiddle

Answer 1

您好我能够让您的表单重置但不使用您的form.reset（）函数，我可以通过输入ID然后使用sweetalerts结果处理重置来使其工作。

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");
         }
      });
});

注意 - 我注释了您的成功swal，因为它没有添加发票，但如果您希望它这样做，请不要对其进行评论并删除其上方的sweetalert。

这是jsFiddle

我希望这有助于好运！

如何使用sweetalert2重置表单

1 个答案: