如何將一個輸入框中的值傳遞給另一個輸入框

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

現場演示

代替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

首先，為“提交”按鈕添加一個clicklistener，然后在該回調函數中通過元素傳遞文本

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();