简体   繁体   English

如何检索HTML表单值?

[英]How to retrieve HTML form values?

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. 我尝试使用javascript来做到这一点。 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. 另外,我愿意接受更简单的想法,因为javascript可能不是唯一的方法。 PHP seems tough for me. PHP对我来说似乎很难。

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" 这是提交后的html页面,也是“ 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>

Note 注意


Save your page with php extension instead of html (You have used demo_form.html in form action ) 使用php扩展名而不是html保存页面(您在form action中使用了demo_form.html)

Remove JS and just include this on top 删除JS,然后仅在顶部添加

    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>

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']; $ _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. 您可以将其放在页面的顶部,甚至在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. 您的页面必须具有* .php扩展名。

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". 为了适合您自己的应用程序中的字段,可以将“名字”的名称更改为输入字段的“名称”属性,即“ 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. 您会发现$ _POST数组的样子会很有趣。 In your php tags at the very top and at the beginning, add this: 在最顶部和最开始的php标签中,添加以下内容:

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. 您将看到该数组,并可以看到其结构。

POST data is data that is handled server side. POST数据是在服务器端处理的数据。 And Javascript is on client side. Javascript位于客户端。 you should use GET method. 您应该使用GET方法。 and in the demo_form.html use this js code to recieve the parameters: 并在demo_form.html中使用此js代码接收参数:

var params = getUrlParams();
var first_name = params.fname;

You can try this out using javascript: 您可以使用javascript进行尝试:

1st html form: 第一种html形式:

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM