Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10

Thread: Form <br> tag

  1. #1
    Regular Coder
    Join Date
    Apr 2006
    Posts
    133
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Form <br> tag

    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

  • #2
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeå, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Try inserting a newline instead. '\n'
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #3
    Regular Coder martin_narg's Avatar
    Join Date
    Jul 2002
    Location
    Chamonix, France
    Posts
    600
    Thanks
    1
    Thanked 3 Times in 3 Posts
    This does exactly what liorean suggests:
    Code:
    function convertBRtoLinefeed(theTextarea, theHTML) {
    	theTextarea.value = theHTML.replace(/<br[ \/]*>/ig, "\n");
    }
    Usage:
    Code:
    <!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
    "Cos it's strange isn't it. You stand in the middle of a library and go 'Aaaaaaaaaaaaaaaaggggggghhhhhhh!'
    and everybody just stares at you. But you do the same in an aeroplane, and everybody joins in."
    -Tommy Cooper

  • #4
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Is it just <br> you are trying to get to work or all html?

    Another solution if it is all is

    Code:
    <!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

  • #5
    Regular Coder
    Join Date
    Apr 2006
    Posts
    133
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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

  • #6
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    telmessos:

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

    Code:
    <!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>
    Last edited by Ancora; 01-04-2007 at 07:44 PM.

  • #7
    Regular Coder
    Join Date
    Apr 2006
    Posts
    133
    Thanks
    6
    Thanked 0 Times in 0 Posts
    thanks mate. you are a star. thanks to all other friends who tried to help.

  • #8
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    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>");

  • #9
    Regular Coder
    Join Date
    Jun 2004
    Posts
    565
    Thanks
    0
    Thanked 18 Times in 18 Posts
    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
    "Failure is not an option. It comes bundled with the software."
    ....../)/)..(\__/).(\(\................../)_/)......
    .....(-.-).(='.'=).(-.-)................(o.O)...../<)
    ....(.).(.)("}_("}(.)(.)...............(.)_(.))¯/.
    ¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
    Little did the bunnies suspect that one of them was a psychotic mass murderer with a 6 ft. axe.

  • #10
    New Coder
    Join Date
    Mar 2006
    Location
    São Paulo, Brazil
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    ----
    As coisas mais simples são as mais importantes.
    ---------
    Thompson M1A1: D-Day
    ----------------


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •