如何使用 sweetalert2 重置表单

Question

我正在使用 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>

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

出现了弹出窗口，但表单没有重置，这是怎么回事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");
         }
      });
});

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

这是一个jsFiddle

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

如何使用 sweetalert2 重置表单

How to reset form with sweetalert2

javascript

jquery

reset

sweetalert2