...

View Full Version : Form <br> tag



telmessos
12-13-2006, 11:19 AM
Hi all,

I have a script which adds <br> tag to the textarea when you press Enter. Text area looks like:

My name is John<br>I am 22 years old.

Does anyone have a script which hides this <br> code and gives it to the output of the form? I need the text area look like:
My name is John
I am 22 years old

but the info sent to be My name is John<br>I am 22 years old.

Thanks

liorean
12-13-2006, 11:27 AM
Try inserting a newline instead. '\n'

martin_narg
12-13-2006, 11:39 AM
This does exactly what liorean suggests:
function convertBRtoLinefeed(theTextarea, theHTML) {
theTextarea.value = theHTML.replace(/<br[ \/]*>/ig, "\n");
}Usage:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript" language="javascript">
window.onload = function() {
convertBRtoLinefeed(document.myForm.myTextarea, "foo<br>bar<br />hello<br />world");
}

function convertBRtoLinefeed(theTextarea, theHTML) {
theTextarea.value = theHTML.replace(/<br[ \/]*>/ig, "\n");
}
</script>
</head>

<body>
<form name="myForm">
<textarea name="myTextarea" id="myTextarea" style="width: 300px; height: 100px;"></textarea>
</form>
</body>
</html>Hope this helps.

m_n

david_kw
12-13-2006, 04:50 PM
Is it just <br> you are trying to get to work or all html?

Another solution if it is all is



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Junque</title>
<script type="text/javascript">
function doIt() {
var adiv = document.getElementById("adiv");
var t = document.getElementById("t");
adiv.innerHTML = t.value;
}
</script>
</head>
<body>
<div>
<form id="f" action="#" onsubmit="return(false);">

<input type="text" id="t" />
<button onclick="doIt();">Do it</button>
</form>
<div id="adiv"> </div>
</div>
</body>
</html>


david_kw

telmessos
01-04-2007, 03:33 PM
I could not explain what I need friends. My clients are entering their address info and requests using the two text areas. For example:

When a client writes two paragraphs to address section and presses enter twice, I don't want it to appear on the text area. But when she finishes and clicks submit, the info going to the database must contain <br> tags instead of \n

And a second thing is address info editing pages. I type an info to my database which contains \n tags in it. But when put the value in which from database between the <textarea> </textarea> tags, my text area does not recognise \n tags as a break and simply writes \n

I will be glad if you can help me.

Thanks

Ancora
01-04-2007, 06:17 PM
telmessos:

I'm not certain whether you are inserting <br> in your database, or \n, so the following contains an example of both situations.



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

function formatText(nForm){

nForm['one'].value = nForm['one'].value.replace(/[\r\n]/g,"|").replace(/\|{1,2}/g,"<br>");
nForm['two'].value = nForm['two'].value.replace(/[\r\n]/g,"|").replace(/\|{1,2}/g,"<br>");

return false;
}

function reformatText(){

var nForm = document.forms[0];
nForm['three'].value = nForm['three'].value.replace(/\\n/g,"\r\n");
// or
nForm['four'].value = nForm['four'].value.replace(/\<br\>/g,"\r\n");
}

onload=reformatText;

</script>
<style type="text/css">

body {background-color:#eae3c6;margin-top:60px}
form {width:300px;margin:auto}
fieldset {width:280px;background-color:#f0fff0;border:1px solid #87ceeb}
legend {font-family:georgia;font-size:14pt;color:#00008b;background-color:#87ceeb;padding-left:3px;padding-right:3px;margin-bottom:5px}
label {font-family:times;font-size:12pt;color:#00008b;padding:5px;display:block}
textarea {font-family:times;font-size:10pt;overflow:auto;margin-left:55px;display:block}
.submitBtn {font-family:tahoma;font-size:10pt;display:block;margin-left:auto;margin-right:auto;margin-top:5px;margin-bottom:5px}

</style>
</head>
<body>
<form method="post" action="" onsubmit="return formatText(this)">
<fieldset>
<legend>Hello</legend>

<label>Something:</label><textarea rows='4' cols='30' name='one'>Hello
My Name is John
I am 22 years old</textarea>
<label>Anything:</label><textarea rows='4' cols='30' name='two'></textarea>

<label>From database:</label><textarea rows='4' cols='30' name='three'>The quick brown\nfox jumped over the\nlazy dog's back</textarea>
<label>From database:</label><textarea rows='4' cols='30' name='four'>The quick brown<br>nfox jumped over the<br>nlazy dog's back</textarea>

<input type='submit' name='submit' value="Submit" class='submitBtn'>
</fieldset>
</form>
</body>
</html>

telmessos
01-04-2007, 07:30 PM
thanks mate. you are a star. thanks to all other friends who tried to help.
:)

Ancora
01-04-2007, 07:37 PM
telmessos:

You're welcome. Please, in the future, address me by my name.

I made a correction to the code. Find this:.replace(/\|{2,2}/g,"<br>");

and change it to this: .replace(/\|{1,2}/g,"<br>");

dumpfi
01-04-2007, 08:25 PM
I recommed to perform any data manipulation server-side and not client-side.

If you use Ancoras script and don't convert newlines to <br>-tags server-side the data of your users will either contain newlines or <br>-tags depending on whether they have Javascript enabled or not.

You can do the conversion easily at the server-side (e.g. PHP has a function specifically for this purpose: nl2br) and don't have to worry whether there are <br>'s shown in the textarea or not.

dumpfi

Thompson
01-04-2007, 09:00 PM
I agree with dumpfi. In this case, is easier to make this with a server-side language. And if you're trying to pass the data of the form to a database, certainly you are using server-side scripting.

Sometimes it's better waste server's processing rather than client's processing.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum