如何使用 sweetalert2 重置表单答案

【问题标题】：How to reset form with sweetalert2如何使用 sweetalert2 重置表单
【发布时间】：2017-12-09 23:26:39
【问题描述】：

我正在使用SweetAlert2。我希望当用户单击 Reset 按钮时会弹出 SweetAlert 以进行确认。我已经这样做了。
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>

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

弹出窗口出现了，但表单没有重置，这个 Javascript 有什么问题？
这是Fiddle

【问题讨论】：

标签： javascript jquery reset sweetalert2

【解决方案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");
         }
      });
});

注意 - 我注释掉了您的 Success swal，因为它没有添加发票，但如果您希望它这样做，只需取消注释并删除其上方的 sweetalert。

这是jsFiddle

我希望这有助于祝你好运！

【讨论】：