Getting user inputs from HTML form - javascript

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>

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;
?>

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']";
?>

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 !

Related

PHP radiobutton on click event change

I have created the following code.
for some reason its skips my if event when the radiobutton changes.
the if statment is whitin a FORM i dont think this matters?
<p><?php echo $rijden[$lan][0];?></p><input type="radio" name="JA" id="waarde1" value="waarde1" onClick="gestuurdjanee();"><b>Ja</b> <input type="radio" name="JA" value="waarde0" id="waarde0" onClick="gestuurdjanee();" ><b>Nee</b></br>
<?php
function gestuurdjanee() {
if(document.getElementById("waarde0").checked == true) {
//nee?>
<p><?php echo $merk[$lan][0];?> <input type="text" name="merk"/></p>
<p><?php echo $totaalassen[$lan][0];?> <input type="text" name="totaalassen"/></p>
<p><?php echo $gestuurdenassen[$lan][0];?> <input type="text" name="gestuurdenassen"/></p>
<p><?php echo $asconfig[$lan][0];?> <input type="text" name="asconfig2"/></p>
<p><?php echo $onstype[$lan][0];?> <input type="text" name="typebesturing"/></p>
<?php
}elseif(document.getElementById("waarde1").checked == true) {
//ja?>
<p><?php echo $typeconcurent[$lan][0];?> <input type="text" name="typetrailer"/></p>
<p><?php echo $asconfig[$lan][0];?> <input type="text" name="asconfig"/></p>
<p><?php echo $merk[$lan][0];?> <input type="text" name="merk"/></p>
<p><?php echo $onstype[$lan][0];?> <input type="text" name="onstype"/></p>
<p><?php echo $gestuurdas[$lan][0];?> <input type="text" name="gestuurdas"/></p>
<?php
}
else {
// niksingevuld
?>
<?php echo"Vink een van de optie's aan"?>
<?php
}
}
Combining JS and PHP like that won't work. As been commented, the PHP will only run once on the server. When it's done, it shows the result in the browser. Then the Javascript will run.
Instead create three divisions with different classes.
Then bind an event on changing the input.
Also see the comments in my code:
$(function() {
$('.div1, .div2').hide(); // hide div1 and div2 on page load
$('[name=JA]').on('change', function() { // bind an onchange function to the inputs
if( $('[name=JA]:checked').val() == 'waarde1' ) { // get the value that is checked
$('.div1').show(); // show div1
$('.div2, .div3').hide(); // hide other divs
}
else {
$('.div2').show(); // show div2
$('.div1, .div3').hide(); // hide other divs
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<?php echo $rijden[$lan][0];?>
</p><input type="radio" name="JA" id="waarde1" value="waarde1"><b>Ja</b>
<input type="radio" name="JA" value="waarde0" id="waarde0"><b>Nee</b></br>
<div class="div1">
DIV1
<p>
<?php echo $merk[$lan][0];?> <input type="text" name="merk" /></p>
<p>
<?php echo $totaalassen[$lan][0];?> <input type="text" name="totaalassen" /></p>
<p>
<?php echo $gestuurdenassen[$lan][0];?> <input type="text" name="gestuurdenassen" /></p>
<p>
<?php echo $asconfig[$lan][0];?> <input type="text" name="asconfig2" /></p>
<p>
<?php echo $onstype[$lan][0];?> <input type="text" name="typebesturing" /></p>
</div>
<div class="div2">
DIV2
<p>
<?php echo $typeconcurent[$lan][0];?> <input type="text" name="typetrailer" /></p>
<p>
<?php echo $asconfig[$lan][0];?> <input type="text" name="asconfig" /></p>
<p>
<?php echo $merk[$lan][0];?> <input type="text" name="merk" /></p>
<p>
<?php echo $onstype[$lan][0];?> <input type="text" name="onstype" /></p>
<p>
<?php echo $gestuurdas[$lan][0];?> <input type="text" name="gestuurdas" /></p>
</div>
<div class="div3">Vink een van de optie's aan</div>

My contact form gives me an internal server error (500) after testing / PHPMailer [duplicate]

This question already has answers here:
"Notice: Undefined variable", "Notice: Undefined index", "Warning: Undefined array key", and "Notice: Undefined offset" using PHP
(29 answers)
Closed 6 years ago.
I've done my own mail.php before, but I've been learning about PHPMailer and wanted to implement it on my form for my new site in development. Every time I test it by entering information and hitting send, it gives me an Internal Server Error, and not really explaining why, but it may have something to do with my header perhaps.
my site/page for reference
My code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="php/mail.php" method="POST">
<div class="form-group">
<input type="text" class="form-control" id="name" placeholder="Full Name" required>
</div>
<div class="form-group">
<input type="email" class="form-control" id="email" placeholder="Email Address" required>
<small class="text-muted">I will never share your email with anyone. Pinky swear.</small>
</div>
<div class="form-group">
<input type="phone" class="form-control" id="phone" placeholder="Phone Number" required>
</div>
<div class="form-group">
<input type="text" class="form-control" id="company" placeholder="Company (optional)">
</div>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="radio" id="optionsRadios1" value="Project" checked>Project
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="radio" id="optionsRadios2" value="Collab">Collaboration
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="radio" id="optionsRadios3" value="Other">Other
</label>
</div>
</div>
<div class="form-group">
<textarea class="form-control" id="message" rows="4" placeholder="What do you need?" required></textarea>
</div>
<button class="btn btn-primary" style="float: right;" type="submit">Send Away!</button>
</form>
Here's my php
<?php
//gather all form fields
$name = mysqli_real_escape_string($db, $_POST['name']);
$email = mysqli_real_escape_string($db, $_POST['email']);
$phone = mysqli_real_escape_string($db, $_POST['phone']);
$company = mysqli_real_escape_string($db, $_POST['company']);
$radio = mysqli_real_escape_string($db, $_POST['radio']);
$message = mysqli_real_escape_string($db, $_POST['message']);
if($name == "" || $email == "" || $phone == "" || $company == "" || $radio == "" || $message == "" ){
//this could load a modal or some type of error pop up
echo '<div class="alert alert-danger">The form submission is missing values.</div>';
exit();
}
else {
//include autoload
require 'php/PHPMailerAutoload.php';
$mail = new PHPMailer;
$mail->isMail(); // Set mailer to use SMTP
$mail->setFrom('from#example.com', 'Mailer');
$mail->addAddress('renegade13design#gmail.com', 'Joe User'); // Add a recipient
$mail->isHTML(true); // Set email format to HTML
$mail->Subject = 'Here is the subject';
$mail->Body = '
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="" type="text/css" media="screen, projection" />
<style>
h1 { font-size: 14px; }
body {font-family: helvetica neue, arial;}
</style>
</head>
<body>
<table style="width: 600px; padding: 12px;" align="center">
<tr>
<td><img src="img/form.jpg"></td>
</tr>
<tr>
<td><strong>Full Name:</strong> '.$name.'</td>
</tr>
<tr>
<td><strong>Email Address:</strong> '.$email.'</td>
</tr>
<tr>
<td><strong>Phone Number:</strong> '.$phone.'</td>
</tr>
<tr>
<td><strong>Company:</strong> '.$company.'</td>
</tr>
<tr>
<td><strong>What do you want?:</strong> '.$radio.'</td>
</tr>
<tr>
<td><strong>What do you need?:</strong> '.$message.'</td>
</tr>
</table>
</body>
</html>
';
if(!$mail->send()) {
echo 'Message could not be sent.';
echo 'Mailer Error: ' . $mail->ErrorInfo;
} else {
header( 'http://www.scratchmediaohio.com/twentysixteen' );
}
}
?>
you dont have the "name" attribute for some of your inputs - therefore they will not be a part of the $_POST array, and therefore not be present for your mail script.
<input type="text" class="form-control" id="name" placeholder="Full Name" required>
should be
<input type="text" class="form-control" name="name" id="name" placeholder="Full Name" required>
for your inputs:name, email,phone and company - the only one that does have them is the radio selection. I would also suggest more validation for your inputs than you currently have.

Use PHP to display user inputs

What I'm trying to do is to use PHP to display the user inputs on a separate page, but when I process the form none of the input values display. I'm having to use javascript for input validation and that works fine but the PHP page is not working.
Here is my code:
HTML and Javascript
survey.php:
<!DOCTYPE html>
<html>
<head>
<title>Survey Page</title>
<link rel="stylesheet" type="text/css" href="mystylepage.css" />
<script type="text/javascript">
function validate()
{
if (document.information.name.value == "" )
{
alert("Please provide your name!" );
document.information.value.focus();
return false;
}
if (document.information.email.value == "")
{
alert("Please provide an email!");
document.information.value.focus();
return false;
}
if (document.information.major.value == false)
{
alert("Please enter your major");
document.information.value.focus();
return false;
}
return true;
}
</script>
</head>
<div id="bodycolor">
<body>
<div id="container">
<div id="menu">Menu:
<a class="menu" href="index.htm">Home</a> | <a class="menu"
`href="faculty.htm">Faculty</a> |
<a class="menu" href="courses.htm">
Courses</a> | <a class="gradecalculator" href="gradecalculator.htm">Grade
Calculator</a> | <a class="survey" href="survey.htm">Survey</a>
</div>
</div>
<div id="header">
<h1><center>CSE Center for Health Information Technology</center></h1>
<br>
<div id="links">
<center><a href="https://www.kennesaw.edu/"><img src="KSU Logo.jpg"
alt="Logo" style="width:100px;height:100px;" /></a></center>
<br>
<center><a href="http://ccse.kennesaw.edu/">College of Computing and
Software Engineering</a></center>
</div>
</div>
<h1>Please enter you information below</h1>
<form name="information" method="POST" action="action.php"
onsubmit="return
validate();">
<table width="500" border="0">
<tr>
<td width="150" bgcolor="#99CCFF"><strong>Name</strong></td>
<td><input type="text" name="name" size="20" maxlength="20" /></td>
</tr>
<tr>
<td bgcolor="#99CCFF"><strong>Email</strong></td>
<td><input type="text" name="email" size="20" maxlength="20" /></td>
</table>
<p> Major:
<input name="major" type="radio" value="Information Technology" />
Information Technology
<input name="major" type="radio" value="Software Engineering" />
Software Engineering
<input name="major" type="radio" value="Computer Science" />
Computer Science</p>
<p>
<input type="submit" value="Process" />
</p>
<p id="msg"></p>
</form>
</body>
</html>
Here is the PHP page:
action.php
<!DOCTYPE html>
<html>
<head>
<title>Survey Information Processing</title>
</head>
<body>
<h1>Form data</h1>
<p>Name: <?php echo $_POST["name"]?></p>
<p>Email: <?php echo $_POST["email"]?</p>
<p>Major: <?php echo $_POST["major"]?</p>
</body>
</html>
I'm totally new to PHP, so any help is greatly appreciated!
Your form method should be POST.
<form name="information" method="POST" action="action.php" onsubmit="return validate();">
And add a name to the submit button:
<input type="submit" value="Process" name="submit" />
Also, you could add this if condition:
<?php
echo "<pre>";
print_r($_POST); // Check if you're getting any POST data
echo "</pre>";
?>
<?php if (isset($_POST['name'])) { ?>
<h1>Form data</h1>
<p>Name: <?php echo $_POST["name"]; ?>
</p>
<p>Email: <?php echo $_POST["email"]; ?>
</p>
<p>Major: <?php echo $_POST["major"]; ?>
</p>
<?php } ?>
Hope this helps.
So the issue is your method is get but you're trying to access through post
Change
method="GET"
to
method="POST"
On your form.

How to close a popup light box

This is my code. Here Iam closing the popupbox using 'x'. But I want it to be closed by clicking on any radio button.
HTML:
<span>Book now <!--<div class="disp"><p>-->
<div id="light_<?php echo $vid;?>" class="white_content">
<label>Email:</label>
<?=$vehicle->Email; ?>
</p><p>
<label>Mobile:</label>
<?=$vehicle->Mobile; ?></p>
<p>
<form id="form_<?php echo $vid;?>" name="form1" method="post" action="">
<?php //echo $_REQUEST['email'];?>
<p>
<input type="hidden" name="vehicleid" value="<?php echo $vid;?>" id="vehicleid" />
<label>
<input type="radio" name="RadioGroup1_<?php echo $vid;?> " value="1" id="bstatus<?php echo $vid;?>" onClick="idForm(<?php echo $vid;?>)" />
Conform
</label>
<br />
<label>
<input type="radio" name="RadioGroup1<?php echo $vid;?>" value="0" id="bstatus1<?php echo $vid;?>" onClick="idForm(<?php echo $vid;?>)" />
Not Conform
</label>
<br />
</p>
</form>
<b>X</b>
</div>
<div id="fade" class="black_overlay"></div>
</div></span>
JS:
function idForm(str) {
var light = 'light_' + str;
var fade = 'fade' + str;
document.getElementById(light).style.display = 'none';
document.getElementById(fade).style.display = 'none';
var confirmval = 'bstatus' + str;
var unconfirmval = 'bstatus1' + str;
if (document.getElementById(confirmval).checked) {
var selectvalue = document.getElementById(confirmval).value;
}

Show a form field on keyup

I'm trying for the life of me to show a hidden field in a form with a specific input (numbers 4 and higher).
JS:
function showStuff(id) {
document.getElementById(id).style.display = 'block';
}
HTML:
<tr valign="top">
<td <? if(strstr($Error,"intern_openings")){ ?> class="error" <? } ?>>*Number of Interns/<br>Available positions:</td>
<td colspan="2"><input type="text" name="intern_openings" size="3" maxlength="3" value="<?=$intern_openings?>" onkeyup="javascript:showStuff('supervisorname')"><br />
<div id="supervisorname" style="display:none;">
<br />
Names of intern supervisors (employer staff):<br />
<input type="text" name="supervisor[]" value="<?=$supervisor?>" <? if(strstr($supervisorList)){ ?> <? } ?>><br />
<input type="text" name="supervisor[]" value="<?=$supervisor?>" <? if(strstr($supervisorList)){ ?> <? } ?>><br />
<input type="text" name="supervisor[]" value="<?=$supervisor?>" <? if(strstr($supervisorList)){ ?> <? } ?>><br />
<input type="text" name="supervisor[]" value="<?=$supervisor?>" <? if(strstr($supervisorList)){ ?> <? } ?>>
</div>
</td>
</tr>
Any insight would be totally radical.

Categories

Resources