Question

我正在创建一个结帐页面，我无法弄清楚如何执行以下操作。当客户输入他们的送货信息时，我想在确认部分的页面下方显示相同的信息。在客户下订单之前我不会提交信息，所以没有办法回复这些信息，因为在提交之前我不会提交给我的数据库。

我调查了这个并且我看到了具有数据复制功能的东西，这基本上是我需要的，除了我不希望复制的数据显示在输入字段中。我只是想让它显示文字。

所以，如果我有以下字段：

航运街道： 123 Main St.。

我希望123 Main St显示在页面的不同部分。

我尝试过做数据复制功能，但我甚至无法使用它。我不确定这是否是最好的方法。我不希望复制的数据可以编辑。我从我的代码中禁用了它。

我试过这样做：

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

这是页面下方的确认部分：

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

Jquery

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

有没有更好的方法可以做到这一点，最重要的是输入字段不会显示复制的数据？

更新代码

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

确认部分

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

Jquery

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

Answer 1

这是你想要的吗？

请注意，data-copy="name"现在应为data-copy="#name"才能生效

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

只需更改

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

到

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

Basicaly说它将id name的值设置为id ShipToFullname的值

这里小提琴=＆gt; http://jsfiddle.net/9sgcydmg/1/

如果您不想在其他输入中输出数据，您只需将id设置为任何html元素，然后使用：

$（＆＃39;＃名称＆＃39）。HTML（$（＆＃39;＃ShipToFullname＆＃39;。）VAL（））;

这里小提琴=＆gt; http://jsfiddle.net/89oeyq0h/

最终答案：用最简单的方式，使用jQuery，我会做这样的事情：

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

在输入中输入数据，然后仅显示在页面上其他位置输入的文本

2 个答案: