How to retrieve HTML form values?
Question
I have a simple form and would like to reflect the values in the new page upon submission. I tried using javascript to do so. However, was not successful as it did not print out. Can someone help me please? Also, I am open to ideas which are simpler since javascript might not be the only way to do this. PHP seems tough for me.
This is my form.
<head>
</head>
<body>
<form action="demo_form.html" method="POST">
First Name<input type="text" name="fname"><br>
<input type="submit" value="submit">
</form>
</body>
</html>
This is the html page after submission which is also "demo_form.html"
<head>
<script type="text/javascript">
var nameValue = document.getElementById("fname").value;
document.getElementById("printHere").value=nameValue;
</script>
</head>
<body>
Welcome <div id="printHere"></div>
</body>
</html>
4 answers
solution1
1 2013-05-05 19:56:25
Note
Save your page with php extension instead of html (You have used demo_form.html in form action )
Remove JS and just include this on top
if(isset($_POST)){
print_r($_POST); //Retreive your data as required
}
Final Code
<body>
<?php
if(isset($_POST)){
print_r($_POST); //Retreive your data as required
}
?>
<form action="demo_form.php" method="POST">
First Name<input type="text" name="fname"><br>
<input type="submit" value="submit">
</form>
</body>
solution2
1 2013-05-05 19:59:25
The post variables are related to the "name" attributes of your form elements.
<input type='text' name='firstname' />
This will be avalable after submit in your post array by
$ _POST['firstname'];
To catch it, it is best practice to see if it is set first.
if(isset($_POST['firstname']) {
$firstname = $_POST['firstname'];
}
You place that at the very top of your page, even before the doctype.
<?php
if(isset($_POST['firstname']) {
$firstname = $_POST['firstname'];
}
?>
Now you can print the value by "echo" your variable.
Hello <?php echo $firstname; ?> to this page;
Your page must have the *.php extension.
EDIT: added info for help and learning purpose
To suit the fields in your own application, you change the name of "firstname" to the "name" attribute of your input field, ie "fname".
To add more fields.
if(isset($_POST['fname'])){$fname = $_POST['fname']; }
if(isset($_POST['lname'])){$lname = $_POST['lname']; }
if(isset($_POST['email'])){$email = $_POST['email']; }
It will be interesting for you to see how the $_POST array looks like. In your php tags at the very top and at the beginning, add this:
echo "<pre>";
echo print_r($_POST); // can also do var_dump($_POST);, just try it
echo "</pre>";
You will be presented with the array and you can see its structure.
solution3
1 2013-05-05 20:13:33
POST data is data that is handled server side. And Javascript is on client side. you should use GET method. and in the demo_form.html use this js code to recieve the parameters:
var params = getUrlParams();
var first_name = params.fname;
solution4
0 2013-05-05 20:06:03
You can try this out using javascript:
1st html form:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="profile">
<form action="demo_form.html" method="GET">
First Name<input type="text" name="fname" /><br />
<input type="submit" value="submit" />
</form>
</div>
</body>
</html>
demo_form.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function Loaddata() {
// Get data from query string & create an array
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) {
vars[key] = value;
});
document.getElementById("printHere").innerHTML = vars["fname"];
}
</script>
</head>
<body onload="Loaddata();">
Welcome
<div id="printHere"></div>
</body>
</html>
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.