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

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

• javascript
• php
• jquery
• html

• try using another element ID other than name - and also try $(this).attr('data-copy');, might work – Irvin Lim Commented Jun 2, 2015 at 3:47
• if you dont want the mirrored data to appear in a <input>, make a <div> instead and set .html($(this).val()); – Irvin Lim Commented Jun 2, 2015 at 3:48
• I need the initial input to be an input. I cannot have the copied data be an input. – Paul Commented Jun 2, 2015 at 3:49

2 Answers 2

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./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>

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 nameto the value of id ShipToFullname

Here the fiddle => http://jsfiddle/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/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/oky005a0/