在不同页面中将输入字段从一个复制到另一个

Posted 2023-03-05

【中文标题】在不同页面中将输入字段从一个复制到另一个

【英文标题】：Copy input field from one to another in a different page

【发布时间】：2015-09-28 11:51:39

【问题描述】：

我正在尝试将一个输入字段复制到另一个页面中的另一个。该场景是当用户按下按钮提交输入字段时，从一个表单转到另一个表单。

我想完成这样的事情：http://jsfiddle.net/bxHQ5/

这就是我所做的。它将输入字段复制到另一个字段。

 <input type="text"id="EmailAddress" name="EmailAddress" value="" >
 <input type="text" id="Username" name="Username" value="">

$("#EmailAddress").keyup(function()
    $("#Username").val(this.value);
);

这是我找到的另一种解决方案，但是这个解决方案克隆了输入并添加了一个新的。

 <input type="text" onchange="document.body.appendChild(this.cloneNode(true))" />

更新 - 我得到了它的工作 - 我正在为任何需要它的人发布解决方案

第一种形式：

<form action="/register-form/" method="get"><input style="float: right;" name="search" type="submit" value="FREE TRIAL" />

第二种形式：

<form id="registration_form" class="form-horizontal" 
action="php_CRM_URL_HERE" method="get" name="registration_form">
<div class="form-group">
<div class="col-sm-6">
<input id="yourEmail" class="form-control input-group-lg reg_name" 
style="height: 50px;" title="yourEmail" name="yourEmail" type="yourEmail"
value="[insert_php] echo $emailValue; [/insert_php]" placeholder="Email 
Address" />
</div>
<div class="col-sm-6">
<input id="yourPhone" class="form-control input-group-lg reg_name"
style="height: 50px;" title="yourPhone" name="yourPhone" type="yourPhone"
placeholder="Mobile Number" />
</div>
</div>
<!--/form-group-->
<div class="form-group">
<div class="col-sm-12">
<input id="yourPassword" class="form-control input-group-lg reg_name" 
style="height: 50px;" title="yourPassword" name="yourPassword"
type="yourPassword" placeholder="Password" />
</div>
</div>
<!--/form-group-->
<p style="text-align: center;"><button class="contact-submit"
style="background: #ca0002 none repeat scroll 0px 0px; border-radius: 2px; 
color: #ffffff; width: 12%; height: 45px;" 
type="submitContactForm">Register</button></p>
</form>

从第一种形式解析输入字段的 PHP 代码

<?php
$emailValue = $_REQUEST['term'] ? $_REQUEST['term'] : null;
?>

【参考方案1】：

我希望这会让你开始朝着你想要的方向前进。

这个fiddle 只是展示了隐藏第一个表单并保存其表单数据的基本机制，然后显示包含该数据的第二个表单。如果您想将该数据交给服务器，您将需要在提交第一个表单时发送ajax 请求。

如果你想向服务器发出一个完整的 POST 请求，然后重定向到一个新的表单，session storage 就是这种情况。因此，在您的提交功能中，您可以执行以下操作：

sessionStorage.setItem('emailAddress',$('#EmailAddress').val());

然后，当您在下一页加载表单时，您可以将数据拉回以预填充它：

$('#EmailAddress').val(sessionStorage.getItem('emailAddress')||'');

【讨论】：

感谢您的帮助，但我现在完全迷失了。我的编程水平不是很好，请你帮帮我。

我可能需要更多帮助来了解您的目标。您是否尝试将在一个表单中输入的信息复制到同一页面上的另一个表单（类似于 jsfiddle）？或者您想在用户提交第一个表单时刷新页面，并呈现一个新表单，其中一些字段从第一个表单中预填充？

我正在尝试将输入（电子邮件）从一个表单解析为不同页面中的另一个表单

我需要更多信息。用户如何到达另一个页面？它是在第一个表单提交后呈现的吗？

是的，那将是完美的。当用户单击第一个表单上的提交按钮时，它会将他发送到带有第二个表单的另一个页面