location.href不起作用,它重定向到空白页面

时间:2017-04-28 15:46:01

标签: javascript php html5

我的网站上有一个联系表格,在您完成并向我发送电子邮件后,我提出了刷新页面并将您发送到我网站的网址的方式。在我的情况下,它不会这样做,只是重定向到我的PHP文件,是空白。非常感谢你。

以下是javascript代码:

// Email validation
function validateEmail(email) {
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}

    // Run validation
    $("#validate").click(function() {
        $("#validate").bind("click", validate);
    });

    function validate() {
        $("#result").text("");
        var email = $("#Email").val();
        if (validateEmail(email)) {
         $("#send").show("fast");
         $("#validate").hide("fast");

        } else {
            $("#result").text("" + email + "is not a valid email address ");
        }
        return false;
    }

    $("#send").click(function() {
         $("#result").text("e-mail sent ");
    //    alert("e-mail sent ");
          location.href='http://www.google.com';
    });

这是php:

<?php

$EmailFrom = "contact@email.com";
$EmailTo = "contact@email.com";
$Subject = "New message";
$Name = Trim(stripslashes($_POST['Name']));
$Email = Trim(stripslashes($_POST['Email']));
$Message = Trim(stripslashes($_POST['Message']));

// validation
$validationOK=true;
if (!$validationOK) {
  print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">";
  exit;
}

// prepare email body text
$Body = "";
$Body .= "Name: ";
$Body .= $Name;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $Email;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $Message;
$Body .= "\n";

// send email
$success = mail($EmailTo, $Subject, $Body, "From: <$EmailFrom>");

?>

脚本:

<script type="text/javascript">
        var frm = $('#messenger');
    frm.submit(function(ev) {
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function(data) {}
        });
        ev.preventDefault();
    });
</script>

和html:

<form id="messenger" method="post" action="message.php">
                                    <div class="field half first">
                                        <label for="name">Name</label>
                                        <input type="text" name="Name" id="Name" />
                                    </div>
                                    <div class="field half">
                                        <label for="email">Email</label>
                                        <input type="text" name="Email" id="Email" />
                                    </div>
                                    <div class="field">
                                        <label for="message">Message</label>
                                        <textarea name="Message" id="Message" rows="5"></textarea>
                                    </div>

                                    <div class="none" id="send">
                                        <input type="submit" name="submit" value="submit" />
                                    </div>

                                    <div id='validate'>
                                        <input class="fakeButton" type="submit" value="validate"/>
                                    </div>

                                    <p><span id="result"></span></p>
                                </form>

1 个答案:

答案 0 :(得分:0)

问题是你在你的javascript代码之后加载了jQuery lib

页面加载有一定的层次结构。因此,如果您要使用jQuery lib,则应在之前加载任何依赖脚本。

我所做的只是简单地移动:

<script src="assets/js/jquery-3.2.1.min.js"></script>

所以它放在:

之前
<script type="text/javascript">
  var frm = $('#messenger');
  frm.submit(function(ev) {
    $.ajax({
      type: frm.attr('method'),
      url: frm.attr('action'),
      data: frm.serialize(),
      success: function(data) {}
    });
    ev.preventDefault();
  });
</script>

此时,您的浏览器会知道“$”是什么,并且会正确执行您的jQuery脚本。