javascript - Create live preview of form inputs - Stack Overflow

admin管理员组

文章数量:1388919

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>

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>

• javascript
• jquery

Share Improve this question Follow asked Jan 2, 2014 at 5:17 user1881482user1881482 74622 gold badges1717 silver badges3535 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Simple

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

FIDDLE

Because your appending the values. if you don't want to preserve the text then use

.text() or .html()

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

JSFiddle

You'll need to have some particular element to put the content in, you can change your row to this:

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

Then with your jQuery you can target the #val

However, you'll still want to actually replace the value... not append to it, so use something like this:

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

Note the use of html() instead of append()

本文标签： javascriptCreate live preview of form inputsStack Overflow