Modal fadeOut后如何提交表格？

Question

我尝试在模态完成fading out之后提交我的表单，然后将表单提交给refreshform.php邮件文件已经准备就绪，但是在模式淡出后表单不提交或发布到php文件的内容所以发送它发送电子邮件，它只是淡出而没有提交

这是我的档案，谢谢你的帮助！

$(document).ready(function() {
  $('#questionWrapper .question').first().show(); //show first questionblock
  
  $("#questionWrapper .answer" ).click(function( event ) {
    event.preventDefault();
    $(this).parent('.question').hide();
    if ($(this).parent().next('.question').length) {
        $(this).parent().next('.question').fadeIn();
    } else {
        startCheck();
    }
  });
});

function startCheck() {

var overlay = $('.overlay-checker'),
    points = $('.overlay-checker-points > li');

// Initially, hide all the points so we can show them one by one
points.hide();

// Fade in the overlay
overlay.fadeIn();

// Loop points.lenght times (so through every point)
for (i = 0; i < points.length; i++) {
  setTimeout(function () {
    $('.overlay-checker-points').find(':hidden').first().fadeIn();
  }, 1500 * (i + 1));
}

// After all items have been faded in, redirect
setTimeout(function () {
          ('.overlay-checker').fadeOut('500', function(
           $('form').submit();) {
   
});
    
    
}, 1500 * points.length + 2000);

}

function toggleDiv(target) {
  $(target).toggle();
}

    .countWrapper {
        display: block;
        clear: both;
        font-size: 12px;
        margin: 5px;
    }

    .rulesBox {
        width: 80%; background-color: #ffffff; margin: 10px 0 15px 0; padding: 20px;
        -moz-border-radius: 15px;
        border-radius: 15px;
    }

    .centerIt {
        margin:0px auto;
        text-align:center;
        margin-top: 125px;
    }
    .centerIt a {
        margin:0px auto;
    }

    .overlay-checker {
        display: none;
        background: #fff;
        background: rgba(0, 0, 0, 0.7);

        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
    }
    .overlay-checker {
        color: #fff;
        font-size: 35px;
        font-weight: bold;
    }
    .overlay-checker-points {
        max-width: 700px;
        font-size: 20px;
        padding: 0;
    }

    .overlay-checker-points li{list-style: none;}
    .overlay-checker-points li img{height: 21px;}

<form class="form" method="post" id="form"  action="refreshform.php">
      
      <p class="name">
        <input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" />
      </p>
      
      <p class="email">
        <input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />
      </p>
        
        <p class="country">
        <input name="country" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Country" id="country" />
      </p>
        <p class="apps">to ensure your not a bot <strong>you must download 2 FREE Apps</strong> and only after the GiftCard will be Sent.</p>
      
      
      
      
      <div class="kapot">
        <input type="button" name="go" onclick="startCheck()" id="submit" value="Go"/>
        <div class="ease"></div>
      </div>
    </form>

Answer 1

这里有语法错误：

// After all items have been faded in, redirect
setTimeout(function () {
          ('.overlay-checker').fadeOut('500', function(
           $('form').submit();) {

});

还有'.overlay-checker'的另一种语法

我更正了以下内容......

**编辑：我还删除了您的按钮的ID被称为id="submit"，因为这似乎在提交表单时产生冲突。

注意：由于重叠标记不在此示例中，我添加了一个条件以提交否则。

$(document).ready(function() {
  $('#questionWrapper .question').first().show(); //show first questionblock
  
  $("#questionWrapper .answer" ).click(function( event ) {
    event.preventDefault();
    $(this).parent('.question').hide();
    if ($(this).parent().next('.question').length) {
        $(this).parent().next('.question').fadeIn();
    } else {
        startCheck();
    }
  });
});

function startCheck() {

var overlay = $('.overlay-checker'),
    points = $('.overlay-checker-points > li');

// Initially, hide all the points so we can show them one by one
points.hide();

// Fade in the overlay
overlay.fadeIn();

// Loop points.lenght times (so through every point)
for (i = 0; i < points.length; i++) {
  setTimeout(function () {
    $('.overlay-checker-points').find(':hidden').first().fadeIn();
  }, 1500 * (i + 1));
}

// After all items have been faded in, redirect
setTimeout(function () {
 console.log('Timer started.');
 
 if(jQuery('.overlay-checker').length){
 jQuery('.overlay-checker').fadeOut('500', function() {
   
   console.log('Fade out complete. Submitting form.');
   jQuery('#form').submit();
   
 });
 }else{
 
   console.log('Fade selector not found. Submitting form immediately.');
   jQuery('#form').submit();
   
 }
   
}, 1500 * points.length + 2000);

}

function toggleDiv(target) {
  $(target).toggle();
}

.countWrapper {
        display: block;
        clear: both;
        font-size: 12px;
        margin: 5px;
    }

    .rulesBox {
        width: 80%; background-color: #ffffff; margin: 10px 0 15px 0; padding: 20px;
        -moz-border-radius: 15px;
        border-radius: 15px;
    }

    .centerIt {
        margin:0px auto;
        text-align:center;
        margin-top: 125px;
    }
    .centerIt a {
        margin:0px auto;
    }

    .overlay-checker {
        display: none;
        background: #fff;
        background: rgba(0, 0, 0, 0.7);

        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
    }
    .overlay-checker {
        color: #fff;
        font-size: 35px;
        font-weight: bold;
    }
    .overlay-checker-points {
        max-width: 700px;
        font-size: 20px;
        padding: 0;
    }

    .overlay-checker-points li{list-style: none;}
    .overlay-checker-points li img{height: 21px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form class="form" method="post" id="form"  action="refreshform.php">

      
      <p class="name">
        <input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" />
      </p>
      
      <p class="email">
        <input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />
      </p>
        
        <p class="country">
        <input name="country" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Country" id="country" />
      </p>
        <p class="apps">to ensure your not a bot <strong>you must download 2 FREE Apps</strong> and only after the GiftCard will be Sent.</p>
      
      
      
      
      <div class="kapot">
        <input type="button" name="go" onclick="startCheck()" value="Go"/>
        <div class="ease"></div>
      </div>
      
    </form>