Question

在使用SweetAlert之前，提交表单可以正常工作。添加SweetAlert之后，提交表单仍然无法正常工作，我很困惑代码的问题。

我的html代码

<div class="form-group">
    <a href="javascript:;" class="btn btn-success" id="addInputFile">Modal Input File</a>
</div>

和模态

<form class="form-horizontal" id="submit">
    <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Modal title</h4>
          </div>
          <div class="modal-body">
                <div class="form-group">
                    <input type="text" name="judul" class="form-control" placeholder="Judul">
                </div>
                <div class="form-group">
                    <input type="file" name="file">
                </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary" id="btn_upload">Upload</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</form>

js部分

$(document).ready(function(){

        $('#addInputFile').on('click', function(){
            $('#myModal').modal('show');

            $('#btn_upload').on('click', function(e){
              e.preventDefault();
              Swal.fire({
                title: 'Are you sure?',
                text: "The data will input",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Add',
                cancelButtonText: 'Cancel'
              }).then((result) => {
                if (result.value) {
                  $('#submit').unbind('submit').submit();
                  $('#submit').submit(function(e){
                     e.preventDefault(); 
                     $.ajax({
                         url:'myfile.php',
                         type:"post",
                         data:new FormData(this),
                         processData:false,
                         contentType:false,
                         cache:false,
                         async:false,
                          success: function(data){
                              alert("Input Form Success.");
                          }
                     });
                  });
                }
              })
            });
        });
    });

此外，我正在尝试编辑此行

$('#submit').submit(function(e){

进入

$('#submit')[0].submit(function(e){

但是页面，但是页面已刷新。

Answer 1

更新此

<div class="modal-footer">
            <input type="button" class="btn btn-default" data-dismiss="modal" value='Close'>
            <input type="button" class="btn btn-primary" id="btn_upload" value='Submit' />
</div>

$(document).ready(function(){
    $('#addInputFile').on('click', function(){
        $('#myModal').modal('show');
    });
     $('#btn_upload').on('click', function(){
          Swal.fire({
            title: 'Are you sure?',
            text: "The data will input",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Add',
            cancelButtonText: 'Cancel'
          }).then((result) => { alert('resolved');
            if (result.value) {alert('submitting');
                 $.ajax({
                     url:'myfile.php',
                     type:"post",
                     data:new FormData(this),
                     processData:false,
                     contentType:false,
                     cache:false,
                     async:false,
                      success: function(data){
                          alert("Input Form Success.");
                   },
                   failure:function(d){
                          alert("Error")
                          alert(d)
                   }
                 });
              }
          })
    });
});

在使用Ajax提交表单之前先进行Sweet Alert确认

1 个答案: