如何将所选值从一个表单输入字段复制到另一个表单输入字段答案

【问题标题】：How to copy the selected value from one form input field to another form input field如何将所选值从一个表单输入字段复制到另一个表单输入字段
【发布时间】：2018-12-25 06:21:00
【问题描述】：

我正在尝试从 form1 中获取值并在 form2 上提交。任何建议如何实现这一点。

<form action="/new"  method="POST" >
    
        <input  list="name" type="text" name="name" id="name">
        <datalist id="name">
            <option value="Hello">
            <option value="Hi">
        </datalist>
    <button>Submit</button> 
</form>

<form action="/new1" method="POST">
    <input type="text" name="name" value="name" > 
    <-- I WANTED THE VALUE FROM FORM1 TO BE SUBMITTED ON FORM 2-->
</form>

【问题讨论】：

您应该先自己尝试一下，然后发布对您不起作用的尝试。 Stackoverflow 不是免费获取代码的地方。
把form1的动作改成form2的动作？
我只是在询问如何实现这一点的建议。我坚持了很长时间。并且不要求免费代码。如果可以帮助你可以或只是通过它。 @molerat
form1 和 form2 的用途不同。我不希望用户两次输入名称@Zyigh
@Ezhilan 这只是对“不清楚你真正想要什么......”的讽刺。如果要将数据存储在数据库中，则可以使用过程。在您的治疗页面上，您可以复制您需要的条目。在前端页面上，您可以收听输入的任何更改（或按键），并在适当的副本上复制每个字段。在这种情况下，您可能需要 ajax 来发送表单，因为您不能同时使用 HTML 发送两个表单

标签： javascript jquery html forms

【解决方案1】：

最简单的方法是在form2中添加隐藏输入字段，并在form1中的#name上添加更改事件。一旦您更改了#name 的值，它将附加到form2 隐藏字段，然后您可以在提交表单时获取id="fromForm1" 的值。

$(document).on('change', '#name', function() {
    $('#fromForm1').val($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="/new"  method="POST" >
    <input list="name" type="text" name="name" id="name">
    <datalist id="name">
        <option value="Hello">
        <option value="Hi">
    </datalist>
    <button>Submit</button> 
</form>

<form action="/new1" method="POST">
    <input type="text" name="name" value="name" >

    <!-- Added hidden input field -->
    <input type="hidden" name="fromForm1" id="fromForm1">
</form>

将<input type="hidden" name="fromForm1" id="fromForm1"> 中的hidden 类型更改为text，如果您想查看它是否工作正常！

【讨论】：

如果您想将 form1 输入值附加到 <input type="text" name="name" value="name" > 中，则将 $('#fromForm1') 替换为您的选择器
可能想为隐藏字段添加名称。

【解决方案2】：

这是另一种方式，没有 jQuery：

<script>
function update(){
    let updateValue = document.getElementById("name").value;
    document.getElementById("name2").value = updateValue;
}
</script>

<form action="/new"  method="POST" >

<input  list="name" type="text" name="name" id="name" onchange="update()">
<datalist id="name">
    <option value="Hello">
    <option value="Hi">
</datalist>
<button>Submit</button> 
</form>

<form action="/new1" method="POST">
<input type="text" name="name" id="name2" value="name" > 
</form>

【讨论】：

工作得很好......谢谢