DNkG
Reputation: 49
Getting user inputs from HTML form
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: [email protected]" 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>Upvotes: 2
Views: 4812
Answers (5)
nasrin begum pathan
Reputation: 53
<html lang="en">
<head>
<title>Young Bar</title>
<!-- Recommended meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- PyScript CSS -->
<link rel="stylesheet" href="https://pyscript.net/releases/2023.12.1/core.css">
<!-- This script tag bootstraps PyScript -->
<script type="module" src="https://pyscript.net/releases/2023.12.1/core.js"></script>
<link rel="manifest" href="./psadc-manifest.json">
</head>
<body>
<div align="center">
<h1>Dave's Pizza Place</h1>
</div>
<div>
<label for="datetime">Date:</label>
       <input type="date" id="input1" name="user_date" />
</div>
<div>
<label for="firstname">Firstname:</label>
 <input type="text" pattern="[A-Za-z-']+" id="input2" name="firstname" placeholder="firstname" maxlength="20"/>
</div>
<div>
<label for="lastname">Lastname:</label>
 <input type="text" pattern="[A-Za-z-']+" id="input3" name="lastname" placeholder="Lastname" maxlength="20"/>
</div>
<div>
<label for="mail">Address:</label>
   <input type="text" name="user_mail" id="input4" placeholder="Full Address"/>
</div>
<div>
<label for="tel">Phone#:</label>
   <input type="tel" id="input5" pattern="[0-9]+"" name="user_phone" placeholder="(403)123-1234"/>
</div>
<p></p>
<form>
<fieldset>
<legend>Choose Your Pizza Type:</legend>
<div>
<input type="radio" id="8" name="contact" value="8" checked/>
<label for="contactChoice1">Small ($8)</label>
<input type="radio" id="contactChoice2" name="contact" value="10" />
<label for="contactChoice2">Medium ($10)</label>
<input type="radio" id="contactChoice3" name="contact" value="15" />
<label for="contactChoice3">Large ($15)</label>
<input type="radio" id="contactChoice4" name="contact" value="18" />
<label for="contactChoice3">ExtraLarge ($18)</label>
</div>
</fieldset>
</form>
<p></p>
<form>
<fieldset>
<legend>Specialities:</legend>
<div>
<input type="radio" id="contactChoice1" name="contact1" value="3" checked/>
<label for="contactChoice1">Super Cheesy ($3)</label>
<input type="radio" id="contactChoice2" name="contact1" value="5" />
<label for="contactChoice2">Extra Meaty ($5)</label>
<input type="radio" id="contactChoice3" name="contact1" value="2" />
<label for="contactChoice3">Really Veggie ($2)</label>
</div>
</fieldset>
</form>
<p></p>
<form>
<fieldset>
<legend>Extra Toppings:</legend>
<div>
<input type="checkbox" id="contactChoice1" name="contact2" value="1.5" checked/>
<label for="contactChoice1">Extra Cheese ($1.50)</label>
<input type="checkbox" id="contactChoice2" name="contact2" value="1.50" />
<label for="contactChoice2">Pepperoni ($1.50)</label>
<input type="checkbox" id="contactChoice3" name="contact2" value="1.50" />
<label for="contactChoice3">Mushrooms ($1.50)</label>
<input type="checkbox" id="contactChoice4" name="contact2" value="1.50" />
<label for="contactChoice4">Bacon ($1.50)</label>
<input type="checkbox" id="contactChoice5" name="contact2" value="1.50" />
<label for="contactChoice5">Olives ($1.50)</label>
</div>
</fieldset>
</form>
<p></p>
<button py-click="myFunction" id="add">Price Your pizza</button>
<p></p>
<script type="py">
from pyscript import display
from datetime import datetime
now = datetime.now()
def myFunction(event):
from pyscript import document
Date = document.getElementById("input1").value
Firstname = document.getElementById("input2").value
Lastname = document.getElementById("input3").value
Address = document.getElementById("input4").value
Phone = document.getElementById("input5").value
t = now.strftime("%m/%d/%Y, %H:%M:%S")
rate2=[]
rate = document.querySelector('input[name="contact"]:checked').value
rate1 = document.querySelector('input[name="contact1"]:checked').value
checkboxes = document.querySelectorAll('input[type=checkbox]:checked')
for i in range(checkboxes.length):
rate2.append(checkboxes[i].value)
display(f"Today is: {t}")
display(f"Date: {Date}")
display(f"Firstname: {Firstname}")
display(f"Lastname: {Lastname}")
display(f"Address: {Address}")
display(f"Phone: {Phone}")
s1 = list(map(float, rate2))
s1 = (sum(s1))
display(f"Total: {int(rate)+int(rate1)+int(s1)}")
</script>
</html> Upvotes: 0
Wahyu Sionk
Reputation: 1
<!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: [email protected]" 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>Upvotes: 0
Jaini
Reputation: 100
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 !
Upvotes: 1
gourav bajaj
Reputation: 182
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']";
?>
Upvotes: 1
shyamm
Reputation: 550
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;
?>
Upvotes: 2
Related Questions
- How do I get user input from text fields and display it on the webpage?
- Clicking a button and getting the input from a user
- HTML/JS User inputs
- Need help getting and using user input with HTML form in JavaScript
- Getting an input from a form using JavaScript in html
- HTML input to Javascript
- Getting text from a forms input. Javascript
- How to get data from a form?
- Get HTML input from user
- Using javascript to take HTML form inputs