Question

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 the 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.

Answer 1

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());

});