I'm trying to output the values of multiple input-fields into a single div. But I simply can't get it to work. It will only output one of the input-fields into the div at a time.
This is my jquery:
var $output = $('#output-content-here');
$('input').keypress( function() {
$($output).text(this.value);
});
I have made a jsiddle to show you what i mean: http://jsfiddle.net/A7UbK/1/
Thanks.
Try the following code using .map()
var $output = $('#output-content-here');
$('input').keyup(function () {
$output.html(function () {
return $('input').map(function () {
return this.value
}).get();
})
});
Note : $output already contains jQuery object.
Try,
var $output = $('#output-content-here');
$('input').keyup( function() {
$output.html($('input').map(function(){
return this.value + ((this.value.length)?"<br>":"");
}).get().join(''));
});
keyup, not keypress, otherwise the character from the current event is not shown: jsfiddle.net/A7UbK/7As other answers display, you can map the values each time into the div element.
Personally I think a tidier method would be to have 3 elements nested inside the div, 1 for each input, and apply the value directly to each relevant element.
This means you're only updating the field which has been edited, not the entire div html.
Name<input id="name" type="text" name="name" /> <br />
Besked<input id="message" type="text" name="message" /> <br />
Number<input id="number" type="text" name="number" /> <br />
<div id="output-content-here">
<span class="name"></span>
<span class="message"></span>
<span class="number"></span>
</div>
var $output = $('#output-content-here');
$('input').keyup( function() {
$output.find("." + this.id).text(this.value);
});
$($output), $output already being a jQuery object). It accomplishes nothing, but adds run-time.