#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    150
    Rep Power
    3

    Question Textarea data is truncated on a "review" page using this JS?


    Hi all,

    I've got a page where the user enters data into a textarea, and then submits that (and other input) to a "review" page.

    If I enter this in the initial page textarea:
    Testing, line 1.
    Testing, line 2.
    Testing, line 3.
    I'm getting this on the review page:
    Testing, line 1.
    Te
    If I enter this:
    Line one.
    Line two.
    Line three.
    I'm getting this on the review page:
    Line one.
    Line two.
    Line three is not being echo'd (I'm using PHP) at all in the textarea on the review page, and some of line two is missing in one case. By the looks of this, it's only allowing 18 characters and 1 newline. Note: If I view the page source of the review page, I can see that all the data is there that I would expect (i.e. nothing is truncated/missing).

    The code:

    Initial page:
    Code:
    <textarea name="txtArea" cols="60" rows="7" id="maxcharfield" onKeyDown="textAreaCounter(this,'add_txt_progressbar1',250)" onKeyUp="textAreaCounter(this,'add_txt_progressbar1',250)" onFocus="textAreaCounter(this,'add_txt_progressbar1',250)"></textarea>
      <i>Limit 250 characters.</i><br>
      <div id="add_txt_progressbar1" class="progressBar"></div>
      <script>textAreaCounter(document.getElementById("maxcharfield"),"add_txt_progressbar1",20)</script>
    Review page:
    Code:
      <u>Additional Information</u> <br><textarea name="txtArea" cols="60" rows="7" id="maxcharfield" onKeyDown="textAreaCounter(this,'add_txt_progressbar1',250)" onKeyUp="textAreaCounter(this,'add_txt_progressbar1',250)" onFocus="textAreaCounter(this,'add_txt_progressbar1',250)"><? echo $txtArea; ?></textarea>
      <i>Limit 250 characters.</i><br>
      <div id="add_txt_progressbar1" class="progressBar"></div>
      <script>textAreaCounter(document.getElementById("maxcharfield"),"add_txt_progressbar1",20)</script>
    The Javascript
    Code:
    function textAreaCounter(field,counter,maxlimit,linecounter) {
    	// text width//
    	var fieldWidth =  parseInt(field.offsetWidth);
    	var charcnt = field.value.length;        
    
    	// trim the extra text
    	if (charcnt > maxlimit) { 
    		field.value = field.value.substring(0, maxlimit);
    	}
    
    	else { 
    	// progress bar percentage
    	var percentage = parseInt(100 - (( maxlimit - charcnt) * 100)/maxlimit) ;
    	document.getElementById(counter).style.width =  parseInt((fieldWidth*percentage)/100)+"px";
    	document.getElementById(counter).innerHTML=percentage+"%"
    	// color correction on style from CCFFF -> CC0000
    	setcolor(document.getElementById(counter),percentage,"background-color");
    	}
    }
    
    function setcolor(obj,percentage,prop){
    	obj.style[prop] = "rgb(80%,"+(100-percentage)+"%,"+(100-percentage)+"%)";
    }
    The js works as expected on the intial page, limiting input to 250 characters with the progress bar, etc.

    It just not allowing more that those 18 characters (& 1 newline) to show up in the textarea on the review page.

    Ideas on why data is there on the page (view source), but not actually being displayed in the textarea? Basically, the same exact js code allows the (expected) 250 characters on the first page but only allows 18 (19) on the preview?

    Thanks.

    P.S. I initially thought this might be an issue with PHP, and my initial post about this was over in those threads here:

    However, when I remove this Javascript, the textarea on the review page echo's out the data as expected...nothing is truncated from view.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    150
    Rep Power
    3

    Talking


    Of course it had to be something pretty simple.

    Was:
    Code:
     <script>textAreaCounter(document.getElementById("maxcharfield"),"add_txt_progressbar1",20)</script>
    Modified:
    Code:
     <script>textAreaCounter(document.getElementById("maxcharfield"),"add_txt_progressbar1",250)</script>
    It works now.

IMN logo majestic logo threadwatch logo seochat tools logo