SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot arthaus's Avatar
    Join Date
    Jun 2002
    Location
    Pasadena, CA
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Efficient code: Preview form data before submit

    Hi,

    I've adapted a script to preview input data from a form (prior to submitting).

    PHP Code:
        function ReloadTextDiv() {
            var 
    NewText document.getElementById("addinfo").value;
            
    NewText NewText.replace(/\n/g'<br />');
            var 
    DivElement document.getElementById("textDisplay");
            
    DivElement.innerHTML NewText;
        }
        function 
    ReloadTextDiv2() {
            var 
    NewText document.getElementById("fax").value;
            
    NewText NewText.replace(/\n/g'<br />');
            var 
    DivElement document.getElementById("textDisplay2");
            
    DivElement.innerHTML NewText;
        }
        function 
    ReloadTextDiv3() {
            var 
    NewText document.getElementById("tel").value;
            
    NewText NewText.replace(/\n/g'<br />');
            var 
    DivElement document.getElementById("textDisplay3");
            
    DivElement.innerHTML NewText;
        } 
    The usage...
    PHP Code:
    <textarea id="addinfo" name="addinfo" cols="33" rows="5" onKeyUp="ReloadTextDiv();" /></textarea>
    <
    input id="fax" name="fax" type="text" class="text" onKeyUp="ReloadTextDiv2();" />
    <
    input id="tel" name="tel" type="text" class="text" onKeyUp="ReloadTextDiv3();" />

    <
    p><span id="textDisplay"></span></p>
    <
    p><span id="textDisplay2"></span></p>
    <
    p><span id="textDisplay3"></span></p
    I'm new adapting (others) JS code. I realize it's not proper to 'band-aid' above code (with current format).

    Q: What is efficient way to combine all elements?

    Thankx in advance,
    Arthur

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Code:
    function ReloadTextDiv(source, destination) {
            var NewText = document.getElementById(source).value;
            NewText = NewText.replace(/\n/g, '<br />');
            var DivElement = document.getElementById(destination);
            DivElement.innerHTML = NewText;
        }
    HTML Code:
    <textarea id="addinfo" name="addinfo" cols="33" 
    rows="5" onKeyUp="ReloadTextDiv('addinfo', 'textDisplay');" /></textarea>
    <input id="fax" name="fax" type="text" 
    class="text" onKeyUp="ReloadTextDiv('fax', 'textDisplay2');" />
    <input id="tel" name="tel" type="text" 
    class="text" onKeyUp="ReloadTextDiv('tel', 'textDisplay3');" />
    
    <p><span id="textDisplay"></span></p>
    <p><span id="textDisplay2"></span></p>
    <p><span id="textDisplay3"></span></p> 
    All you have to do is pass the ids of your source and destination elements with the function I've provided above

  3. #3
    SitePoint Zealot arthaus's Avatar
    Join Date
    Jun 2002
    Location
    Pasadena, CA
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi vgarcia,

    Wow!!
    You're right. I completely forgot to explore that avenue...

    I really appreciate your input!

    Regards,
    Arthur


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
  •