创建表单输入的实时预览

时间:2014-01-02 05:17:41

标签: javascript jquery

我有一个多步骤表单,我正在尝试创建输入各种输入,文本区域和单选按钮的值的实时预览。

到目前为止,我已经构建了表单并使用以下

取得了一些成功

的.js

$("input[type='text']").change(function() {
    $("#preview").append($("input[type='text']").val());
});

html的

<div id="preview"></div>

这适用于第一个输入,但第二个输入重复第一个输入的值。

我打算通过jquery调用每个元素id,但是有另一种方法来使用类或.next等。我希望如果更好的是重复输入标签然后冒号然后是值。所以在.html中这是可能的。

<div id="preview">
    <div>Input Label: Input Value</div>
</div>

3 个答案:

答案 0 :(得分:4)

简单

$('.input').keyup(function(){
    var $this = $(this);
    $('.'+$this.attr('id')+'').html($this.val());
});

<强> FIDDLE

答案 1 :(得分:1)

因为 追加 。如果您不想保留文本,请使用

.text()或.html()

$("input[type='text']").change(function() {
    $("#preview").html($("input[type='text']").val());
});

JSFiddle

答案 2 :(得分:0)

您需要有一些特定的元素来放置内容,您可以将行更改为:

<div id="preview">
    <div>Input Label: <span id="val"></span></div>
</div>

然后使用您的jQuery,您可以定位#val

但是,您仍然希望实际替换值...不附加到它,所以请使用以下内容:

$("#val").html($("input[type='text']").val());
  

请注意使用html()代替append()