How to retain line breaks from a textarea in a simple form

[Steve Marson]

I am using a simple form in modx CMS and I need the textarea to retain the line breaks.

I'd prefer a javascript solution if possible.

This is because the textarea will be used to order food and the client doesn't want to receive a single line of text.
eg, this entry:

1 can coke
3 beef sandwiches
1 cake

is received as:

1 can coke 3 beef sandwiches 1 cake

===

html code here ..

<form class="orderform" method="post"  action="[~[*id*]~]">
<input type="hidden" name="formid" value="eCafeForm" />

<fieldset class="fieldset1">

<ol>  
<h3>Your contact details</h3>

<li><label for="firstname">First Name:</label>
<input type="text" name="firstname" maxlength="60" eform="Your Name:firstname:1"></li>

<li><label for="lastname">Last Name:</label>
<input type="text" name="lastname" maxlength="60" eform="Your Name:lastname"></li>

<li><label for="telephone">Telephone:</label>
<input type="text" name="telephone" size="40" maxlength="40" eform="Your Telephone:telephone:1"></li>

<li><label for="email">Email:</label>
<input type="text" name="email" size="40" maxlength="40" eform="Your Email:email:1"></li>

<li><label for="department">Department:</label>
<input type="text" name="department" size="40" maxlength="40" eform="department"></li>

<li><label for="order">Your order</label>
<textarea cols="40" rows="6" name="order" eform="Your Order:order"></textarea></li>

<!--<li><label for="date">Date required:</label>
<input type="text" name="date" size="40" maxlength="40" eform="date"></li>
-->


<li><label for="time" >Time to be picked up:</label>
<select class="time" name="time">

<optgroup>
<option value="choose time" >Choose time ..</option>
<option value="11am - 11.30am" >11am - 11.30am</option>
<option value="11.30am - 12 noon" >11.30am - 12 noon</option>
<option value="12 noon - 12.30pm" >12 noon - 12.30pm</option>
<option value="12.30pm - 1pm" >12.30pm - 1pm</option>
<option value="1pm - 1.30pm<" >1pm - 1.30pm</option>
<option value="1.30pm - 2pm<" >1.30pm - 2pm</option>
</optgroup>
</select>
</li>

<li><input class="btn" type="submit" name="submit" value="Place Order"/></li>

</ol>
</fieldset>

</form>

===

Many thanks!

Steve

[Oralloy]

Steve,

use a pattern-match replace algorithm. it'll be something like:

var orderString = order.value;

orderString = orderString.replace(/\r|\n|\r\n/g, '<br>')

[johny10151981]

try this example

<script>
	function play()
	{
	 var data=document.getElementById("j").value;
	 var d=data.split("\n");
	 var i=0;
	 while(d[i]!=null)
	 {
		alert(d[i]);
		i++;
	 }
	 
	 
	}
</script>
<textarea id=j></textarea>
<button onclick=play()>check</button>

[Steve Marson]

Still need help

http://www.taste-catering.co.uk/index.php?id=54

I've tried suggestion 2, as I didn't understand where to use suggestion 1 but it still shows the data in one line.

The page is at the URL above

Many thanks so far!

Steve

[Oralloy]

All suggestion 1 does is use javascript to translate a string with linebreaks into a HTML string with <br> tags to provide line breaks.

You would use it to manipulate your order string.

Does this help? Frankly, I looked at your page, and it looks like your order processing logic is on the server, not in JavaScript