www.webdeveloper.com
Results 1 to 14 of 14

Thread: textarea clear right before submit saves information outside of tag

  1. #1
    Join Date
    Sep 2012
    Location
    Toronto
    Posts
    16

    textarea clear right before submit saves information outside of tag

    Hey, I have a weird problem, the task I'm trying to accomplish is to clear a textarea tag right before submitting form. I can see that the text inside the tag disappears, however, upon submit to the (Spring) controller, the parameter contains value that looks to be equivalent to n number of characters from the html right after the text area tag, some of the input is garbage, some is understandable. I've tried searching the web, but couldn't find any hits with similar description, maybe someone can shed some light on what I'm missing.

    I've tried accessing the textarea through both id and name
    I've tried setting the value and innerHTML attributes to empty
    I've tried clearing different textareas on the form, and multiple at the same time

    All of the above led to the same result.

    One experiment where I got some headway is while trying to see the actual values of the textareas right before the submit I noticed that if there is an alert statement sitting right before the .submit() function the value gets properly cleared and the request parameter does not contain any data. It almost seems as if there is some time required to clear out the information, or the text is marked somehow in memory and does not get cleared until some user action occurs.







    Here are some code snippets:

    textarea definition:

    Code:
    <table>
    
    <tr>
    <td>
    <textarea id="confirmingBank" name="confirmingBank" rows="4" cols="35" maxLength="140" size="35" wrap="hard" style="overflow-y:scroll" onblur="javascript:trimTrailingCharacters(this);forceMaxLength(this);" onkeyup="javascript:forceMaxLength(this);">123456789012345678901234567890</textarea>
    </td>
    </tr> <tr>
    <td>
    <span id="confirmingBank_span">15/140 of maximum length is used</span>
    </td>
    </tr>
    </table>


    Submit function (the part right before emptying the field loops over all elements in first form and makes sure they are not disabled so that the property properly exists in request)



    Code:
      for ( i=0; i < document.forms[0].elements.length; i++ ) {
        document.forms[0].elements[i].disabled = false;
      }
    document.forms[0].elements['confirmingBank'].value = '';
     document.FormName.submit();






    And for test case I would enter:

    "123456789012345"

    And the result would be:

    "żżżżżż30/140 of maximum length"


    Any insight would be greatly appreciated.

  2. #2
    Join Date
    Sep 2012
    Location
    Toronto
    Posts
    16
    Small mistake, for test case should be:

    "123456789012345678901234567890"

  3. #3
    Join Date
    Sep 2012
    Location
    Toronto
    Posts
    16
    Havent figured out how to edit my own posts yet, here is a little more readable version of the first code snippet with a small mistake correction:


    Code:
    <table>
     <tr>
      <td>
       <textarea id="confirmingBank" name="confirmingBank" rows="4" cols="35" maxLength="140" size="35" wrap="hard" 
        style="overflow-y:scroll" onblur="javascript:trimTrailingCharacters(this);forceMaxLength(this);" onkeyup="javascript:forceMaxLength(this);">
            123456789012345678901234567890
        </textarea>
      </td>
      </tr>
     <tr>
      <td>
       <span id="confirmingBank_span">30/140 of maximum length is used</span>
      </td>
     </tr>
    </table>

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,415
    We don't know what your "trimTrailingCharacters()" or "forceMaxLength()" functions are doing since they are not included.

    Also, you probably don't need the javascript: syntax when calling the functions during the onblur() or onkeyup() functions.

  5. #5
    Join Date
    Sep 2012
    Location
    Toronto
    Posts
    16
    My bad, I did further tests today, and that's what I found out:

    textarea definition is shrunk to this:

    Code:
    <textarea id="confirmingBank" name="confirmingBank" rows="4" cols="35" maxLength="140" size="35" wrap="hard" ></textarea>

    When I remove the
    Code:
    wrap="hard"
    portion the textarea clears properly, however with the wrap the overflow garbage characters are submitted...

  6. #6
    Join Date
    Sep 2012
    Location
    Toronto
    Posts
    16
    mistake in previous post, removed the properties that were left over from custom tag, did tests with this as well, same results. will do some search specifically on wrap="hard" effect...

    <textarea id="confirmingBank" name="confirmingBank" rows="4" cols="35" wrap="hard" ></textarea>

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,415
    My guess ...
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <script type="text/javascript">
    String.prototype.trimTrailing = function() {
        return(this.replace(/\s+$/,''));
    }
    String.prototype.forceMaxLength = function(maxL) {
      var tmp = this;
      if (tmp.length > (maxL*1)) { tmp=tmp.substring(0,maxL*1); }
      TAreaSize(tmp,maxL); 
      return tmp;
    }
    function TAreaSize(Tarea,maxL) {
      document.getElementById('confirmingBank_span').innerHTML
        = Tarea.length+'/'+maxL+ ' of maximum length is used';
    }
    window.onload = function() {
      var tmp = document.getElementById('confirmingBank');
      tmp.value = tmp.value.forceMaxLength('140');
    }
    </script>
    
    </head>
    <body>
    <table>
     <tr>
      <td>
        <textarea id="confirmingBank" name="confirmingBank" rows="4" cols="35" wrap="hard"
         onkeyup="this.value=this.value.forceMaxLength('140')"
         onblur="this.value=this.value.trimTrailing();this.value=this.value.forceMaxLength('140')">
            123456789012345678901234567890
        </textarea> 
      </td>
      </tr>
     <tr>
      <td>
       <span id="confirmingBank_span"></span>
      </td>
     </tr>
    </table>
    </body>
    </html>

  8. #8
    Join Date
    Sep 2012
    Location
    Toronto
    Posts
    16
    You are correct in assuming the intended functionality of the functions, however, they are out of scope of this problem. I got rid of them altogether and shrunk the code down to this (I removed all of the other dynamic content and this is the exact html source of the generated page out of jsp):
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    
    <script language="JavaScript"><!--
    
    function submitForm(comd) {
      document.FormName.elements['Submit_Button'].value = comd;
    document.getElementById('confirmingBank').value = '';
    document.FormName.submit();
    }
    
    
    //--></script>
    
    
    
    
    <html>
    
    	<head>
    		<title>@GT Export - LC Form
    		</title>
    	</head>
    
    	<body>
    
    
    		<form id="lcfApplication" name="FormName" action="/devcon/exportlcforminfo.gtc" method="post">
    			<input type="hidden" name="Submit_Button">
    
    
    			<table>
    
    
    				<tr>
    					<td>
    						<table>
    							<tr>
    								<td width="1%">
    									
    									<textarea name="confirmingBank" id="confirmingBank" cols="35"
    										rows="4" wrap="hard"> </textarea>
    								</td>
    								<td width="99%">
    								</td>
    							</tr>
    						</table>
    					</td>
    				</tr>
    			</table>
    			<input type="button" name="Save" value="Save"
    				onClick="submitForm('FU30021E')" border="0">
    		</form>
    
    	</body>
    </html>

    As before, when I remove wrap="hard" portion the underlying spring controller recieves parameter with empty string, and with wrap="hard" present the parameter is full of garbage.

    At this point I am not entirely sure if it is even a javascript question anymore.

  9. #9
    Join Date
    Sep 2012
    Location
    Toronto
    Posts
    16
    Just did tests in other browsers, and the problem appears only in IE9, both Mozilla and Chrome are immune.

  10. #10
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,415

    Exclamation

    Quote Originally Posted by N1tr0gen View Post
    You are correct in assuming the intended functionality of the functions, however, they are out of scope of this problem. I got rid of them altogether and shrunk the code down to this (I removed all of the other dynamic content and this is the exact html source of the generated page out of jsp):
    ...

    At this point I am not entirely sure if it is even a javascript question anymore.
    Well, I guess just ignore my input. It was a guess because you had not provided much code with which to help.
    Now having seen the rest how you were approaching the problem and your folllow-up post,
    I'm inclined to agree with you that it is not a JS problem. More likely a browser incompatibility.

    MSIE is kind of picky with the <!doctype ...> tag information. You might try various versions of this
    with perhaps 'strick' or 'transitional' settings.

    Also, the use of 'language=Javascript' and the <!-- //--> tags is somewhat archaic.
    First should be <script type="text/javascript">
    and the latter should be deleted entirely with modern browsers.
    Last edited by JMRKER; 09-11-2012 at 04:59 PM.

  11. #11
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    weird. try removing it and adding a new blank element. i would think that's gotsta work...


    var elm=document.getElementById('confirmingBank');
    elm.value = '';
    var newElm=document.createElement("input");
    elm.parentNode.insertBefore(newElm, elm);
    elm.parentNode.removeChild(elm);
    newElm.name=elm.name;

  12. #12
    Join Date
    Sep 2012
    Location
    Toronto
    Posts
    16
    Yep, I'm dealing with huge codebase and cleaning things out a step at a time . Thanks for input, I'll post an answer or more findings when I get back to this issue.

  13. #13
    Join Date
    Sep 2012
    Location
    Toronto
    Posts
    16
    Quote Originally Posted by rnd me View Post
    weird. try removing it and adding a new blank element. i would think that's gotsta work...


    var elm=document.getElementById('confirmingBank');
    elm.value = '';
    var newElm=document.createElement("input");
    elm.parentNode.insertBefore(newElm, elm);
    elm.parentNode.removeChild(elm);
    newElm.name=elm.name;
    That might work, but it is a rather messy workaround which I would like to avoid. I'll give it a shot just out of curiosity tomorrow anyway.

  14. #14
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    if i only had a nickel for every time IE and "rather messy workaround which I would like to avoid" were seen together...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles