Getting user inputs from HTML form
Question
I want to be able to get the inputs that a user enters in my HTML form and be able to print them later on my website. I would love to be able to print all the user info with the selections they have made to there pizzas. I have been trying for the last few hours to do this and no luck :( Looking to get the date, first name, last name, address and phone.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Daves Pizza</title> <link href="new.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="pizza.js"></script> </head> <body> <div align="center"> <h5>Today is: <span id="dtfield"></span></h5> </div> <br> <div align="center"> <h1>Dave's Pizza Place</h1> </div> <div align="center"> <div class="user"> <form id="contact_form" action="mailto: david.genge@edu.sait.ca" name="userInfo" method="POST" enctype="text"> <br> <div> <label for="datetime">Date:</label> <input type="date" name="user_date" /> </div> <div> <label for="firstname">Firstname:</label> <input type="text" pattern="[A-Za-z-']+" name="firstname" value="Firstname" maxlength="20"/> </div> <div> <label for="lastname">Lastname:</label> <input type="text" pattern="[A-Za-z-']+" name="lastname" placeholder="Lastname" maxlength="20"/> </div> <div> <label for="mail">Address:</label> <input type="text" name="user_mail" placeholder="Full Address"/> </div> <div> <label for="tel">Phone#:</label> <input type="tel" pattern="[0-9]+"" name="user_phone" placeholder="(403)123-1234"/> </div> </form> </div> </div> <div align="center"> <div class="pizza"> <form name="costEstimation"> <table border="0"> <tr valign="middle"> <td> <br> <b>Choose Your Pizza Type<b><br> <input type="radio" name="pizzasize" value="8" checked>Small $8<br> <input type="radio" name="pizzasize" value="10">Medium $10<br> <input type="radio" name="pizzasize" value="15">Large $15<br> <input type="radio" name="pizzasize" value="18">Extra Large $18<br></td> <td></td> </tr> <tr> <td> <b>Specialities<b><br> <input type="radio" name="special" value="3">Super Cheesy $3<br> <input type="radio" name="special" value="5">Extra Meaty $5<br> <input type="radio" name="special" value="2">Really Veggie $2<br></td> <td> <b>Extra Toppings </b> <br> <input type="checkbox" name="cheese" value="1.5">Extra Cheese $1.50<br> <input type="checkbox" name="pepperoni" value="1.5">Pepperoni $1.50<br> <input type="checkbox" name="mushrooms" value="1.5">Mushrooms $1.50<br> <input type="checkbox" name="bacon" value="1.5">Bacon $1.50<br> <input type="checkbox" name="olives" value="1.5">Olives $1.50<br> </td> </tr> </table> </form> <h2>Pizza Cost: </h2><h2><span id="result"></span></h2> <input type=button value="Price Your Pizza" onClick="pizza(); return false;"> <button type="submit">Send your message</button> <br><br><br> <table> <tr> <td> <figure> <center> <img src="cheese.jpg" alt="cheese" height="100" width="100"> </center> </figure> </td> <td> <figure> <center> <img src="veg.jpg" alt="veg" height="100" width="100"> </center> </figure> </td> <td> <figure> <center> <img src="meat.jpg" alt="meat" height="100" width="100"> </center> </figure> </td> </tr> </table> </div> <br> <br> <br> </div> </body> </html>
3 answers
solution1
2 2017-02-09 07:19:36
You need to use form for saving the input values entered by user. you can do it by either GET or POST method. here is the sample demo with Validation:
<!DOCTYPE HTML>
<html>
<head>
<style>
.error {color: #FF0000;}
</style>
</head>
<body>
<?php
// define variables and set to empty values
$nameErr = $emailErr = $genderErr = $websiteErr = "";
$name = $email = $gender = $comment = $website = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["name"])) {
$nameErr = "Name is required";
} else {
$name = test_input($_POST["name"]);
// check if name only contains letters and whitespace
if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
$nameErr = "Only letters and white space allowed";
}
}
if (empty($_POST["email"])) {
$emailErr = "Email is required";
} else {
$email = test_input($_POST["email"]);
// check if e-mail address is well-formed
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$emailErr = "Invalid email format";
}
}
if (empty($_POST["website"])) {
$website = "";
} else {
$website = test_input($_POST["website"]);
// check if URL address syntax is valid (this regular expression also allows dashes in the URL)
if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$website)) {
$websiteErr = "Invalid URL";
}
}
if (empty($_POST["comment"])) {
$comment = "";
} else {
$comment = test_input($_POST["comment"]);
}
if (empty($_POST["gender"])) {
$genderErr = "Gender is required";
} else {
$gender = test_input($_POST["gender"]);
}
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
<h2>PHP Form Validation Example</h2>
<p><span class="error">* required field.</span></p>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
Name: <input type="text" name="name" value="<?php echo $name;?>">
<span class="error">* <?php echo $nameErr;?></span>
<br><br>
E-mail: <input type="text" name="email" value="<?php echo $email;?>">
<span class="error">* <?php echo $emailErr;?></span>
<br><br>
Website: <input type="text" name="website" value="<?php echo $website;?>">
<span class="error"><?php echo $websiteErr;?></span>
<br><br>
Comment: <textarea name="comment" rows="5" cols="40"><?php echo $comment;?></textarea>
<br><br>
Gender:
<input type="radio" name="gender" <?php if (isset($gender) && $gender=="female") echo "checked";?> value="female">Female
<input type="radio" name="gender" <?php if (isset($gender) && $gender=="male") echo "checked";?> value="male">Male
<span class="error">* <?php echo $genderErr;?></span>
<br><br>
<input type="submit" name="submit" value="Submit">
</form>
<?php
echo "<h2>Your Input:</h2>";
echo $name;
echo "<br>";
echo $email;
echo "<br>";
echo $website;
echo "<br>";
echo $comment;
echo "<br>";
echo $gender;
?>
solution2
1 2017-02-09 07:36:55
you need to use any server side language to get input from user.
Use this statement
<form method="GET or POST" action="file_location/file_name(on which you want to get input)">
Php is very simple language you can learn it easly i am giving you an example:
index.html
<form method="GET" action="localhost://getdata.php">
<input type="text" name="UserName" />
<input type="button" value="Submit" />
</form>
Focus on name tag i used in input statement "UserName" your data will be send by binding user input in it and then you can display data using php with this name as showing below
getdata.php
<?php
echo "$_GET['UserName']";
?>
solution3
1 2017-02-09 08:33:30
if you want to get the data using javascript then,
HTML:
<input type="text" name="name" id="uniqueID" value="value" />
<span id="output"></span>
JS:
var nameValue = document.getElementById("uniqueID").value;
document.getElementById("output").innerHTML=nameValue;
will work for you !
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
ReactJS: Getting inputs from form
Getting values from html inputs
Getting hidden inputs in HTML (that has period in name) from a form using Javascript
Retrieve Inputs from HTML Form as URL
html form remove inputs from url
Remove HTML TAG Inputs from input Form
Draggable HTML <form> inputs
html form is not recognizing inputs
HTML/JS User inputs
I am writing a code to upload form inputs from user to Mysql Database using ExpressJS, but i am getting error as Cannot Post
Related Tags