Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
Like Tree3Likes

Thread: Replace Character String in a textarea with an input string

  1. #1
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    7
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Replace Character String in a textarea with an input string

    I need help with something seemingly simple. I am trying to replace a character string a textarea by passing data from 3 or more input text boxes. I have found similar solutions on the web but I am not really a JS programmer and I can't figure out how to get it working exactly as I need it to.

    Here is an example of what I am trying to do as well as a few working examples that I found:

    http://www.liquamedia.com/js/dynamic_textarea.html

    Any assistance would be GREATLY appreciated!!!

    In case you want my example source, here it is:

    Code:
    <html>
    <head>
    <script language="Javascript" type="text/javascript">
    
    function populateTextArea(){
    
      var output = new Array();
      var fieldID = 1;
    
      while (fieldObj = document.form_pe['pe_gen'+fieldID]) {
    
        if (fieldObj.length) {
          for (var j=0; j<fieldObj.length; j++) {
            if (fieldObj[j].checked) {
              output[output.length] = fieldObj[j].value;
            }
          }
        } else {
          if (fieldObj.checked) {
            output[output.length] = fieldObj.value;
          }
        }
    
        fieldID++;
      }
    
      document.getElementById('targetarea').value = output.join(', ');
    
    }
    
    
    function getObject(obj) {
      var theObj;
      if(document.all) {
        if(typeof obj=="string") {
          return document.all(obj);
        } else {
          return obj.style;
        }
      }
      if(document.getElementById) {
        if(typeof obj=="string") {
          return document.getElementById(obj);
        } else {
          return obj.style;
        }
      }
      return null;
    }
    
    function toCount(entrance,exit,text,characters) {
      var entranceObj=getObject(entrance);
      var exitObj=getObject(exit);
      var length=characters - entranceObj.value.length;
      if(length <= 0) {
        length=0;
        text='<span class="disable"> '+text+' </span>';
        entranceObj.value=entranceObj.value.substr(0,characters);
      }
      exitObj.innerHTML = text.replace("{CHAR}",length);
    }
    
    	
    </script>
    
    <style type="text/css">
    
    .minitext {
      font: normal 0.7em Arial, sans-serif;
      color: Black;
    }
    
    .disable {
      background-color: #CF110C;
      color: #fff;
      font-weight: bold;
      padding: 5px;
    }
    
    </style>
    
    </head>
    
    <body>
    
    
    
    
    <b>What I need:</b><br><br>
    <form method="POST" action="">
    
    String 1: <input type="text" value=""><br>
    String 2: <input type="text" value=""><br>
    String 3: <input type="text" value=""><br>  
      
    
    <br>
    <a href="#" onClick="populateTextArea();">Populate</a><br>
    <br>
    
    <textarea cols="50" rows="5" readonly>This is my readonly content with "String 1" inserted here, "String 2" inserted here, and "String 3" inserted here.</textarea>
    <br>
    
    <span>22 characters left</span>
    
    
    </form>
    
    <br>
    <br>
    
    
    <br><b>Working Example </b>
    <br>
    But using checkbox and radio buttons and there is no preset readonly copy inside the textarea:<br><br>
    <form name="form_pe" method="" action="">
    
      <input type="checkbox" name="pe_gen1" id="pe_item2" value="Text string 1"> Text string 1<br>
      
      
      <input type="radio" name="pe_gen2" id="pe_item4" value="Text string 2">Text string 2
      <input type="radio" name="pe_gen2" id="pe_item6" value="Text string 3">Text string 3<br>                 
      <input type="radio" name="pe_gen3" id="pe_item8" value="Text string 4">Text string 4
      <input type="radio" name="pe_gen3" id="pe_item10"  value="Text string 5">Text string 5<br>
      <input type="radio" name="pe_gen4" id="pe_item12" value="Text string 6">Text string 6
      <input type="radio" name="pe_gen4" id="pe_item14" value="Text string 7">Text string 7<br>
    
    
    <br>
    <a href="#" onClick="populateTextArea();">Populate</a><br>
    <br>
    
    <textarea id="targetarea" cols="50" rows="5"></textarea>
    </form>
    
    
    <br>
    <br><b>Working character count </b>
    <br>
    My final textarea can only have 140 characters, again here is a working script that is close but not quite what I need...
    <br>
    <br>
    
    
    <form action="#" method="post">
    
          <input type="text" id="eBann" name="bannerURL" maxlength="100" size="60" onKeyUp="toCount('eBann','sBann','{CHAR} characters left',140);">
          <br>
          <span id="sBann">140 characters left.</span>
    
    </form>
    
    </body>
    </html>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    You are using document.form_pe in your code, but the example you WANT to have work does *NOT* have a <form name="form_pe">.

    Note that the code you show is horribly obsolete. Form names were deprecated long ago. And document.all has not been needed since MSIE 4, about 15 years ago!
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    What is the point of "22 characters left"??? Is the use allowed to specify no more than 22 total characters in the 3 inputs???
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    My code, which seems to work, including limiting user input to 22 characters, total.
    Code:
    <html>
    <body>
    <form id="theForm" method="POST" action="MUST_be_given.PHP">
    
    String 1: <input name="s1" type="text" value=""><br>
    String 2: <input name="s2" type="text" value=""><br>
    String 3: <input name="s3" type="text" value=""><br>  
    
    
    <br>
    
    <textarea name="theText" cols="50" rows="5" readonly>
        This is my readonly content with "$1" inserted here, "$2" inserted here, and "$3" inserted here.
    </textarea>
    <br>
    
    <span id="charLeft">22 characters left</span>
    
    
    </form>
    
    <script type="text/javascript">
    var form = document.getElementById("theForm");
    var baseText = form.theText.value;
    
    function updateText( )
    {
        var remaining = 22;
        var txt = baseText;
        for ( var inum = 1; inum <= 3; ++inum )
        {
            var val = form["s"+inum].value;
            if ( val.length > remaining ) val = val.substring(0,remaining);
            remaining -= val.length;
            form["s"+inum].value = val;
            txt = txt.replace("$"+inum, val);
        }
        form.theText.value = txt;
        document.getElementById("charLeft").innerHTML = remaining + " characters left";
    }
    
    form.s1.onchange = updateText;
    form.s2.onchange = updateText;
    form.s3.onchange = updateText;
    </script>
    </body>
    </html>
    cr3at1v3 likes this.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    cr3at1v3 (07-20-2014)

  • #5
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    7
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    My code, which seems to work, including limiting user input to 22 characters, total.
    Code:
    <html>
    <body>
    <form id="theForm" method="POST" action="MUST_be_given.PHP">
    
    String 1: <input name="s1" type="text" value=""><br>
    String 2: <input name="s2" type="text" value=""><br>
    String 3: <input name="s3" type="text" value=""><br>  
    
    
    <br>
    
    <textarea name="theText" cols="50" rows="5" readonly>
        This is my readonly content with "$1" inserted here, "$2" inserted here, and "$3" inserted here.
    </textarea>
    <br>
    
    <span id="charLeft">22 characters left</span>
    
    
    </form>
    
    <script type="text/javascript">
    var form = document.getElementById("theForm");
    var baseText = form.theText.value;
    
    function updateText( )
    {
        var remaining = 22;
        var txt = baseText;
        for ( var inum = 1; inum <= 3; ++inum )
        {
            var val = form["s"+inum].value;
            if ( val.length > remaining ) val = val.substring(0,remaining);
            remaining -= val.length;
            form["s"+inum].value = val;
            txt = txt.replace("$"+inum, val);
        }
        form.theText.value = txt;
        document.getElementById("charLeft").innerHTML = remaining + " characters left";
    }
    
    form.s1.onchange = updateText;
    form.s2.onchange = updateText;
    form.s3.onchange = updateText;
    </script>
    </body>
    </html>
    thank you very much for your reply, greatly appreciated. actually, characters needed is not necessary and the most important thing is the string and the textarea and you code works. superb!

    i have just one thing to ask, what if there are more than one string 1, string 2, and string 3 in the textarea?

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    Just add $4, $5, etc., as many as you want.

    And then change the for loop to match.

    Alternate solution:
    Code:
    <html>
    <body>
    <form id="theForm" method="POST" action="MUST_be_given.PHP">
    <div id="strings">
    String 1: <input type="text" value=""><br>
    String 2: <input type="text" value=""><br>
    String 3: <input type="text" value=""><br>  
    String 4: <input type="text" value=""><br>  
    String 5: <input type="text" value=""><br>  
    </div>
    <br>
    
    <textarea id="theText" cols="50" rows="5" readonly>
        This is my readonly content with "$$$" inserted here, "$$$" inserted here, and "$$$" inserted here.
        
        And ending with $$$ $$$.
    </textarea>
    <br>
    
    </form>
    
    <script type="text/javascript">
    var inputs = document.getElementById("strings").getElementsByTagName("input");
    var baseText = document.getElementById("theText").value;
    
    function updateText( )
    {
        var txt = baseText.split("$$$");
        for ( var inum = 0; inum < inputs.length; ++inum )
        {
            txt[inum] += inputs[inum].value;
        }
        document.getElementById("theText").value = txt.join("");
    }
    
    for ( var inum = 0; inum < inputs.length; ++inum )
    {
        inputs[inum].onchange = updateText;
    }
    </script>
    </body>
    </html>
    We could even create the correct number of <input>s to match the number of $$$ placeholders in the text string.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    cr3at1v3 (07-21-2014)

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    Oh, what the heck: Self-adapting.
    Code:
    <html>
    <body>
    <form id="theForm" method="POST" action="MUST_be_given.PHP">
    <div id="strings">
    </div>
    <br>
    
    <textarea id="theText" cols="50" rows="5" readonly>
        This is my readonly content with "$$$" inserted here, "$$$" inserted here, and "$$$" inserted here.
        
        And ending with $$$ $$$.
    </textarea>
    <br>
    
    </form>
    
    <script type="text/javascript">
    var baseText = document.getElementById("theText").value;
    
    function updateText( )
    {
        var inputs = document.getElementById("strings").getElementsByTagName("input");
        var txt = baseText.split("$$$");
        for ( var inum = 0; inum < inputs.length; ++inum )
        {
            txt[inum] += inputs[inum].value;
        }
        document.getElementById("theText").value = txt.join("");
    }
    
    var cnt = baseText.split("$$$").length;
    var div = document.getElementById("strings");
    for ( var inum = 1; inum < cnt; ++inum )
    {
        div.appendChild( document.createTextNode("String " + inum + ": ") );
        var inp = document.createElement("input");
        div.appendChild( inp );
        div.appendChild( document.createElement("br") );
        inp.onchange = updateText;
    }
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    cr3at1v3 (07-21-2014)

  • #8
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    7
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thank you again Old Pedant for the reply, the two working examples you gave are excellent but i think i did not explain clearly what i had in mind.

    The one i am referring to as more than one string 1, string 2, string 3 is like this:

    This is my read-only content with "$1" inserted here, "$2" inserted here, and "$3" inserted here. Again will be repeated not only once but random "$1" else "$3". And more of it like, "$1" "$2" "$3", and "$2" "$1" "$3".
    Strings that are found anywhere in the content like all string 1 will be replaced by the input field 1, and all string 2 will be replace by the input field 2, and so on.

    Thank you once again.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    That's ALMOST what my original answer will do. The first one up above. Just needs a regular expression added for the replace() call.

    Thus:
    Code:
    <html>
    <body>
    <form id="theForm" method="POST" action="MUST_be_given.PHP">
    
    String 1: <input name="s1" type="text" value=""><br>
    String 2: <input name="s2" type="text" value=""><br>
    String 3: <input name="s3" type="text" value=""><br>  
    String 4: <input name="s4" type="text" value=""><br>  
    
    
    <br>
    
    <textarea name="theText" cols="50" rows="5" readonly>
        This is my readonly content with "$1" inserted here, "$2" inserted here, and "$3$4" inserted here.
        Then we also can show $4 $3 $2 $1 and $2 $4.
    </textarea>
    <br>
    
    </form>
    
    <script type="text/javascript">
    var form = document.getElementById("theForm");
    var baseText = form.theText.value;
    
    function updateText( )
    {
        var txt = baseText;
        for ( var inum = 1; inum <= 4; ++inum )
        {
            var val = form["s"+inum].value;
            var re = new RegExp("\\$"+inum,"gi");
            txt = txt.replace(re, val);
        }
        form.theText.value = txt;
    }
    
    form.s1.onchange = updateText;
    form.s2.onchange = updateText;
    form.s3.onchange = updateText;
    form.s4.onchange = updateText;
    </script>
    </body>
    </html>
    cr3at1v3 likes this.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    cr3at1v3 (07-21-2014)

  • #10
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    7
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    That's ALMOST what my original answer will do. The first one up above. Just needs a regular expression added for the replace() call.

    Thus:
    Code:
    <html>
    <body>
    <form id="theForm" method="POST" action="MUST_be_given.PHP">
    
    String 1: <input name="s1" type="text" value=""><br>
    String 2: <input name="s2" type="text" value=""><br>
    String 3: <input name="s3" type="text" value=""><br>  
    String 4: <input name="s4" type="text" value=""><br>  
    
    
    <br>
    
    <textarea name="theText" cols="50" rows="5" readonly>
        This is my readonly content with "$1" inserted here, "$2" inserted here, and "$3$4" inserted here.
        Then we also can show $4 $3 $2 $1 and $2 $4.
    </textarea>
    <br>
    
    </form>
    
    <script type="text/javascript">
    var form = document.getElementById("theForm");
    var baseText = form.theText.value;
    
    function updateText( )
    {
        var txt = baseText;
        for ( var inum = 1; inum <= 4; ++inum )
        {
            var val = form["s"+inum].value;
            var re = new RegExp("\\$"+inum,"gi");
            txt = txt.replace(re, val);
        }
        form.theText.value = txt;
    }
    
    form.s1.onchange = updateText;
    form.s2.onchange = updateText;
    form.s3.onchange = updateText;
    form.s4.onchange = updateText;
    </script>
    </body>
    </html>
    thank you very much, greatly appreciated your work. you really are a master in coding...

  • #11
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    7
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    That's ALMOST what my original answer will do. The first one up above. Just needs a regular expression added for the replace() call.

    Thus:
    Code:
    <html>
    <body>
    <form id="theForm" method="POST" action="MUST_be_given.PHP">
    
    String 1: <input name="s1" type="text" value=""><br>
    String 2: <input name="s2" type="text" value=""><br>
    String 3: <input name="s3" type="text" value=""><br>  
    String 4: <input name="s4" type="text" value=""><br>  
    
    
    <br>
    
    <textarea name="theText" cols="50" rows="5" readonly>
        This is my readonly content with "$1" inserted here, "$2" inserted here, and "$3$4" inserted here.
        Then we also can show $4 $3 $2 $1 and $2 $4.
    </textarea>
    <br>
    
    </form>
    
    <script type="text/javascript">
    var form = document.getElementById("theForm");
    var baseText = form.theText.value;
    
    function updateText( )
    {
        var txt = baseText;
        for ( var inum = 1; inum <= 4; ++inum )
        {
            var val = form["s"+inum].value;
            var re = new RegExp("\\$"+inum,"gi");
            txt = txt.replace(re, val);
        }
        form.theText.value = txt;
    }
    
    form.s1.onchange = updateText;
    form.s2.onchange = updateText;
    form.s3.onchange = updateText;
    form.s4.onchange = updateText;
    </script>
    </body>
    </html>
    Hello once again Old Pedant, your script works perfectly fine. I have just another question, what to do if the input string is more that 10 items. I used $10 for input string number 10 but output will replace the value used in input string number 1.

    thanks in advance.

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    Just change this line:
    Code:
            var re = new RegExp("\\$"+inum,"gi");
    to
    Code:
            var re = new RegExp("\\$"+inum+"[^\\d]","gi");
    The regular expression now ends with "+[^\d]" which says that (example) it won't find $1 in $12 because it will insist on finding a NON-DIGIT after the $1.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #13
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    7
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Just change this line:
    Code:
            var re = new RegExp("\\$"+inum,"gi");
    to
    Code:
            var re = new RegExp("\\$"+inum+"[^\\d]","gi");
    The regular expression now ends with "+[^\d]" which says that (example) it won't find $1 in $12 because it will insist on finding a NON-DIGIT after the $1.
    thanks much for the reply, i think there is something wrong with the code you gave. pardon me.

    here is my code:

    Code:
    <html>
    <body>
    <br/>
    <form id="theForm" method="POST" action="MUST_be_given.PHP">
    <font face="courier"><b>
    Month: <input name="s1" type="text" value="" size="30" style="font-family:courier"> Day: <input name="s2" type="text" value="" size="20" style="font-family:courier"> &nbsp;&nbsp;<input type="reset" name="reset" value="Reset Entries"><br>
    Student Name No. 01: <input name="s3" type="text" value="" size="80" style="font-family:courier"><br>  
    Student Name No. 02: <input name="s4" type="text" value="" size="80" style="font-family:courier"><br>  
    Student Name No. 03: <input name="s5" type="text" value="" size="80" style="font-family:courier"><br>  
    Student Name No. 04: <input name="s6" type="text" value="" size="80" style="font-family:courier"><br> 
    Student Name No. 05: <input name="s7" type="text" value="" size="80" style="font-family:courier"><br>
    Student Name No. 06: <input name="s8" type="text" value="" size="80" style="font-family:courier"><br> 
    Student Name No. 07: <input name="s9" type="text" value="" size="80" style="font-family:courier"><br>
    Student Name No. 08: <input name="s10" type="text" value="" size="80" style="font-family:courier"><br> 
    Student Name No. 09: <input name="s11" type="text" value="" size="80" style="font-family:courier"><br> 
    Student Name No. 10: <input name="s12" type="text" value="" size="80" style="font-family:courier"><br>          
    <br>
    
    <textarea name="theText" cols="80" rows="50"  style="font-family:courier" readonly>
    &#39;$1&#39;test
    &#39;$2&#39;test
    &#39;$3&#39;test
    &#39;$4&#39;test
    &#39;$5&#39;test
    &#39;$6&#39;test
    &#39;$7&#39;test
    &#39;$8&#39;test
    &#39;$9&#39;test
    &#39;$10&#39;test
    &#39;$11&#39;test
    &#39;$12&#39;test
    </textarea>
    <br>
    </form></b>
    
    <script type="text/javascript">
    var form = document.getElementById("theForm");
    var baseText = form.theText.value;
    
    function updateText( )
    {
        var txt = baseText;
        for ( var inum = 1; inum <= 12; ++inum )
        {
            var val = form["s"+inum].value;
    		var re = new RegExp("\\$"+inum+"[^\\d]","gi");
            txt = txt.replace(re, val);
        }
        form.theText.value = txt;
    }
    
    form.s1.onchange = updateText;
    form.s2.onchange = updateText;
    form.s3.onchange = updateText;
    form.s4.onchange = updateText;
    form.s5.onchange = updateText;
    form.s6.onchange = updateText;
    form.s7.onchange = updateText;
    form.s8.onchange = updateText;
    form.s9.onchange = updateText;
    form.s10.onchange = updateText;
    form.s11.onchange = updateText;
    form.s12.onchange = updateText;
    </script>
    
    </font>
    </body>
    </html>
    when i run it with the new code, example the existing text is '$1'test when it input name it results to 'nametest where it should be 'name'test

    thanks...

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    Sorry. Teach me to not test my answers first. Though it would have been hard on the tablet I was using.

    Replace
    Code:
    		var re = new RegExp("\\$"+inum+"[^\\d]","gi");
            txt = txt.replace(re, val);
    with
    Code:
            var re = new RegExp("(\\$"+inum+")(\\D)","gi");
            txt = txt.replace(re, val + "$2");
    cr3at1v3 likes this.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    cr3at1v3 (07-29-2014)

  • #15
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    7
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Sorry. Teach me to not test my answers first. Though it would have been hard on the tablet I was using.

    Replace
    Code:
    		var re = new RegExp("\\$"+inum+"[^\\d]","gi");
            txt = txt.replace(re, val);
    with
    Code:
            var re = new RegExp("(\\$"+inum+")(\\D)","gi");
            txt = txt.replace(re, val + "$2");
    works perfectly great. thank you once again. you're the best..


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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