提交返回到主页

Question

我在我的网站上使用了一个简单的 PHP 联系表单，问题是当我发送消息时，单击我的提交按钮会将我返回到主页。我想避免这种情况并留在页面上。

这是我的代码：

头文件 PHP：

<?php
//If the form is submitted
if(isset($_POST['submit'])) {

//Check to make sure that the name field is not empty
if(trim($_POST['contactname']) == '') {
    $hasError = true;
} else {
    $name = trim($_POST['contactname']);
}

//Check to make sure that the phone field is not empty
if(trim($_POST['phone']) == '') {
    $hasError = true;
} else {
    $phone = trim($_POST['phone']);
}

//Check to make sure that the name field is not empty
if(trim($_POST['weburl']) == '') {
    $hasError = true;
} else {
    $weburl = trim($_POST['weburl']);
}

//Check to make sure that the subject field is not empty
if(trim($_POST['subject']) == '') {
    $hasError = true;
} else {
    $subject = trim($_POST['subject']);
}

//Check to make sure sure that a valid email address is submitted
if(trim($_POST['email']) == '')  {
    $hasError = true;
} else if (!filter_var( trim($_POST['email'], FILTER_VALIDATE_EMAIL ))) {
    $hasError = true;
} else {
    $email = trim($_POST['email']);
}

//Check to make sure comments were entered
if(trim($_POST['message']) == '') {
    $hasError = true;
} else {
    if(function_exists('stripslashes')) {
        $comments = stripslashes(trim($_POST['message']));
    } else {
        $comments = trim($_POST['message']);
    }
}

//If there is no error, send the email
if(!isset($hasError)) {
    $emailTo = 'myemail@email.com'; // Put your own email address here
    $body = "Name: $name \n\nEmail: $email \n\nPhone Number: $phone \n\nSubject: $subject \n\nComments:\n $comments";
    $headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;

    mail($emailTo, $subject, $body, $headers);
    $emailSent = true;
}
}
  ?>

表格：

  <div class="container">


<div class="row">
  <div class="col-md-6 col-md-push-3">
    <form role="form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="contactform">
      <fieldset>
        <legend>Send Us a Message</legend>

        <?php if(isset($hasError)) { //If errors are found ?>
          <p class="alert alert-danger">Please check if you've filled all the fields with valid information and try again. Thank you.</p>
        <?php } ?>

        <?php if(isset($emailSent) && $emailSent == true) { //If email is sent ?>
          <div class="alert alert-success">
            <p><strong>Message Successfully Sent!</strong></p>
            <p>Thank you for using our contact form, <strong><?php echo $name;?></strong>! Your email was successfully sent and we&rsquo;ll be in touch with you soon.</p>
          </div>
        <?php } ?>

        <div class="form-group">
          <label for="name">Your Name<span class="help-required">*</span></label>
          <input type="text" name="contactname" id="contactname" value="" class="form-control required" role="input" aria-required="true" />
        </div>

        <div class="form-group">
          <label for="phone">Your Phone Number<span class="help-required">*</span></label>
          <input type="text" name="phone" id="phone" value="" class="form-control required" role="input" aria-required="true" />
        </div>


        <div class="form-group">
          <label for="email">Your Email<span class="help-required">*</span></label>
          <input type="text" name="email" id="email" value="" class="form-control required email" role="input" aria-required="true" />
        </div>

        <div class="form-group">
          <label for="weburl">Your Website<span class="help-required">*</span></label>
          <input type="text" name="weburl" id="weburl" value="" class="form-control required url" role="input" aria-required="true" />
        </div>


        <div class="form-group">
          <label for="subject">Subject<span class="help-required">*</span></label>
          <select name="subject" id="subject" class="form-control required" role="select" aria-required="true">
            <option></option>
            <option>One</option>
            <option>Two</option>
          </select>
        </div>

        <div class="form-group">
          <label for="message">Message<span class="help-required">*</span></label>
          <textarea rows="8" name="message" id="message" class="form-control required" role="textbox" aria-required="true"></textarea>
        </div>

        <div class="actions">
          <input type="submit" value="Send Your Message" name="submit" id="submitButton" class="btn btn-primary" title="Click here to submit your message!" />
          <input type="reset" value="Clear Form" class="btn btn-danger" title="Remove all the data from the form." />
        </div>
      </fieldset>
    </form>
  </div><!-- col -->
</div><!-- row -->

  <hr>

  <div class="footer">
    <p>&copy; Company 2013</p>
  </div>

</div> <!-- /container -->

JS：

   /* Bootstrap Contact Form
      ***************************************************************************/
 $(document).ready(function(){
// validate signup form on keyup and submit


var validator = $("#contactform").validate({
    errorClass:'has-error',
    validClass:'has-success',
    errorElement:'div',
    highlight: function (element, errorClass, validClass) {
        $(element).closest('.form-control').addClass(errorClass).removeClass(validClass);
    },
    unhighlight: function (element, errorClass, validClass) {
        $(element).parents(".has-error").removeClass(errorClass).addClass(validClass);
    },
    rules: {
        contactname: {
            required: true,
            minlength: 2
        },
        email: {
            required: true,
            email: true
        },
        weburl: {
            required: true,
            url: true
        },
        phone: {
            required: true,
            phoneUS: true
        },
        subject: {
            required: true
        },
        message: {
            required: true,
            minlength: 10
        }
    },
    messages: {
        contactname: {
            required: '<span class="help-block">Please enter your name.</span>',
            minlength: jQuery.format('<span class="help-block">Your name needs to be at least {0} characters.</span>')
        },
        email: {
            required: '<span class="help-block">Please enter a valid email address.</span>',
            minlength: '<span class="help-block">Please enter a valid email address.</span>'
        },
        weburl: {
            required: '<span class="help-block">You need to enter the address to your website.</span>',
            url: jQuery.format('<span class="help-block">You need to enter a valid URL.</span>')
        },
        phone: {
            required: '<span class="help-block">You need to enter your phone number.</span>',
            phoneUS: jQuery.format('<span class="help-block">You need to enter a valid phone number.</span>')
        },
        subject: {
            required: '<span class="help-block">You need to enter a subject.</span>'
        },
        message: {
            required: '<span class="help-block">You need to enter a message.</span>',
            minlength: jQuery.format('<span class="help-block">Enter at least {0} characters.</span>')
        }
    }
   });
  });

我认为

可能有问题

<form role="form" method="post" action="<?php echo   $_SERVER['PHP_SELF']; ?>" id="contactform">

通过使用

action="<?php echo $_SERVER['PHP_SELF']

我已尝试删除它，也尝试使用 action="#" 但没有效果，提交按钮仍将我重定向到登录页面。

Answer 1

您提到“整个网络只有一个主要 URL，联系表单放置在没有 URL 的滑出面板中”。我不确定您是如何生成滑出面板的，但我猜它只是显示/动画该页面上已经存在的一些隐藏内容 - 可能是 Bootstrap 模式。

所以你有一个页面，可能是 index.php，上面有一个联系表。您的表单操作（数据发布到的位置）是<?php echo $_SERVER['PHP_SELF']; ?>，它将是“index.php”（检查、查看源代码或查看开发工具）。

所以点击提交，假设 JS 验证通过，会将表单数据 POST 到 index.php。 POST 是一个新请求，因此在前端页面将显示为重新加载，尽管这一次您的标头 PHP 将处理一个 POST 有效负载。您的联系表单将消失，因为它通常不会显示在页面上，直到被点击链接或按钮或其他任何东西触发。

听起来您实际上希望页面不刷新，并使用您的成功或错误消息（“消息成功发送！”等）更新联系表单显示。为此，您需要通过 AJAX 发布，这将在后台发生，无需刷新页面。

为此，您需要首先更新您的 PHP 以返回您的 Javascript 可以使用的响应，而不是像在 GET 请求上那样生成整个页面。

if (isset($_POST['submit'])) {
    // ... all your existing code ...

    if ($hasError) {
        echo "FAIL";
    } else {
        echo "OK";
    }

    die();  // POSTs to this page only generate success/error msgs, and bail out
}

接下来，您需要在验证中添加提交处理程序：

var validator = $("#contactform").validate({
    ...
    messages: {
    ...
    },
    submitHandler: function(form) {
        $.ajax({
            type: 'post',
            url: 'index.php',
            data: $(form).serialize(),
            success: function(data) {
                if (data === 'OK') {
                    // JS code to reveal your success alert, eg:
                    // $('div.alert-success').fadeIn();
                } else {
                    // JS code to reveal your danger alert
                }
            }
        });
        return false; // Block the normal submit, we just did it via AJAX
    }

最后，删除用于显示成功/危险警报的 PHP 条件，因为您现在将通过 Javascript 显示它们。只需向它们添加一个“隐藏”类，以便在第一次加载时都不显示。

只有一个警报区域，PHP 生成的内容和类，你可以让事情变得更整洁，例如，而不是仅仅返回“OK”它可以返回 JSON（确保添加 dataType: 'json' 到在这种情况下你的 $.ajax() 调用）。

Answer 2

您必须在此属性中定义您的页面：

action="your_page.php"

Answer 3

php echo $_SERVER['PHP_SELF']

它是指向根目录的路径，例如 /

表单在提交时具有重新加载页面的能力，这就是为什么它会将您重定向到主页

您应该在提交表单时使用 AJAX 留在此页面上

Answer 4

好的，由于您使用的是单页浏览器，而没有跟踪用户在单击联系表单时的位置，您最简单的选择是使用target 属性在隐藏的 iframe 中发送表单提交。然后你使用 javascript 来隐藏联系表单。

这样做的好处是在发送表单的同时不重新加载页面。您也可以在表单提交页面中使用top 编写 JavaScript 将信息发送到您的主页，并在表单正确提交时显示“感谢您的反馈”之类的小消息。