Trying to create a "Contact Us" modal form and I get undefined indexes

Question

So, I'm relatively new to coding and I have been trying to design a website for a friend using bootstrap. Here's the form's code:

    <form class="form-horizontal" method="post" id="form">
                <div class="modal-header">
                    <h4>Contact us for support</h4>
                </div>
                <div class="modal-body">

                    <div class="form-group">

                        <label for="contact-email" class="col-lg-2 control-label">Email</label>
                        <div class="col-lg-10">
                            <input type="email" class="form-control" name="contact-email" placeholder="you@example.com">
                        </div>

                    </div>

                    <div class="form-group">

                        <label for="contact-subj" class="col-lg-2 control-label">Subject:</label>
                        <div class="col-lg-10">
                            <input type="text" class="form-control" name="contact-subj" placeholder="The reason you are contacting us">
                        </div>

                    </div>

                    <div class="form-group">

                        <label for="contact-msg" class="col-lg-2 control-label">Message:</label>
                        <div class="col-lg-10">

                            <textarea name="contact-msg" class="form-control" placeholder="Your message goes here" rows="8" cols="30"></textarea>

                        </div>

                    </div>


                </div>
                <div class="modal-footer">
                    <a class="btn btn-default" data-dismiss="modal">Cancel</a>
                    <input type="submit" name="submit" class="btn btn-primary" value="Send"></input>
                </div>
            </form>

The Javascript:

    <script language="JavaScript">
        $(document).ready(function() {
        $("#submit").click(function() {
        var subj = $("#contact-subj").val();
        var email = $("#contact-email").val();
        var message = $("#contact-message").val();
        $("#returnmessage").empty(); // To empty previous error/success message.
        // Checking for blank fields.
        if (name == '' || email == '' || message == '') {
        alert("Please Fill Required Fields");
        } else {
        // Returns successful data submission message when the entered information is stored in database.
        $.post("http://localhost/php/contact-form-handler.php", {
        email1: email,
        message1: message,
        subject1: subj
        }, function(data) {
        $("#returnmessage").append(data); // Append returned message to message paragraph.
        if (data == "Your Query has been received, We will contact you soon.") {
        $("#form")[0].reset(); // To reset form fields on success.
        }
        });
        }
        });
        });
    </script>

And the php:

    <?php
$email = $_POST['email1'];
$message = $_POST['message1'];
$subject = $_POST['subj'];
$email = filter_var($email, FILTER_SANITIZE_EMAIL); // Sanitizing E-mail.

if (filter_var($email, FILTER_VALIDATE_EMAIL)) {


$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= 'From:' . $email. "\r\n"; // Sender's Email
$template = '<div style="padding:50px; color:white;">Hello ' . $name . ',<br/>'
. '<br/>Thank you...! For Contacting Us.<br/><br/>'
. 'Name:' . $name . '<br/>'
. 'Email:' . $email . '<br/>'
. 'Contact No:' . $contact . '<br/>'
. 'Message:' . $message . '<br/><br/>'
. 'This is a Contact Confirmation mail.'
. '<br/>'
. 'We Will contact You as soon as possible .</div>';
$message = "<div style=\"background-color:#7E7E7E; color:white;\">" . $template . "</div>";

$message = wordwrap($message, 70);

mail("ssiannas@gmail.com", $subject, $message, $headers);
echo "Your Query has been received, We will contact you soon.";
}
else {
echo "<span>* invalid email *</span>";
}
?>

I have hosted the php file locally using xampp but still can't get the email to work. I just get no response from the form, whereas if I put the action="http://localhost/php/contact-form-handler.php" I get unidentified indexes on the php's lines 3,4,5 (the $_POSTs)

I can see that you are trying to post the message using AJAX—however, in the event that your JS is not loading, your form will fall back to the default submit—yet none of your form inputs have `name` attributes that matches the `$_POST[]` variables. Also, what happens when you try to print the `$_POST[]` super global variable? What do you see? — Terry, Sep 12 '15 at 12:17

Trying to create a "Contact Us" modal form and I get undefined indexes

0 Answers0