I have a RSVP form that I just want to store that data into a list on another html page called rsvplist.html without opening the page rsvplist.html
I am only using rsvplist.html as a way to store what people are submitting.
I currently do not have any JavaScript yet because I am not sure how to best approach this.
html:
<form id="fs-frm" name="basic-rsvp-form" accept-charset="utf-8" action="rsvplist.html" method="post">
<fieldset id="fs-frm-inputs">
<label for="full-name">Full Name</label>
<input type="text" name="name" id="full-name" placeholder="First and Last" required="">
<label for="attending">Will you Attend?</label>
<select name="attending" id="attending" required="">
<option>Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<label for="plus">And with how many guests?</label>
<select name="plus" id="plus" required="">
<option value="0" selected="">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="hidden" name="_subject" id="email-subject" value="RSVP">
</fieldset>
<input type="submit" value="RSVP">
</form>
and just in case here is the CSS used for the form:
/*
*RSVP Form
*/
#fs-frm input,
#fs-frm select,
#fs-frm textarea,
#fs-frm fieldset,
#fs-frm optgroup,
#fs-frm label,
#fs-frm #card-element:disabled {
font-family: inherit;
font-size: 100%;
color: inherit;
border: none;
border-radius: 0;
display: block;
width: 100%;
padding: 0;
margin: 0;
-webkit-appearance: none;
-moz-appearance: none;
}
#fs-frm label,
#fs-frm legend,
#fs-frm ::placeholder {
margin-bottom: .5rem;
padding-top: .2rem;
display: flex;
align-items: baseline;
}
/* border, padding, margin, width */
#fs-frm input,
#fs-frm select,
#fs-frm textarea,
#fs-frm #card-element {
border: 1px solid rgba(0,0,0,0.2);
background-color: rgba(255,255,255,0.5);
padding: .75em 1rem;
margin-bottom: 1.5rem;
}
#fs-frm input:focus,
#fs-frm select:focus,
#fs-frm textarea:focus {
background-color: white;
outline-style: solid;
outline-width: thin;
outline-color: gray;
outline-offset: -1px;
}
#fs-frm [type="text"],
#fs-frm [type="email"] {
width: 100%;
}
#fs-frm [type="button"],
#fs-frm [type="submit"],
#fs-frm [type="reset"] {
width: auto;
cursor: pointer;
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
}
#fs-frm [type="button"]:focus,
#fs-frm [type="submit"]:focus,
#fs-frm [type="reset"]:focus {
outline: none;
}
#fs-frm [type="submit"],
#fs-frm [type="reset"] {
margin-bottom: 0;
}
#fs-frm select {
text-transform: none;
}
#fs-frm [type="checkbox"] {
-webkit-appearance: checkbox;
-moz-appearance: checkbox;
appearance: checkbox;
display: inline-block;
width: auto;
margin: 0 .5em 0 0 !important;
}
#fs-frm [type="radio"] {
-webkit-appearance: radio;
-moz-appearance: radio;
appearance: radio;
}
/* address, locale */
#fs-frm fieldset.locale input[name="city"],
#fs-frm fieldset.locale select[name="state"],
#fs-frm fieldset.locale input[name="postal-code"] {
display: inline;
}
#fs-frm fieldset.locale input[name="city"] {
width: 52%;
}
#fs-frm fieldset.locale select[name="state"],
#fs-frm fieldset.locale input[name="postal-code"] {
width: 20%;
}
#fs-frm fieldset.locale input[name="city"],
#fs-frm fieldset.locale select[name="state"] {
margin-right: 3%;
}
Any suggestions on how I would do this would be greatly appreciated.
Advertisement
Answer
Learned some PHP and MySQL, which wasn’t as hard as I thought it would be, to come up with this solution.
First I created a MySQL Database on the server hosting the website. I then created a table in the database called rsvpListTable. I then created three columns named guest_name, attending, and plus.
In this I will be using the generic USER_NAME PASSWORD DB_NAME for accessing the database. Keep in mind those are not the real values.
in index.php:
<form id="fs-frm" name="basic-rsvp-form" accept-charset="utf-8" action="#rsvpPage" method="post">
<fieldset id="fs-frm-inputs">
<label for="full-name">Full Name</label>
<input type="text" name="guest_name" id="full-name" placeholder="First and Last" required="">
<label for="attending">Will you Attend?</label>
<select name="attending" id="attending" required="">
<option value="">Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<label for="plus">And with how many guests?</label>
<select name="plus" id="plus" required="">
<option value="0" selected="">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</fieldset>
<input type="submit" name="submit" value="Submit" id="submit" />
</form>
<?php
/* Attempt MySQL server connection. */
$link = mysqli_connect("localhost", "USER_NAME", "PASSWORD", "DB_NAME");
// Check connection
if($link === false){
die("<p>ERROR: Could not connect.</p>");
}
// Escape user inputs for security
$guest_name = mysqli_real_escape_string($link, $_REQUEST['guest_name']);
$attending = mysqli_real_escape_string($link, $_REQUEST['attending']);
$plus = mysqli_real_escape_string($link, $_REQUEST['plus']);
// Attempt insert query execution
if(isset($_POST['submit'])){
$sql = "INSERT INTO rsvpListTable (guest_name, attending, plus) VALUES ('$guest_name', '$attending', '$plus') ON DUPLICATE KEY UPDATE attending = VALUES(attending), plus = VALUES(plus)";
if(mysqli_query($link, $sql)){
echo "<p>RSVP added successfully.</p>";
}
else{
echo "<p>ERROR: Could not execute $sql.</p>";
}
}
// Close connection
mysqli_close($link);
?>
Then to post the database contents on a separate page I created rsvpList.php and inside the <body> I put:
<?php
$username = "USER_NAME";
$password = "PASSWORD";
$database = "DB_NAME";
$mysqli = new mysqli("localhost", $username, $password, $database);
$query = "SELECT * FROM rsvpListTable";
echo '<table>
<tr>
<th>Name</th>
<th>Attending?</th>
<th>How many guests?</th>
</tr>';
if ($result = $mysqli->query($query)) {
while ($row = $result->fetch_assoc()) {
$guest_name = $row["guest_name"];
$attending = $row["attending"];
$plus = $row["plus"];
echo '<tr>
<td>'.$guest_name.'</td>
<td>'.$attending.'</td>
<td>'.$plus.'</td>
</tr>';
}
$result->free();
}
echo '</table>';
// Close connection
$mysqli->close();
?>
And that is basically my solution to this question.