[英]Prevent form “on submit” loading blank page
我已經看到了一些類似的問題,但是找不到任何相關的問題。
我有一個基本的表單來捕獲用戶電子郵件,我想要的是表單提交時不會加載空白頁面,而是只需再次重定向回空白表單即可。
<?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實現這一目標嗎?
你可以這樣做:
<?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();
}
?>
由於您正在使用
form.submit();
它使通常的表單提交就像您單擊“發送”按鈕一樣。 您要做的是通過Ajax發送序列化的表格,
var formData = $(form).serialize();
$.post('[HERE YOUR SUBMIT TARGET URL]', formData, function (success){
///Redirect to empty form, or clear actual form
});
使用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;
}
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.