How to create a single page PHP form submission - php

Question

I'm trying to create a contact form so people can leave messages on a website. Essentially I want it to be a single page process with a success or error message appearing on the same page. However, I'm a beginner in PHP so I'm not sure where to go from where I'm currently stuck at.
So far I've gotten the form to submit but always returns with missing fields even though no fields are missing. Also the page reloads and returns to the top of the page. Is there a way, after form submission, to have it not return to the top of the page after form submission?
Here's the HTML form, essentially it's a single page website segmented into different slides. Upon form submission I want the page to stay on slide4 where the form and success/error message will be.
<div id="slide4">
<div class="slidetitle">Contact Me</div>
<div class="content">
<form action="index.php" method="POST" id="contactform" target="_self">
<input type="hidden" name="postid" value="<?php $postid?>">
<table>
<tr><td><b>First Name:</b></td><td><input type="text" name="firstName" size="45" value="<?php $firstName?>"></td></tr>
<tr><td><b>Last Name:</b></td><td><input type="text" name="lastName" size="45" value="<?php $lastName?>"></td></tr>
<tr><td><b>Email:</b></td><td><input type="email" name="email" size="45" value="<?$email?>"></td></tr>
<tr><td><b>Phone:</b></td><td><input type="tel" name="phone" size="45" value="<?$phone?>"></td></tr>
<tr><td><b>Content:</b></td><td><textarea name="content" form="contactform" rows="10" cols="100"><?php echo $content; if (empty($content)){ echo "Enter text here...";} ?></textarea></td></tr>
<tr><td colspan=2 style="text-align: center"><input type=submit name="submit1" value="Leave me a message"></td></tr>
</table>
</form>
<div id="contactoutput">
<?php $output ?>
</div>
</div>
</div>
And here's the Updated PHP for the form after implementing the changes Frank suggested.
<?php
$firstName = "";
$lastName= "";
$email = "";
$phone = "";
$content = "";
$errMsg = "";
?>
<?php $errMsg ?>
<?php
if (isset($_POST['submit1'])) {
// ==========================
//validate user input
// set up the required array
$required = array("firstName","lastName","email","phone","content"); // note that, in this array, the spelling of each item should match the form field names
// set up the expected array
$expected = array("firstName","lastName", "email","phone","content","postid"); // again, the spelling of each item should match the form field names
$missing = array();
foreach ($expected as $field){
// isset($_POST[$field]): Note that if there is no user selection for radio buttons, checkboxes, selection list, then $_POST[$field] will not be set
// Under what conditions the script needs to record a field as missing -- $field is required and one of the following two (1) $_POST[$field] is not set or (2) $_POST[$field] is empty
//echo "$field: in_array(): ".in_array($field, $required)." empty(_POST[$field]): ".empty($_POST[$field])."<br>";
if (in_array($field, $required) && (!isset($_POST[$field]) || empty($_POST[$field]))) {
array_push ($missing, $field);
} else {
// Passed the required field test, set up a variable to carry the user input.
// Note the variable set up here uses a variable name as the $field value. In this example, the first $field in the foreach loop is "title" and a $title variable will be set up with the value of "" or $_POST["title"]
if (!isset($_POST[$field])) {
//$_POST[$field] is not set, set the value as ""
${$field} = "";
} else {
${$field} = $_POST[$field];
}
}
}
//print_r ($missing); // for debugging purpose
/* add more data validation here */
// ex. $price should be a number
/* proceed only if there is no required fields missing and all other data validation rules are satisfied */
$stmt = $conn->stmt_init();
$sql = "Insert Into msg_table16 (firstName, lastName, email, content, phone, postid) values (?, ?, ?, ?, ?, ?)";
if($stmt->prepare($sql)){
// Note: user input could be an array, the code to deal with array values should be added before the bind_param statement.
$stmt->bind_param('ssssii',$firstName, $lastName,$email,$content,$phone,$postid);
$stmt_prepared = 1; // set up a variable to signal that the query statement is successfully prepared.
}
if ($stmt_prepared == 1){
if ($stmt->execute()){
$output = "<p>The following information has been saved in the database:<br><br>";
foreach($_POST as $key=>$value){
$output .= "<b>$key</b>: $value <br>"; //$key (form field names) may not be very indicative (ex. lname for the last name field), you can set up the form field names in a way that can be easily processed to produce more understandable message. (ex. use field names like "Last_Name", then before printing the field name, replace the underscore with a space. See php solution 4.4)
}
} else {
//$stmt->execute() failed.
$output = "<p>Database operation failed. Please contact the webmaster.";
}
} else {
// statement is not successfully prepared (issues with the query).
$output = "<p>Database query failed. Please contact the webmaster.";
}
} else {
// $missing is not empty
$output = "<p>The following required fields are missing in your form submission. Please check your form again and fill them out. <br>Thank you.<br>\n<ul>";
foreach($missing as $m){
$output .= "<li>$m";
}
$output .= "</ul>";
}
?>
So in summary, why is the form returning that fields are missing when I would fill them all in so there shouldn't be any missing. AND How do I have the form submit and not reload and return to the top of the page?
I apologize if there is any required information that I did not post in advance, if you guys need anymore code snippets please let me know. Thank you guys!

Answer 1

Just tried to make something of your code. But there are a few things you really need to take a look at:
You are missing some closing tags in your html, for example you are missing a </div> & </form> tag.
You can put all your php code at the top of your page. It's a best practice to seperate your logic from your view.
Proper php opening and closing tags looks like the following : <?php ... ?> not <= or <?
A proper PDO connection looks like this
<?php
try {
$db = new PDO("pgsql:dbname=pdo;host=localhost", "username", "password" );
echo "PDO connection object created";
}
catch(PDOException $e){
echo $e->getMessage();
}
?>
If you want to concatenate a ul to output your errors you will have to do that the as follow:
<?php
$str = '<ul>';
$str .= '<li></li>';
$str .= '<li></li>';
$str .= '</ul>';
?>
The foundation of the errors you are getting are caused by points like the above. Goodluck and ask if you have any more questions.

Answer 2

What about closing the form tag:
<div id="slide4">
<div class="slidetitle">Contact Me</div>
<div class="content">
<form action="index.php#slide4" method="POST" id="contactform">
<input type="hidden" name="postid" value="<?=$postid?>">
<table>
<tr>
<td><b>First Name:</b>
</td>
<td>
<input type="text" name="firstName" size="45" value="<?=$firstName?>">
</td>
</tr>
<tr>
<td><b>Last Name:</b>
</td>
<td>
<input type="text" name="lastName" size="45" value="<?$lastName?>">
</td>
</tr>
<tr>
<td><b>Email:</b>
</td>
<td>
<input type="email" name="email" size="45" value="<?$email?>">
</td>
</tr>
<tr>
<td><b>Phone:</b>
</td>
<td>
<input type="number" name="phone" size="45" value="<?$phone?>">
</td>
</tr>
<tr>
<td><b>Content:</b>
</td>
<td>
<textarea name="content" form="contactform" rows="10" cols="100">
<?php echo $content; if (empty($content)){ echo "Enter text here...";} ?>
</textarea>
</td>
</tr>
<tr>
<td colspan=2 style="text-align: center">
<input type=submit name="submit1" value="Leave me a message">
</td>
</tr>
</table>
</form> <!-- MISSING !! -->
</div>
</div>