PHP form submit with validation & Bootstrap issue

Question

I am really new to PHP and bootstrap and pretty much everything. I've been trying to follow several tutorials about making a form with bootstrap and using PHP to send the form via email. I've gotten parts to work and others not. What I have been trying to do is get the form to show error messages under each form element if parameters haven't been met. Then, once everything is filled out correctly the form submits without refreshing the page but DOES show a success message. I've been combining several tutorials but this one is the one I'm trying to emulate with the error and success messages. https://bootstrapbay.com/blog/working-bootstrap-contact-form/

Currently the form submits and emails IF everything is filled out correctly but loads the .php file and sits there at a blank screen. If the name isn't entered then it doesn't send the email and still just loads the .php file with a blank screen. Any help would be appreciated! Below is my PHP and HTML snippet

HTML

 <form name="adoptionForm" method="post" action="phpForms/adoption_doc.php" class="form-horizontal" role="form"> <div class="form-group"> <label for="name" class="col-sm-2 control-label">Name</label> <div class="col-sm-10"> <input type="text" class="form-control" id="name" name="name" placeholder="Your Name"> <?php echo "<p class='text-danger'>$errName</p>";?> </div> </div> <div class="form-group"> <label for="email" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="email" name="email" placeholder="Your Email"> <?php echo "<p class='text-danger'>$errEmail</p>";?> </div> <div class="form-group"> <div class="col-lg-offset-2 col-lg-10"> <button type="submit" class="btn btn-default"> Send Message </button> </div> </div> </form> 

PHP

 <?php /* Set e-mail recipient */ $myemail = "stackoverflowTest@gmail.com"; /* POSTS INFO */ $name = $_POST['name']; $email = $_POST['email']; $address = $_POST['address']; $city = $_POST['city']; $state = $_POST['state']; /* Let's prepare the message for the e-mail */ $subject = "$name has sent you a message"; $message = " Someone has sent you a message using your contact form: Name: $name Email: $email Address: $address City: $city State: $state "; // Check if name has been entered if (!$_POST['name']) { $errName = 'Please enter your name'; } /* Send the message using mail() function */ if (!$errName && !$errEmail) { if (mail ($myemail, $subject, $message)) { $result='<div class="alert alert-success">Thank You! I will be in touch</div>'; } else { $result='<div class="alert alert-danger">Sorry there was an error sending your message. Please try again later</div>'; } } ?> 

Answer 1

I tested this code, and it is an updated copy of the code you are trying to use that should work.

You will need to change the action on the form to whatever name of your page is.

<?php
if ($_POST["submit"]) {
    $name = $_POST['name'];
    $email = $_POST['email'];

    $to = 'stackoverflowTest@gmail.com';
    $subject = "$name has sent you a message";
    // Check if name has been entered
    if (!$_POST['name']) {
        $errName = 'Please enter your name';
    } else {

    }

    // Check if email has been entered and is valid
    if (!$_POST['email'] || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
        $errEmail = 'Please enter a valid email address';
    } else {
        $from = $email;
    }

    // set body of message to be sent

    $message = "
        Someone has sent you a message using your contact form:

        Name: $name
        Email: $email
        Address: $address
        City: $city
        State: $state
        ";

    //Check if address has been entered
    if (!$_POST['address']) {
        $errAddress = 'Please enter your street address';
    } else {
        $address = $_POST['address'];
    }

    //Check if city has been entered
    if (!$_POST['city']) {
        $errCity = 'Please enter your city';
    } else {
        $city = $_POST['city'];
    }

    //Check if state has been entered
    if (!$_POST['state']) {
        $errState = 'Please enter your state';
    } else {
        $address = $_POST['state'];
    }

// If there are no errors, send the email
    if (!$errName && !$errEmail && !$errAddress && !$errCity && !$errState) {
        if (mail($to, $subject, $message, $from)) {
            $result = '<div class="alert alert-success">Thank You! I will be in touch</div>';
        } else {
            $result = '<div class="alert alert-danger">Sorry there was an error sending your message. Please try again later.</div>';
        }
    } else {
        $result = '<div class="alert alert-danger">Error in checking.</div>';
    }
}
?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Bootstrap contact form with PHP example by BootstrapBay.com.">
        <meta name="author" content="BootstrapBay.com">
        <title>Adoption Form</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3">
                    <h1 class="page-header text-center">Adoption Form</h1>
                    <form class="form-horizontal" role="form" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">Name</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="<?php echo htmlspecialchars($_POST['name']); ?>">
                                <?php echo "<p class='text-danger'>$errName</p>"; ?>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="email" class="col-sm-2 control-label">Email</label>
                            <div class="col-sm-10">
                                <input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com" value="<?php echo htmlspecialchars($_POST['email']); ?>">
                                <?php echo "<p class='text-danger'>$errEmail</p>"; ?>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="address" class="col-sm-2 control-label">Street Address</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="address" name="address" placeholder="Your Street Address">
                                <?php echo "<p class='text-danger'>$errAddress</p>"; ?>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="city" class="col-sm-2 control-label">City</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="city" name="city" placeholder="Your City">
                                <?php echo "<p class='text-danger'>$errCity</p>"; ?>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="state" class="col-sm-2 control-label">State</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="state" name="state" placeholder="Your State">
                                <?php echo "<p class='text-danger'>$errState</p>"; ?>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-10 col-sm-offset-2">
                                <input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-10 col-sm-offset-2">
                                <?php echo $result; ?>  
                            </div>
                        </div>
                    </form> 
                </div>
            </div>
        </div>   
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    </body>
</html>