Submitting a bootstrap form not working

Question

I'm trying to submit my Bootstrap form using php so that the data entered into the form is emailed to me from the page. Something somewhere is not working though, and unfortunately my php knowledge is lacking (and web searches have so far brought up nothing of use).

When you click submit the modal which the form is in instantly closes (a default HTML thing?). Re-opening the modal displays the the form error messages if you have left forms blank. If you submit the form with all the content present, nothing happens.

So my question is this: What have I done wrong, and how do I fix it to get the email to send? Also, can I stop the modal from closing when content is submitted but not complete?

EDIT: I have implemented the "correct" php for uploading an image, but it gives me an invalid file type even when they are valid. echo $target_file only returns the file_dir suggesting it is failing to ge the name of the file. What have I done wrong?

Here is the php:

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

//Image upload
$target_dir = "/img/gallery/";
$target_file = $target_dir . basename($_FILES["file"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);

// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["file"]["tmp_name"]);
    if($check !== false) {
        echo "File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
    } else {
        echo "File is not an image.";
        $uploadOk = 0;
    }
}

// Check if file already exists
if (file_exists($target_file)) {
    echo "Sorry, file already exists. Please rename your image.";
    $uploadOk = 0;
}

// Check file size
if ($_FILES["file"]["size"] > 500000) {
    echo "Sorry, your file is too large. Google how to reduce an image size or contact us if you need help with this.";
    $uploadOk = 0;
}

// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
    echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
    $uploadOk = 0;
}

// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
    echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
    if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_file)) {
        echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
    } else {
        echo "Sorry, there was an error uploading your file.";
    }
}

$from = 'Gallery Upload Form';
$to = 'email@example.com'; //I've only changed this for stackoverflow
$subject = 'New Gallery Image';

$body = "Name: $name\n Location: $location\n Description: $desc\n \n $file";

if (!$_POST['name']) {
    $errName = 'Please enter your name';
}

if (!$_POST['location']) {
    $errLocation = 'Please enter where your image was taken';
}

if (!$_POST['desc']) {
    $errDesc = 'Please enter a description of your image';
}

if (!$_POST['file']) {
    $errFile = 'Please upload your image file';
}

// If there are no errors, send the email
if (!$errName && !$errName && !$errLocation && !$errDesc && $errFile) {
    if (mail ($to, $subject, $body, $from)) {
        $result='<div class="alert alert-success">Thank You! Your image has been submitted.</div>';
    } else {
        $result='<div class="alert alert-danger">Sorry there was an error sending your message. Please try again later or report this to us.</div>';
    }
}
}
?>

And here is the HTML:

<div class="box">
        <h2>Upload your picture</h2>
        <p>Upload your picture and we'll upload it to the gallery. The best picture each month will be featured as the page background. You can also upload your pictures to our Facebook page with
          <font color="darkcyan">#gallery</font>.</p>
        <br>
        <!-- model content -->
        <!-- Button trigger modal -->
        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalNorm">Upload a Picture</button>

        <!-- Modal -->
        <div class="modal fade" id="myModalNorm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <!-- Modal Header -->
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                  <span aria-hidden="true">&times;</span>
                  <span class="sr-only">Close</span>
                </button>
                <h3 class="modal-title" id="myModalLabel">Upload Image</h3>
              </div>

              <!-- Modal Body -->
              <div class="modal-body">
                <form role="form" method="post" action="index.php">
                  <div class="form-group">
                    <label for="name">Your Name</label>
                    <input class="form-control" placeholder="John Smith" type="text" name="name" required value="<?php echo htmlspecialchars($_POST['name']); ?>">
                    <?php echo "<p class='text-danger'>$errName</p>";?>
                  </div>
                  <div class="form-group">
                    <label for="location">Location</label>
                    <input class="form-control" placeholder="South-west bank of Trout Pool." type="text" name="location" value="<?php echo htmlspecialchars($_POST['location']); ?>">
                    <?php echo "<p class='text-danger'>$errLocation</p>";?>
                  </div>
                  <div class="form-group">
                    <label for="desc">Picture Description</label>
                    <textarea class="form-control" name="desc" rows="3" placeholder="A picture of a 6lbs trout, my biggest all season."><?php echo htmlspecialchars($_POST['desc']); ?></textarea>
                    <?php echo "<p class='text-danger'>$errDesc</p>";?>
                  </div>
                  <div class="form-group">
                    <label for="btn-upload">Upload Image File</label>
                    <input type="file" id="exampleInputFile" name="file" value="<?php echo htmlspecialchars($_POST['file']); ?>">
                    <?php echo "<p class='text-danger'>$errFile</p>";?>
                  </div>
                  <input id="submit" name="submit" type="submit" value="Upload" class="btn btn-primary">
                </form>
              </div>

              <!-- Modal Footer -->
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>
        <?php echo $result; ?>
      </div>

EDIT: A stupid question - Do you have to configure anything server-side for the email to be sent?

Answer 1

Your uploading a file your html form must have the enctype="multipart/form-data" attribute.Use $_FILES variable to access information regarding uploaded file.

check these link for more information on $_FILES

http://php.net/manual/en/reserved.variables.files.php

http://www.tutorialsscripts.com/php-tutorials/php-files-variable.php