创建表单输入的实时预览 [英] Create live preview of form inputs

问题描述

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

到目前为止，我已经构建了表单并使用以下方法取得了一些成功

.js

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

.html

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

这适用于第一个输入，但第二个输入重复第一个输入的值.

我打算通过并为每个元素 id 进行 jquery 调用，但是还有其他方法可以使用类或 .next 等.我希望如果最好重复输入标签，然后是冒号，然后是值.所以在 .html 中这是可能的.

<div>输入标签:输入值</div>

解决方案

简单

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

小提琴

I have a multistep form, and am trying to create a live preview of values entered into various inputs, text areas and radio buttons.

So far i have the form built and have some success using the following

.js

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

.html

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

This works for the first input however the second input repeats the first input's value.

I was going to go thru and make a jquery call for each elements id, but is there another way to use classes or .next etc. I would like if preferable to have the inputs label repeated then a colon then the value. So in .html Is this possible.

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

解决方案

Simple

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

FIDDLE

这篇关于创建表单输入的实时预览的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！