• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 739
  • Last Modified:

Javascript to Insert a break line in TextArea boxes

Hello,

I'm working on a web page and I have these read only text areas where the user enters several options for the products they want.   When they enter these options I am able to create text boxes for each input, but when they go to the next page, all entered text becomes read only and it's displayed in one single textarea.  All fields are separated by a comma.

Is there a way that I can create a javascript code that looks for any textarea in the page, look for their content and enters a break <br> before a comma so the text looks easier to read?  These breaks are only for visual purposes, I don't want to edit the field values. I just want them to look better than one single line.

Here's 2 textareas where you can see what I'm talking about.  

<textarea readOnly class="cart" wrap="physical" name="0:freeopt" rows="4" cols="40" ID="Textarea1">Product,Widget,Type,Bucket,Color,Blue</textarea>

<textarea readOnly class="cart" wrap="physical" name="1:freeopt" rows="4" cols="40" ID="Textarea2">Product,Shell,Type,Wood,Color,Red</textarea>

I need them to look like this:

Product,
Widget,
Type,
Bucket,
Color,
Blue

Any ideas?

Thanks!
0
TheUndecider
Asked:
TheUndecider
2 Solutions
 
leakim971PluritechnicianCommented:
Hello TheUndecider,

Try this code :

(you can replace comma "," by "\r\n")


<html>
<head>
<script languagie="javascript">
	function makeOneWithCR() {
		document.getElementById("Textarea3").value = (document.getElementById("Textarea1").value + document.getElementById("Textarea2").value).replace(/,/g, "\r\n");	
	}
</script>
</head>
<body onload="makeOneWithCR();">
<textarea readOnly class="cart" wrap="physical" name="0:freeopt" rows="4" cols="40" ID="Textarea1">Product,Widget,Type,Bucket,Color,Blue</textarea>
<textarea readOnly class="cart" wrap="physical" name="1:freeopt" rows="4" cols="40" ID="Textarea2">Product,Shell,Type,Wood,Color,Red</textarea>
<textarea readOnly class="cart" wrap="physical" name="2:freeopt" rows="4" cols="40" ID="Textarea3"></textarea>
</body>
</html>

Open in new window

0
 
kadabaCommented:
>> Is there a way that I can create a javascript code that looks for any textarea in the page,

<html>
<head>
<script type="text/javascript">
function addLineBreaksInTextArea()
{
	var txtAreaObjs = document.getElementsByTagName("textarea");
	var regexComma = /[,]/g;
	for(var i=0;i<txtAreaObjs.length;i++){
		txtAreaObjs[i].value = (txtAreaObjs[i].value).replace(regexComma,",\r\n");
	}
}
window.onload=addLineBreaksInTextArea;
</script>
</head>
<body>
<textarea>hello,world</textarea>
<textarea>Welcome,to,EE</textarea>
<textarea>hi,there</textarea>
<textarea>greetings,buddy!</textarea>
</body>
</html>

Open in new window

0
 
kadabaCommented:
>> Is there a way that I can create a javascript code that looks for any textarea in the page,

Sorry posted soon. The code should be this way..

leakim, have the comma also as per the req
0
 
asafadisCommented:
A break-tag (<br />) won't work inside a textarea.  In JavaScript you would print a break character, "\n".  This may vary depending on the language you're using.
<textarea rows="12" cols="50" id="myText"></textarea>
<script type="text/javascript">
document.getElementById('myText').innerHTML = "hello\nworld";
</script>

Open in new window

0
 
TheUndeciderAuthor Commented:
Thanks!   It really worked!
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now