How Do I Pass A Value In A Input Box, To Another Input Box

I am trying to pass values between boxes. So, When a User types inside of the first text box:

Solution 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;   
    }
}; 

Solution 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;
});

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

Share