用JSON对象填充HTML表单字段_Html_Json_Forms

用JSON对象填充HTML表单字段

html json forms

用JSON对象填充HTML表单字段,html,json,forms,Html,Json,Forms,我有一个非常基本的HTML表单，是我在本地创建的，还有另一个表单，同一个表单，在一个单独的本地站点上我想知道是否有一种方法可以填写第一个HTML表单，然后用相同的数据自动填写第二个表单我已经研究过如何将表单数据打包到JSON对象中，但似乎找不到很好的指导 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="main.css"

我有一个非常基本的HTML表单，是我在本地创建的，还有另一个表单，同一个表单，在一个单独的本地站点上

我想知道是否有一种方法可以填写第一个HTML表单，然后用相同的数据自动填写第二个表单

我已经研究过如何将表单数据打包到JSON对象中，但似乎找不到很好的指导

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" type="text/css" href="main.css">
    <title>Form Test</title>
</head>

<body>
    <center>
        <h1>Form Test</h1></center>
    <div class="navigation">
        <nav>
            <a href="secondform.html">Second Form Submission</a>
        </nav>
    </div>

    <p>Upon clicking the submit button, the populated fields should send their field data to the Second Form which will then be emailed to someone.</p>

</body>
<div id="message"> </div>
<form name="form_simple" id="form-simple" action="C:/xampp/htdocs/formsubmit/formsubmit.php" method="post" target="_blank">
    Name:
    <br>
    <input type="text" name="name" value="">
    <br> Email:
    <br>
    <input type="email" name="email" value="">
    <br> University:
    <br>
    <input type="text" name="university" value="">
    <br> Year In School:
    <br>
    <input type="text" name="year" value="">
    <br> Grad Date:
    <br>
    <input type="date" name="graddate" value="">
    <br>
    <br>
    <input type="submit" value="Submit">
</form>

</html>


形式测试
形式测试
单击提交按钮后，填充的字段应将其字段数据发送到第二个表单，然后通过电子邮件发送给其他人
姓名：



电邮：



大学：



入学年份：



毕业日期：

因为您使用的是php，所以不需要对数据进行JSON编码。当您点击提交按钮时，将请求

formsubmit.php

页面

在其中，您可以取回表单中保存的所有数据。然后，您可以使用它填充下一个表单的字段

我想您还不熟悉可用于每个php脚本的$\u POST和$\u GET数组。由于上述表单的方法是

POST

，因此可以从$\u POST数组中获取提交的值

也就是说，这个数组将包含一个数组中的元素，该数组使用原始表单输入的名称进行索引。在您的案例中，可以在

$\u POST['name']

，

$\u POST['email']

，

$\u POST['university']

，

$\u POST['year']

和

$\u POST['graddate']

中找到这些信息

现在也是一个很好的时机，您不应该在表单的action属性中包含脚本的完整本地路径。只需相对于web服务器的根文件夹引用它。在您的情况下，这是

c:/xampp/htdocs

——这相当于浏览器中的

localhost/

地址。因此，如果上面显示的html和php文件都存在于同一个文件夹中，您应该将操作更改为

/formsubmit/formsubmit.php

，或者干脆更改为

formsubmit.php

您还可以使用

var\u dump

函数。如果您放置

var\u dump（$\u POST）

在

formsubmit.php

文件中，您可以直接在屏幕上看到输入的值-这是一个调试的有用工具，允许您检查您认为通过POST发送的内容是否确实已发送，以及它是否按照您的预期命名和结构。您可以通过检索然后回显传递的数据来填充目标表单上的字段

一个不执行错误检查、没有样式、不活跃且将填充两个字段的示例可能如下所示：

formsubmit.php

<?php
  $name = $_POST['name'];
  $email = $_POST['email'];
?>
<html>
<body>
  <form>
    <input type='text' name='nameInput' value='<?php echo $name; ?>' />
    <input type='email' name='emailInput' value='<?php echo $email; ?>' />
  </form>
</body>
</html>


因为您使用的是php，所以不需要对数据进行JSON编码。当您点击提交按钮时，将请求formsubmit.php
页面
在其中，您可以取回表单中保存的所有数据。然后，您可以使用它填充下一个表单的字段
我想您还不熟悉可用于每个php脚本的$\u POST和$\u GET数组。由于上述表单的方法是POST
，因此可以从$\u POST数组中获取提交的值
也就是说，这个数组将包含一个数组中的元素，该数组使用原始表单输入的名称进行索引。在您的案例中，可以在$\u POST['name']
，$\u POST['email']
，$\u POST['university']
，$\u POST['year']
和$\u POST['graddate']
中找到这些信息
现在也是一个很好的时机，您不应该在表单的action属性中包含脚本的完整本地路径。只需相对于web服务器的根文件夹引用它。在您的情况下，这是c:/xampp/htdocs
——这相当于浏览器中的localhost/
地址。因此，如果上面显示的html和php文件都存在于同一个文件夹中，您应该将操作更改为/formsubmit/formsubmit.php
，或者干脆更改为formsubmit.php

您还可以使用var\u dump
函数。如果您放置var\u dump（$\u POST）
在formsubmit.php文件中，您可以直接在屏幕上看到输入的值-这是一个调试的有用工具，允许您检查您认为通过POST发送的内容是否确实已发送，以及它是否按照您的预期命名和结构。
您可以通过检索然后回显传递的数据来填充目标表单上的字段
一个不执行错误检查、没有样式、不活跃且将填充两个字段的示例可能如下所示：
formsubmit.php
<?php
  $name = $_POST['name'];
  $email = $_POST['email'];
?>
<html>
<body>
  <form>
    <input type='text' name='nameInput' value='<?php echo $name; ?>' />
    <input type='email' name='emailInput' value='<?php echo $email; ?>' />
  </form>
</body>
</html>