防止形成“；提交时”；正在加载空白页 - Prevent form "on submit" loading blank page

Prevent form "on submit" loading blank page

本文关键字：加载空白提交 | 更新日期: 2023-09-27

我看到了一些类似的问题，但找不到任何相关的问题。。

我有一个捕获用户电子邮件的基本表单，我只想在表单提交时不加载空白页面，而是再次重定向回空表单。

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