/    Sign up×
Community /Pin to ProfileBookmark

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

to post a comment
JavaScript

28 Comments(s)

Copy linkTweet thisAlerts:
@gil_davisDec 13.2006 — Use "n" in a textarea for line breaks.
Copy linkTweet thisAlerts:
@telmessosauthorDec 13.2006 — I think you misunderstood. It doesn't matter what I use, I don't want it to be shown in the text area but to be in the output of the form.
Copy linkTweet thisAlerts:
@mrhooDec 13.2006 — Use "n" in a textarea for line breaks.

n is a non printing character escape that adds a line break

to the text in the textarea.

textareas usually preserve whitespace by default, but if you like

belts and suspenders you can set [CODE]textarea{white-space:pre}[/CODE] in your stylesheet.
Copy linkTweet thisAlerts:
@telmessosauthorDec 23.2006 — I've done the textarea white-space thing and added a test product with the following text:

this is

a test

message

but it again appeared as this is a test message on my display pages.

Please help.
Copy linkTweet thisAlerts:
@konithomimoDec 23.2006 — What the other posters were saying was to add n to the text string, which will be represented on screen by a line break . . . which you cant see. for example:
&lt;html&gt;
&lt;script type="text/javascript"&gt;
function addBreak(obj){
var t = obj.text;
if((window.event &amp;&amp; window.event.keyCode == 13)||(event &amp;&amp; event.which == 13))
t+='n';
obj.text=t;
return;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;textarea onkeyup="addBreak(this)"&gt;
&lt;/textarea&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@telmessosauthorDec 23.2006 — This is also not working...
Copy linkTweet thisAlerts:
@konithomimoDec 23.2006 — You will have to be more specific then. ALl you keep saying is you want to show a line break in the form.
Copy linkTweet thisAlerts:
@konithomimoDec 23.2006 — The code I provided above will act the same as hitting the enter button in a text editor . . . meaning it will start a new line.
Copy linkTweet thisAlerts:
@telmessosauthorDec 23.2006 — I can't be more specific. All I need is this:

I have text area when a user press enter I want the code to add a <br> tag to the output of the textarea but not appear on the textarea. So the text area will look like:

This is

a test

message

but the output of the textarea will be:

This is<br>a test<br>message

I write the text to the database and another ASP file reads it from there and displays it. So those breaks will appear on my display page.
Copy linkTweet thisAlerts:
@konithomimoDec 23.2006 — That is quite a bit more specific. Here is what you do. When you are ready to send the data to the database run it through this function which will turn all of the line breaks into <br>:

function replaceIt(text){
var tt='';
var ttt=text;

while(ttt.match('n'))
{
tt=ttt;
ttt=tt.replace('n','&lt;br&gt;');
}
alert(ttt)
return (ttt);
}


Just remove the alert . . . it is only there to show you that it actually replace the line breaks . . . go ahead and try it out.
Copy linkTweet thisAlerts:
@konithomimoDec 23.2006 — The data you have to pass to that function is the .value or .innerHTML

Either one will work since in this case they are the same thing
Copy linkTweet thisAlerts:
@telmessosauthorDec 23.2006 — How will I call this script? This can not be called with Form onSubmit as it is already calling another script to validate some other textareas.
Copy linkTweet thisAlerts:
@konithomimoDec 23.2006 — you can call multiple functions from one subm it method. Just seperate the functions calls with a semicolon. For example:

onsubmit="function1();function2();function3"
Copy linkTweet thisAlerts:
@telmessosauthorDec 23.2006 — thanks for your help. ?
Copy linkTweet thisAlerts:
@ricpDec 24.2006 — 
<i>
</i>while(ttt.match('n'))
{
tt=ttt;
ttt=tt.replace('n','&lt;br&gt;');
}

[/QUOTE]


Err... why the while? Replace that whole thing with...

<i>
</i>ttt = ttt.replace(/n/g,"&lt;br/&gt;");

..otherwise you are wasting the power of the RE.. ?
Copy linkTweet thisAlerts:
@konithomimoDec 24.2006 — Err... why the while? Replace that whole thing with...

<i>
</i>ttt = ttt.replace(/n/g,"&lt;br/&gt;");

..otherwise you are wasting the power of the RE.. ?[/QUOTE]


2 reasons:

  • 1. Since the OP is having trouble understanding the basics of what to do it is likely that they won't understand what the Reg Ex you used signifies.


  • 2. Using a loop will allow for conditionals to be used. For example, if the user wants to only replace everyother, or maybe every 36th line break, then they could easily modify the code to do that . . . which won't be possible with your Rewg Ex . . . . expescially if the user doesnt know what the basic Reg Ex you used means.


  • To put it more simply, I was making my code more abstract and easier for the OP to understand.
    Copy linkTweet thisAlerts:
    @konithomimoDec 24.2006 — Err... why the while? Replace that whole thing with...

    <i>
    </i>ttt = ttt.replace(/n/g,"&lt;br/&gt;");

    ..otherwise you are wasting the power of the RE.. ?[/QUOTE]


    2 reasons:

  • 1. Since the OP is having trouble understanding the basics of what to do it is likely that they won't understand what the Reg Ex you used signifies.


  • 2. Using a loop will allow for conditionals to be used. For example, if the user wants to only replace everyother, or maybe every 36th line break, then they could easily modify the code to do that . . . which won't be possible with your Rewg Ex . . . . expescially if the user doesnt know what the basic Reg Ex you used means.


  • To put it more simply, I was making my code more abstract and easier for the OP to understand.
    Copy linkTweet thisAlerts:
    @ricpDec 25.2006 — Er..

    1) Then surely the purpose is to improve the OP's understanding of the possibilities of RE rather than write superfluous and wasteful code.

    2) You might want to check up on the power of RE as you can pass functions in as the second parameter for the replace, allowing you to set your conditionals as you suggest (even if it's highly unlikely from the original question).
    Copy linkTweet thisAlerts:
    @konithomimoDec 25.2006 — Er..

    1) Then surely the purpose is to improve the OP's understanding of the possibilities of RE rather than write superfluous and wasteful code.

    2) You might want to check up on the power of RE as you can pass functions in as the second parameter for the replace, allowing you to set your conditionals as you suggest (even if it's highly unlikely from the original question).[/QUOTE]


    Expecting a coder to understand higher levels of Reg Exp when they have trouble with basic html code is not a good idea. A coder should learn step by step, not jump right into the hard bits knowing that the easier parts will come along since you need them for the harder bits.

    I would rather have the OP ask about match, and then be able to tell them how to use it and then show them Reg Exp instead of simply saying "Here use this as is" because then it will be harder for them to get a grasp on what is happening since then they will have more things to research and get a handle on.
    Copy linkTweet thisAlerts:
    @ricpDec 25.2006 — This is obviously a difference of opinion relating to how information is passed to those asking. Me? I like provide the person with the best solution I can think of, if that involves complicated techniques then that is simply the fact of life as a programmer.

    C'est la vie, eh? At least the OP has had (if they bothered to check the thread once their answer has been received, that is) the opportunity to see several solutions.
    Copy linkTweet thisAlerts:
    @konithomimoDec 25.2006 — This is obviously a difference of opinion relating to how information is passed to those asking. Me? I like provide the person with the best solution I can think of, if that involves complicated techniques then that is simply the fact of life as a programmer.

    C'est la vie, eh? At least the OP has had (if they bothered to check the thread once their answer has been received, that is) the opportunity to see several solutions.[/QUOTE]

    True, but there is more to being a programmer than simply finding the shortest code to do the job. Professional programmers have to be concerned with abstraction.
    Copy linkTweet thisAlerts:
    @ricpDec 25.2006 — All depends doesn't it, konithomino.

    From my point of view a programmer (professional or not) is about finding the most efficient solution to any problem. Abstraction simply comes from understanding the process involved.

    We could go round in circles here. Don't take offence from my initial comments, they were not intended to insult or belittle your solution, simply offering what I considered a more efficient option without sacrificing readability.
    Copy linkTweet thisAlerts:
    @konithomimoDec 25.2006 — I have not taken offense to anything that you have said. I was simply doing the same as you, so please don't get upset.

    On one note though, abstraction is not about understanding the process. Abstraction is about the "reusability" of the code for more purposes than just the basic one needed.

    In a case as simple as this one though the level of abstraction doesnt have to be too high. but when you are working on a program with many programmers a high level of abstractoin is a must.
    Copy linkTweet thisAlerts:
    @ricpDec 25.2006 — I have not taken offense to anything that you have said. I was simply doing the same as you, so please don't get upset.
    [/QUOTE]

    Nope certainly not. As a new member to the forum I just had to state my position. The text medium is notorious for being able to send out the wrong signals.

    As for the "abstraction" definition, I do not see that as re-usability. In fact Wiki defines it as..

    In computer science, abstraction is a mechanism and practice to reduce and factor out details so that one can focus on a few concepts at a time.
    [/quote]

    ..and in OO specifically as..

    In object-oriented programming theory, abstraction is the facility to define objects that represent abstract "actors" that can perform work, report on and change their state, and "communicate" with other objects in the system.
    [/quote]

    Either way, this is now getting off topic and as such could end up as pages of philosophical debate surrounding the exact emphasis of key words in different sentences. Something I am sure we both don't have the time or the patience for.

    I am sure we are both (to use a festive metaphor) singing from the same hymn book.
    Copy linkTweet thisAlerts:
    @telmessosauthorJan 04.2007 — whatever you sent is totally not working. code doesn't see the line breaks in the text area and does not replace it.
    Copy linkTweet thisAlerts:
    @jawbootJan 04.2007 — konithomimo:

    I have not seen such thoughts on programming since I have begun learning.

    Your idea as quoted:

    is about the "reusability" of the code for more purposes than just the basic one needed.[/QUOTE]

    Even if it was intended to be about "abstraction"; I agree with what you wrote and I put it into practice - not as a rule, but as some kind of human instinct.
    Copy linkTweet thisAlerts:
    @heirophantJan 04.2007 — Nevermind...I should read more thouroughly before posting....I hereby edit out the content of my message.
    Copy linkTweet thisAlerts:
    @telmessosauthorJan 04.2007 — thank you all for changing my question to a chat room... very nice!!
    ×

    Success!

    Help @telmessos spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 5.26,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...