jQuery write what is written in a field to another DIV

Hello This is a complex question and I hope someone will be so nice to help me with this request.

I have some fields:

<label for ="message">Message: </label><input type="text" id="message" name="message"><br>
<label for ="name">Status Name: </label><input type="text" id="name" name="name"><br>
<label for ="link">Link: </label><input type="text" id="link" name="link"><br>
<label for ="description">Description: </label><input type="text" id="description" name="description"><br>
<label for ="picture">Picture: </label><input type="text" id="picture" name="picture"><br>

Whatever is written in one or more of the fields above should be rewritten in the Elements below.

<span id="message_preview"></span>
<span id="name_preview"><a href=""></a></span>
<span id="link_preview"></span>
<span id="description_preview"></span>
<span id="image_preview"><img src=""></span>

So whatever is written in the field message should automatically appear in the Element message_preview

Whatever is written in the name field should be rewritten in the element name_preview

Whatever is written in the field link should be automatically rewritten in both the element link_preview AND inside the href that is inside the element above name_preview

Whatever is written in th开发者_StackOverflowe description field should be rewritten in the element description_preview

Whatever is written in the picture field should be rewritten inside the img src of the element image_preview

I know it is a complex one, but I am not a jQuery expert...and I am in need of the complete function =((

Can you help me?

P.S. All of the be above should happen Everytime the user changes the text in those fields.

Here's a little example I created in JSFiddle with comments, it's working for everything but images, you should try to figure that out yourself.

// bind jquery to listen to every keyup event that happens in an input element
$("input").keyup(function() {
    // get the id of the element in which the event took place
    var id=$(this).attr('id');
    // the appropriate value of the field
    var value = $(this).val();
    // select the appropriate span (which is id_+preview in your case
    // and insert the value in the span
    $("#"+id+"_preview").html($(this).val());

});

Check this fiddle

http://jsfiddle.net/LbFVn/

working sample:

http://jsfiddle.net/oceog/rPjtr/

html:

<label for ="message">Message: </label><input type="text" id="message" name="message"><br>
<label for ="name">Status Name: </label><input type="text" id="name" name="name"><br>
<label for ="link">Link: </label><input type="text" id="link" name="link"><br>
<label for ="description">Description: </label><input type="text" id="description" name="description"><br>
<label for ="picture">Picture: </label><input type="text" id="image" name="picture"><br>
<hr>
message:<span id="message_preview"></span>
name:<span id="name_preview"><a href=""><span id="text"></span></a></span>
link:<span id="link_preview"></span>
desc:<span id="description_preview"></span>
img:<span id="image_preview"><img src=""></span>

javascript:

$(function() {
    $('input').keyup(function() {
        showprev($(this));
    });
});

function showprev(inputf) {
    console.log(inputf.val());
    var ival = inputf.val();
    var id = inputf.attr('id') + '_preview';
    if (id == 'link_preview') {
        $('#name_preview a').attr('href', ival)
    }
    if (id == 'image_preview') {
        $('#' + id + ' img').attr('src', ival);
        return;
    }
    if (id == 'name_preview') {
        $('#name_preview span#text').text(ival);
        return;
    }
    $('#' + id).text(ival);
}