防止表「上提交」加載空白頁

Question

我已經看到了一些類似的問題，但找不到任何相關信息..

我有一個基本的形式獲取用戶電子郵件所有我想要的是，當表單提交它不加載空白頁面，而只是重新指向空白表單。

<?php 
if ($thanks === false) { 
    echo form::open('', array('id'=>'footer_email')); 
    echo '<div id="footer_box">'; 

    echo '<div class="footer_box_left">'; 
    echo form::input('form[email]', $val, array('class'=>'required', 'id'=>'email', 'placeholder'=>'Enter email address')); 
    echo '</div>'; 

    echo form::submit('btnSubmit', 'Sign Up', array('id'=>'btnSubmit', 'class'=>'footer_box_submit')); 
    echo '</div>'; 

    echo form::close(); 

    } 
?> 

 

$(document).ready(function() { 

var validator = $("#footer_email").validate({ 
    errorLabelContainer: $("#footer_email div.error"), 
    meta: "validate", 
    invalidHandler: function (form, validator) { 
     alert("Please enter your email address first."); 
    }, 
    submitHandler: function (form) { // on submit 
     if ($(form).valid()) 
     form.submit(); 
     alert("Thank you for sharing your email address. \nKarina"); 
     return false; 
     } 
    }); 

}); 

任何人能告訴我，我要去哪裏錯了/我會更好地使用AJAX來實現這一目標？

Answer 1

由於您使用

form.submit(); 

這使得通常的形式提交你好像擊中「發送」按鈕。你想在這裏做的是發送通過Ajax連載的形式，

var formData = $(form).serialize(); 

$.post('[HERE YOUR SUBMIT TARGET URL]', formData, function (success){ 
    ///Redirect to empty form, or clear actual form 
}); 

Answer 2

你可以這樣做：

<?php 
if ($thanks === false) { 
    echo form::open('', array('id'=>'footer_email')); 
    echo '<div id="footer_box">'; 

    echo '<div class="footer_box_left">'; 
    echo form::input('form[email]', $val, array('class'=>'required', 'id'=>'email', 'placeholder'=>'Enter email address')); 
    echo '</div>'; 

    echo form::submit('btnSubmit', 'Sign Up', array('id'=>'btnSubmit', 'class'=>'footer_box_submit')); 
    echo '</div>'; 

    echo form::close(); 
} else { 
    echo '<script>alert("Thank you for sharing your email address. \nKarina");</script>'; 
    echo form::open('', array('id'=>'footer_email')); 
    echo '<div id="footer_box">'; 

    echo '<div class="footer_box_left">'; 
    echo form::input('form[email]', $val, array('class'=>'required', 'id'=>'email', 'placeholder'=>'Enter email address')); 
    echo '</div>'; 

    echo form::submit('btnSubmit', 'Sign Up', array('id'=>'btnSubmit', 'class'=>'footer_box_submit')); 
    echo '</div>'; 

    echo form::close(); 

} 
?> 

Answer 3

使用AJAX來保持它的快速，沒有很多刷新

$(document).ready(function() { 

    var validator = $("#footer_email").validate({ 
     errorLabelContainer: $("#footer_email div.error"), 
     meta: "validate", 
     invalidHandler: function (form, validator) { 
      alert("Please enter your email address first."); 
     }, 
     submitHandler: function (form) { // on submit 
      if ($(form).valid()) { 
    $.ajax({ 
       type: "POST", 
       url: url, 
       data: $(form).serialize() 
      }).done(function (data) { 
       alert("Thank you for sharing your email address. \nKarina"); 
$(form).reset(); 

      }).fail(function() { 
       alert("Sorry Try again. \nKarina"); 
      }); 
    } 

      return false; 
      } 
     }); 

    });