javascript - 如何将输入框中的值传递给另一个输入框

Question

我正在尝试在框之间传递值。

因此，当用户在第一个文本框中键入时：

<input type="text" placeholder="Your personal message" id="valbox"></input>
<input type="submit" name="design1" id="butval" value="Choose Design"></input>

然后他们单击“选择设计”按钮，他们输入的内容被传递到同一页面上的另一个输入文本框。

这是我要传递给的第二个输入框。

<input type="text" class="input-text" name="billing_last_name" id="billing_last_name" placeholder="" value="">

任何帮助将不胜感激谢谢

Answer 1

Live Demo

submit使用类型输入代替button类型输入。

HTML

<input type="text" placeholder="Your personal message" id="valbox"></input>
<input type="button" name="design1" id="butval" value="Choose Design"></input>
<input type="text" class="input-text" name="billing_last_name" id="billing_last_name" placeholder="" value="">

JS

window.onload = function(){
    document.getElementById('butval').onclick = function(){
        document.getElementById('billing_last_name').value = document.getElementById('valbox').value;   
    }
}; 

Answer 2

首先为提交按钮添加一个点击监听器，并在该回调中通过元素传递文本

document.getElementById("butval").addEventListener("click", function(event){
    var text = document.getElementById("valbox").value;
    document.getElementById("billing_last_name").value = text;
    event.preventDefault();
    return false;
});

Answer 3

这在给定的jquery中是迄今为止最简单的

<input type="text" placeholder="Your personal message" id="valbox"></input>
<input type="submit" name="design1" id="butval" value="Choose Design"></input>

<input type="text" class="input-text" name="billing_last_name" id="billing_last_name" placeholder="" value="">

使用简单的

$("#butval").click(function(event){
    $("#billing_last_name").html("<p>"+$("#valbox").html()+"</p>");
    event.preventDefault();
});

但更好的改变type="submit"是type="button"你可以删除本质上不必要的行event.preventDefault();