SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Apr 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile MULTIPLE LIVE PREVIEWS of form

    Hi,

    I've got this script that shows a live real time preview of text typed in a form input area.
    <script>
    function preview(id1, id2){
    var NewText = document.getElementById(id1).value;
    splitText = NewText.split(/\n/).join("<br />");
    var DivElement = document.getElementById(id2);
    DivElement.innerHTML = splitText;}
    </script>


    BODY

    There are two regions, one for the form and the other for the corresponding Preview area.

    <form action="#">
    <label>Address:</label>
    <input type="text" id="address" onKeyUp="preview('address', 'preview-address');" />
    </form>

    <h1>Preview</h1>
    <dl>
    <dt>Address:</dt>
    <dd id="preview-address"></dd>
    </dl>

    Well, how can I get more Preview areas? If I try copying the preview areas code twice, I still get just one preview. Can anyone get this, and show more than one multiple previews of the text typed in a form, cool...

    Example:

    Color: ________

    So when you type in the Color form field, say

    Color : Red

    Then in the form Preview, what to do so that it appears twice or more like this:

    Previews:

    Red

    Red

    Red

    Thanks and have a great time.
    Last edited by starshine; Apr 16, 2008 at 09:18.

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Something like this:

    Code:
    <script>
    function preview(id1, prevs) { // prevs is now an array of preview location IDs
      var NewText = document.getElementById(id1).value;
      splitText = NewText.split(/\n/).join("<br />");
      for (var i=0; i < prevs.length; i++) {
        var DivElement = document.getElementById(prevs[i]);
        DivElement.innerHTML = splitText;
      }
    }
    </script>
    
    ...
    
    <form action="#">
    <label>Address:</label>
    <input type="text" id="address" onKeyUp="preview('address', ['preview-address1','preview-address2']);" />
    </form>
    
    <h1>Preview</h1>
    <dl>
    <dt>Address:</dt>
    <dd id="preview-address1"></dd>
    </dl>
    
    <h1>Preview2</h1>
    <dl>
    <dt>Address:</dt>
    <dd id="preview-address2"></dd>
    </dl>

  3. #3
    SitePoint Member
    Join Date
    Apr 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Thank you so much

    This is wonderful, Jim. The code works beautifully and is so neat. Excellent, Thanks again.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •