Entering data in an input and then displaying just the text entered elsewhere on page

Question

I am creating a checkout page and I cannot figure out how to do the following. When the customer enters their shipping information, I want to display that same information further down the page in a confirmation section. I will not be submitting the information until the customer places the order, so there is no way to echo this information as I won't be submitting to my db until after they submit it.

I looked into this and I see things with a data-copy function and that is basically what I need except I do not want the copied data to show up in an input field. I just want it to display the text.

So if I had the following field:

Shipping street: 123 Main St.

I would want the 123 Main St to show up in a different section of the page.

I tried doing the data-copy function and I couldn't even get that to work. I'm not sure if this is the best method to use for this. I do not want the copied data to be editable. I have disabled that from my code.

I tried doing this:

<div class="field">
    <label class="paddingleft" for="fullname">Full Name</label>
        <div class="center"><input type="text"  class="biginputbarinline preview" id="ShipToFullname" data-copy="name" name="ShipToFullname" required>          </div>
</div>

This is the confirmation part farther down the page:

<p><input type="text" class="preview" id="name" disabled></p>

The Jquery

$(document).ready(function() {
$(".preview").keyup(function() {
     var ElemId = $(this).data('copy');
    $("#"+ElemId).val($(this).val());
 });
});

Is there a better way I can do this and most importantly an input field not show up with the copied data?

UPDATED CODE

<div class="center">
    <div class="field">
        <label class="paddingleft" for="fullname">Full Name</label>
        <div class="center"><input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="#name" name="ShipToFullname" required></div>
    </div>

Confirmation part

<p>Shipping to:</p>
    <p><div class="preview" id="name"></div></p>

The Jquery

$(document).ready(function() {
 $(".preview").on('keyup', function() {
$($(this).data('copy')).html($(this).val());
 });
});

Answer 1

Is this what you want?

Note that data-copy="name" should now be data-copy="#name" for it to work

 $(document).ready(function() { $(".preview").on('keyup', function() { $($(this).data('copy')).html($(this).val()); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="field"> <label class="paddingleft" for="fullname">Full Name</label> <div class="center"> <input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="#name" name="ShipToFullname" required> </div> </div> <br> Your name is: <div id="name"></div> 

Answer 2

Simply change

var ElemId = $(this).data('copy');
$("#"+ElemId).val($(this).val());

to

$('#name').val($('#ShipToFullname').val());

Basicaly it says to set the value of id name to the value of id ShipToFullname

Here the fiddle => http://jsfiddle.net/9sgcydmg/1/

If you don't want to output the data in another input you can simply set an id to any html element and use instead:

$('#name').html($('#ShipToFullname').val());

Here the fiddle => http://jsfiddle.net/89oeyq0h/

FINAL ANSWER : in it's most simple way, using jQuery, i would do something like this:

<input onkeyup="$('#name').html(this.value)" ... />
<p id='name'></p>

<input onkeyup="$('#addr').html(this.value)" ... />
<p id='addr'></p>

and so on...

http://jsfiddle.net/oky005a0/