Dynamically change the text between <> inside textarea.

krishnaraja

01-02-2012, 09:04 AM

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

vwphillips

01-02-2012, 12:20 PM

<!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>

krishnaraja

01-03-2012, 01:37 PM

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