...

View Full Version : Dynamically change the text between <> inside textarea.



krishnaraja
01-02-2012, 10: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, 01: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, 02: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..



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum