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

Question

I am trying to pass values between boxes.

So, When a User types inside of the first text box:

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

Then they click the 'choose design' button, and what they typed in, gets passed to another input text box on the same page.

this is the second input box i want to pass it to.

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

Any help would be much appreciated thank you

Answer 1

Live Demo

Instead of a submit type input use a button type input.

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

First add a clicklistener for the submit button and inside that callback pass the text through the elements

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

this is by far easiest in jquery given

<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="">

use a simple

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

but better change type="submit" to type="button" then you can remove the essentially unnecessary line event.preventDefault();