Question

我正在尝试从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>

Answer 1

最简单的方法是在form2中添加隐藏的输入字段，并在form1中的#name上添加change事件。更改#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>

如果要查看其是否有效，请将hidden中的类型text更改为<input type="hidden" name="fromForm1" id="fromForm1">！

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

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

2 个答案: