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.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Dynamically change the text between <> inside textarea.

    Hi Guys,
    I am new to this forum,based on the combobox value,I am creating a textboxes dynamically in jsp .Based on the count of textboxe's the textarea content comes with <value1> like this...
    Here i tried like this,
    <html>
    <head>
    <script>
    function copy_data(val,id,textareaValue){
    var enteredText = val;
    alert("enteredText -----------"+enteredText);
    var boxId= id;
    alert("boxId-----------"+boxId);
    var textValue= textareaValue;
    alert("textValue-----------"+textValue);
    var beforeBrac = textValue.substring(0,textValue.indexOf("<"));
    alert("beforeBrac -----------"+beforeBrac );
    var inbracket = textValue.substring(beforeBrac.length+1,textValue.indexOf(">"));
    alert("inbracket -----------"+inbracket);
    if(boxId = "1"){
    inbracket = val;
    }
    alert("inbracket -----------"+inbracket);
    var afterBrac = textValue.substring(textValue.indexOf(">"),textValue.length);
    alert("afterBrac -----------"+afterBrac );

    var fstr = beforeBrac +"<"+inbracket +afterBrac ;
    if(boxId == "1"){
    document.getElementById('txtArea').value = fstr;
    alert("final str value is"+fstr);

    }
    }
    </script>
    </head>
    <body>
    <input type="text" name ="a" id="1" onkeyup="copy_data(this.value,this.id,document.getElementById('txtArea').value)"/>
    <input type="text" name ="a" id="2" onkeyup="copy_data(this.value,this.id, document.getElementById('txtArea').value)"/>
    <textarea rows="2" cols="20" id="txtArea">
    At W3Schools you <will> find all <the> Web-building tutorials <you> need, from basic HTML to advanced <XML>, SQL, ASP, and PHP.
    </textarea>
    </body>
    </html>

    three text boxes with some value [ value1 ] [value2] [value3 ]
    this is the text area content:-
    At W3Schools you <will> find all <the> Web-building tutorials <you> need, from basic HTML to advanced XML, SQL, ASP, and PHP.

    the output should be :-
    At W3Schools you <value1> find all <value2> Web-building tutorials <value3 > need, from basic HTML to advanced XML, SQL, ASP, and PHP...
    But i can't get it exactly..When i enter or delete the value it should replaced in the proper <> correctly.. If i enter the value in 1st textbox it should replace the value 1st <>.same for others also...Any Idea's ?Plz suggest me ...
    Last edited by krishnaraja; 01-02-2012 at 09:27 AM. Reason: Giving clear explanation with real examples

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,467
    Thanks
    3
    Thanked 495 Times in 482 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function copy_data(obj,id,nu){
     var ipv=obj.value,ta=document.getElementById(id),tav=ta.value.split('<'),i,cnt=0,z0=0,z1;
     for (var z0=0;z0<tav.length;z0++){
      i=tav[z0].indexOf('>');
      if (i>-1){
       if (nu==cnt){
        tav[z0]=ipv+tav[z0].substring(i,tav[z0].length);
       }
       cnt++;
      }
     }
     if (cnt>nu){
      ta.value=tav.join('<');
     }
     else {
       ta.value+='<'+ipv+'>';
     }
    }
    /*]]>*/
    </script></head>
    
    <body>
    <input type="text" onkeyup="copy_data(this,'txtArea',0);"/>
    <input type="text" onkeyup="copy_data(this,'txtArea',1);"/>
    <textarea rows="2" cols="20" id="txtArea">
    tom <> joe  tom <> joe
    </textarea>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    krishnaraja (01-03-2012)

  • #3
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile

    Thanks VMPhillips,
    But i tried this way,

    <html>
    <head>
    <script>
    var defaultValuesArray = new Array();
    var defaultValuesSet = "false";
    function copy_data(){
    var startTagArray = new Array();
    var endTagArray = new Array();
    var textVal = document.getElementById('txtArea').value;
    var i=0;
    var j=0;
    for (j = 0; j < textVal.length; j++) {
    if(textVal.charAt(j) == "<"){
    startTagArray.push(j);
    }
    }
    for(i=0; i< startTagArray.length; i++) {
    textVal = new String(document.getElementById('txtArea').value);
    startTagArray = new Array();
    endTagArray = new Array();
    for (j = 0; j < textVal.length; j++) {
    if(textVal.charAt(j) == "<"){
    startTagArray .push(j);
    }
    if(textVal.charAt(j) == ">"){
    endTagArray.push(j);
    }
    }
    if(defaultValuesSet != "true") {
    defaultValuesArray.push(textVal.substring(startTagArray[i]+1,endTagArray[i]));
    }
    alert(defaultValuesArray[i]);
    alert(document.getElementById(i).value);
    if(document.getElementById(i).value != undefined && document.getElementById(i).value != "") {
    alert("1"+defaultValuesArray[i]);
    document.getElementById('txtArea').value =
    textVal.replace(textVal.substring(startTagArray[i]+1,endTagArray[i]),document.getElementById(i).value);
    }
    else {
    alert("2"+defaultValuesArray[i]);
    document.getElementById('txtArea').value = textVal.replace(textVal.substring(startTagArray[i]+1,endTagArray[i]),defaultValuesArray[i]);
    }


    alert(textVal.substring(startTagArray[i]+1,endTagArray[i]));
    }
    defaultValuesSet = "true";
    }



    </script>
    </head>
    <body>
    <input type="text" name ="a" id="0" onblur="copy_data()"/>
    <input type="text" name ="a" id="1" onblur="copy_data()"/><BR/>
    <input type="text" name ="a" id="2" onblur="copy_data()"/><BR/>
    <input type="text" name ="a" id="3" onblur="copy_data()"/><BR/>
    <textarea rows="2" cols="20" id="txtArea">
    At W3Schools you <will> find all <the> Web-building tutorials you need, from basic HTML to advanced <XML>, SQL, ASP, and <PHP>.
    </textarea>
    /body>
    </html>

    It's working fine..When we delete the entered text that time also it's working fine..May be it's helpful for someone...Thanks for ur great reply..


  •  

    Posting Permissions

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