javascript - 防止表单 "on submit"加载空白页

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

你可以这样做:

<?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();

} 
?>