AJAX/PHP Form Sending on Local Server and not live server

233
November 21, 2016, at 6:43 PM

So I'm having a weird issue where a contact form I created works on my localhost but will not work live. I'm using AJAX and PHP for the form. When I send it both live and local, I get no errors in my code. On the live server, the form allows me to submit and gives a success message but the message never gets sent. Not quite sure why it works locally but fails on the live server.

Here's the code for the form:

<form class="column small-12 medium-6 large-6 contact-form" id="formContact" action="contact-form-post2.php" method="post">
<div class="row">
    <div class="column large-12">
        <div class="contactResponse"></div>
    </div>
</div>
<div class="row">
    <div class="column large-12">
        <input type="text" name="firstLastName"  id="cname" placeholder="First & Last Name" value required>
    </div>
</div>
<!--/.row -->
<div class="row">
    <div class="column large-12">
        <input type="email" name="email" id="cemail"  placeholder="Email" value required>
    </div>
</div>
<!--/.row -->
<div class="row">
    <div class="column large-12">
        <textarea name="message" rows="10" id="ccomment" value required></textarea>
    </div>
</div>
<!-- /.row -->
<div class="row">
    <div class="column large-12">
        <button type="submit" id="submit" name="submit" class="button submit">Submit</button>
    </div>
</div>

Below is the code for the form validation and and submission

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $name    = $_POST['firstLastName'];
    $email   = $_POST['email'];
    $message = $_POST['message'];
    $to      = "shekinahc.smith@gmail.com";
    $subject = "Website Contact Form Message";
    $headers = "From: $email";
    mail($to,$subject,$message,$headers);
}
 ?>

 $("#formContact").validate({
    // converting error message to placeholder to style with red background
    errorPlacement: function (error, element) {
        element.attr("placeholder", error[0].outerText);
    },
    submitHandler: function(form) {
        $.ajax({
            url: 'contact-form-post2.php',
            type: 'POST',
            data: $(form).serialize(),
            success: function(response) {
                var submit = $(form).find( 'button[type="submit"]' );
                $( ".contactResponse" ).html('Your message has been sent. We will contact you soon.');
                submit.text('Sent, Thank you');
                submit.attr("disabled", true); 
            }            
        });
    }
});
Answer 1

There were a few issues in your code, try this:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $name = $_POST['firstLastName'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    $to = "shekinahc.smith@gmail.com";
    $subject = "Website Contact Form Message";
    $headers = "From: test@{$_SERVER['SERVER_NAME']}\r\n";
    mail($to, $subject, $message, $headers);
}
?>
<script type="text/javascript">
    $("#formContact").validate({
        // converting error message to placeholder to style with red background
        errorPlacement: function (error, element) {
            element.attr("placeholder", error[0].outerText);
        },
        submitHandler: function (form) {
            $.ajax({
                url: 'contact-form-post2.php',
                type: 'POST',
                data: $(form).serialize(),
                success: function (response) {
                    var submit = $(form).find('button[type="submit"]');
                    $(".contactResponse").html('Your message has been sent. We will contact you soon.');
                    submit.text('Sent, Thank you');
                    submit.attr("disabled", true);
                }
            });
        }
    });
</script>
<form class="column small-12 medium-6 large-6 contact-form" id="formContact" action="contact-form-post2.php" method="post">
    <div class="row">
        <div class="column large-12">
            <div class="contactResponse"></div>
        </div>
    </div>
    <div class="row">
        <div class="column large-12">
            <input type="text" name="firstLastName" id="firstLastName" placeholder="First & Last Name" value required>
        </div>
    </div>
    <div class="row">
        <div class="column large-12">
            <input type="email" name="email" id="email" placeholder="Email" value required>
        </div>
    </div>
    <div class="row">
        <div class="column large-12">
            <textarea name="message" rows="10" id="ccomment" required></textarea>
        </div>
    </div>
    <div class="row">
        <div class="column large-12">
            <button type="submit" id="submit" name="submit" class="button submit">Submit</button>
        </div>
    </div>
</form>

The key change is that the From address in the mail headers were using the users POST'ed email, which will have a different domain to the test/live server. This often prevents the mail from reaching it's destination however somehow must be allowed from your live server.

Another thing noticed: 2 form fields had 2 different id's declared, rendering the html invalid and this can cause js errors in some cases - each html element can have only 1 single id attribute.

Answer 2

So I started going through my hosting and I had an htaccess file from a previous project left on my test subdomain. Once I deleted it, everything started working.

READ ALSO
onclick event doesn&#39;t wait for file selection

onclick event doesn't wait for file selection

I am trying to use file input in html using a single button. .

164
Filtering google map markers with Knockout.js

Filtering google map markers with Knockout.js

I'm trying to use a hide google maps markers using a search bar. I only want matches to show on the map, and I want non-matches to be hidden.

306
How do I execute a form with PHP after jQuery submit()

How do I execute a form with PHP after jQuery submit()

This is the first time I'm submitting a form with jQuery. .

243