Sweet Alert confirmation before submit form using Ajax

问题: Before using SweetAlert, the submit form is working fine. After add SweetAlert, the submit form is not working anyway, i'm confuse what's wrong with my code. My html code...

问题:

Before using SweetAlert, the submit form is working fine. After add SweetAlert, the submit form is not working anyway, i'm confuse what's wrong with my code.

My html code

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

and the modal

<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> 

The js part

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

Also, i'm trying to edit this line

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

Into this

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

But the pages, but the page is refreshed.


回答1:

update this

<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)
                   }
                 });
              }
          })
    });
});
  • 发表于 2019-03-10 23:57
  • 阅读 ( 88 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除