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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post

    how to count number of <br> in innerHTML/ click addmore clear content of other fields

    I wish to know how I can count how many lines there are by searching the innerHTML of a div

    can anyone suggest how this can be done?

    also when the new line is added in my code it clears the content of all the existing fields if there was anything in them before the add link was clicked


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript"><!--
    function addmore() {
    	// count existing boxes to find out next number to use.
    	// ?
    	
    	document.getElementById('namesdiv').innerHTML += '<textarea name="name_added" cols="30" rows="2"></textarea><br>';
    	document.getElementById('addressesdiv').innerHTML += '<textarea name="address_added" cols="30" rows="2"></textarea><br>';
    	document.getElementById('mobilesdiv').innerHTML += '<textarea name="mobile_added" cols="30" rows="2"></textarea><br>';
    	}
    --></script>
    </head>
    
    <body>
    <form>
    <div style="width: 850px;">
    	<div id="namesdiv" style="float: left; padding-right: 10px;">Client's Names<br>
    		<textarea name="name1" cols="30" rows="2"></textarea><br>
    		<textarea name="name2" cols="30" rows="2"></textarea><br>
    		<textarea name="name3" cols="30" rows="2"></textarea><br>
    		<textarea name="name4" cols="30" rows="2"></textarea><br>
    		<textarea name="name5" cols="30" rows="2"></textarea><br>
    	</div>
    	<div id="addressesdiv" style="float: left; padding-right: 10px;">Client's Addresses<br>
    		<textarea name="address1" cols="30" rows="2"></textarea><br>
    		<textarea name="address2" cols="30" rows="2"></textarea><br>
    		<textarea name="address3" cols="30" rows="2"></textarea><br>
    		<textarea name="address4" cols="30" rows="2"></textarea><br>
    		<textarea name="address5" cols="30" rows="2"></textarea><br>
    	</div>
    	<div id="mobilesdiv" style="float: left;">Client's Mobile numbers<br>
    		<textarea name="mobile1" cols="30" rows="2"></textarea><br>
    		<textarea name="mobile2" cols="30" rows="2"></textarea><br>
    		<textarea name="mobile3" cols="30" rows="2"></textarea><br>
    		<textarea name="mobile4" cols="30" rows="2"></textarea><br>
    		<textarea name="mobile5" cols="30" rows="2"></textarea><br>
    	</div>
    </div>
    <br style="clear: both;">
    <a href="" onClick="javascript:addmore(); return false;" >Add more</a>
    </form>
    
    </body>
    </html>
    Last edited by jasonpc1; 09-04-2010 at 11:39 PM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,920
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    You can only count the number of line breaks entered by the user (and there may or may not be one or more newlines entered by the user after the final text line). You can't count the lines caused by wrapping.

    Convert all the newline in the textarea to the HTML line breaks (<br>). Split the text in an array with <br> and then take the length of the array.


    Code:
    <textarea id = "txt1" rows = "10" cols = "50">Lorem ipsum dolor sit amet, consectetur.
    Etiam ipsum leo, scelerisque at dapibus ac,
    consectetur vel ipsum. 
    Morbi et metus
    ut diam molestie ullamcorper semper
    semper. Donec volutpat neque in lorem tempus
    scelerisque. Curabitur dignissim rhoncus 
    Nullam nec sapien arcu, eget cursus lorem.
    </textarea><br>
    <input type = "button" value = "How many lines?" onclick = "countLines()">
    <input type = "text" id = "result">
    
    <script type = "text/javascript">
    function countLines() {
    var x = document.getElementById("txt1").value;
    var xArray = [];
    x = x.replace(/\n/g,"<br>");
    var xArray = x.split("<br>");
    var len = xArray.length-1;
    document.getElementById("result").value = len;
    }
    </script>

    Quizmaster: In America, what liquid normally comes out of a faucet?
    Contestant: Cheese.
    Last edited by Philip M; 09-05-2010 at 11:24 AM.


  •  

    Posting Permissions

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