location.href does not work and it redirects to a blank page

Question

I have a contact form on my website, and after you completed that and send me an e-mail, I made in a way that it refreshes the page and sends you to my website's url. In my case, it doesn't do that, and just redirects to my php file, being blank. Thank you so much in advance.

Here is the javascript code:

// 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';
    });

This is the 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>");

?>

And the 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>

And the 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>

Answer 1

The problem is that you're loading the jQuery lib after your javascript code.

There is a certain hierarchy on which the page is loaded. So if you're going to use jQuery lib, you should load it before any dependant script.

What i did was to simply move:

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

So it was placed before:

<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>

At this point, your browser would know what "$" is, and would properly execute your jQuery script.