How Do I pass a value in a input box, to another input box

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

so what have you done so far?

artsylar
– artsylar

2013-09-09 01:00:50 +00:00
Commented Sep 9, 2013 at 1:00 — artsylar
– artsylar, Commented Sep 9, 2013 at 1:00

Brandon J. Boone · Accepted Answer · 2013-09-09 00:49:01Z

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

answered Sep 9, 2013 at 0:49

Brandon J. Boone

16.5k4 gold badges78 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2759977 Over a year ago

Thank you, this worked great. I had to finish up some code, and my javascript is horrible if you can't tell

Enthusiasmus · Accepted Answer · 2013-09-09 00:47:44Z

0

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

answered Sep 9, 2013 at 0:47

Enthusiasmus

3431 gold badge2 silver badges9 bronze badges

Comments

Math chiller · Accepted Answer · 2013-09-09 00:54:43Z

0

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

edited Sep 9, 2013 at 0:54

answered Sep 9, 2013 at 0:48

Math chiller

4,1856 gold badges32 silver badges44 bronze badges

Collectives™ on Stack Overflow

How Do I pass a value in a input box, to another input box

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related