SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot basbd's Avatar
    Join Date
    Oct 2005
    Location
    Oregon, USA
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE not finding Textarea value

    I'm having a hell of a time trying to figure out this problem. I'm using js to validate a form, using an array of the name of inputs needing validation and what type of validation. When a user submits the form, the checkForm function is called, as in the following script:

    HTML Code:
    <script type="text/javascript">
    var validate = new Array(
    	new Array('input1', 'Input 1', 'checkEmpty'),
    	new Array('input2', 'Input 2', 'checkEmpty'),
    	new Array('select1', 'Select 1', 'checkSelect'),
    	new Array('textarea1', 'Textarea 1', 'checkEmpty'));
    
    function checkForm(){
    	for(i=0; i<validate.length; i++){
    
    		//Get element value
    		if(validate[i][2] == "checkSelect")
    			element_value = document.getElementById(validate[i][0]).selectedIndex;
    		else
    			element_value = document.getElementById(validate[i][0]).value;
    
    		//Check element_value to make sure it's valid
    	}
    	//if elements not valid return errors 
    	//else submit form
    }
    </script>
    <form>
    <input type="text" id="input1" name="input1">
    <input type="text" id="input2" name="input2">
    <select name="select1" id="select2">
    	<option>Select One</option>
    	<option value=1>1</option>
    </select>
    <textarea name="textarea1" id="textarea2"></textarea>
    <input type="button" onClick="checkForm">
    </form>
    Now this works just fine in firefox, opera, et. al. But in Internet Explorer, it can never get the value of the textarea. When I alert the value, it returns "undefined" no matter if it's empty or has a value. I know Internet Explorer can get the value of a textbox using the elements value. Take the following code:

    HTML Code:
    <textarea id="test">This is a Test</textarea>
    <script type="text/javascript">
    alert(document.getElementById("test").value);
    </script>
    It returns "This is a Test" (or whatever the value of the textarea is) in IE. Does Internet Explorer have a problem with variable id values for textareas? (if so, why???) I can't for the life of me figure out what problem IE has with this script?

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    These IDs and names don't match. I'm surprised that it would work in FF and Opera but not IE. I would have thought it would be the other way around.
    Code:
    <select name="select1" id="select2">
    ...
    <textarea name="textarea1" id="textarea2"></textarea>
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm also surprised this works in anything

    onClick="checkForm"

    should be

    onClick="checkForm()"

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,826
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    In Javascript () is optional when there are no parameters to be passed.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall
    In Javascript () is optional when there are no parameters to be passed.
    I think you might be mixing up function assignment with function call, try this:

    Code:
    <script type="text/javascript">
    
    function checkForm(){
    alert('checkForm()')
    }
    
    </script>
    <input type="button" onClick="checkForm()" value="checkForm()">
    <input type="button" onClick="checkForm" value="checkForm">

  6. #6
    SitePoint Zealot basbd's Avatar
    Join Date
    Oct 2005
    Location
    Oregon, USA
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the responses. I should of double checked my sample code before posting . I didn't want to copy/paste my code straight from my server (100+ lines of js/html = no good for forums). In the actual code, the ids are correct and checkForm is checkForm(). So the revised code is this:

    HTML Code:
    <script type="text/javascript"> 
    var validate = new Array( 
    	new Array('input1', 'Input 1', 'checkEmpty'), 
    	new Array('input2', 'Input 2', 'checkEmpty'), 
    	new Array('select1', 'Select 1', 'checkSelect'), 
    	new Array('textarea1', 'Textarea 1', 'checkEmpty')); 
    
    function checkForm(){ 
    	for(i=0; i<validate.length; i++){ 
    		//Get element value 
    		if(validate[i][2] == "checkSelect") 
    			element_value = document.getElementById(validate[i][0]).selectedIndex; 
    		else 
    			element_value = document.getElementById(validate[i][0]).value; 
    			
    		//Check element_value to make sure it's valid 
    	} 
    	
    	//if elements not valid return errors 
    	//else submit form 
    } 
    </script> 
    <form> 
    <input type="text" id="input1" name="input1"> 
    <input type="text" id="input2" name="input2"> 
    <select name="select1" id="select2">  
    	<option>Select One</option>  
    	<option value=1>1</option> 
    </select> 
    <textarea name="textarea1" id="textarea1"></textarea> 
    <input type="button" onClick="checkForm()"> 
    </form>
    Any ideas?

  7. #7
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As Kravvitz stated, the select name and id don't match. I don't think the IE problem is in this code.

    Code:
    <script type="text/javascript"> 
    var validate = new Array( 
    	new Array('input1', 'Input 1', 'checkEmpty'), 
    	new Array('input2', 'Input 2', 'checkEmpty'), 
    	new Array('select1', 'Select 1', 'checkSelect'), 
    	new Array('textarea1', 'Textarea 1', 'checkEmpty')); 
    
    function checkForm(){ 
    	for(i=0; i<validate.length; i++){ 
    		//Get element value 
    		if(validate[i][2] == "checkSelect") 
    			element_value = document.getElementById(validate[i][0]).selectedIndex; 
    		else 
    			element_value = document.getElementById(validate[i][0]).value; 
    alert(validate[i][0]+'\n\n'+(element_value?element_value:'no value entered'));			
    		//Check element_value to make sure it's valid 
    	} 
    	
    	//if elements not valid return errors 
    	//else submit form 
    } 
    
    </script> 
    <form> 
    <input type="text" id="input1" name="input1"> 
    <input type="text" id="input2" name="input2"> 
    <select name="select1" id="select1">  
    	<option>Select One</option>  
    	<option value=1>1</option> 
    </select> 
    <textarea name="textarea1" id="textarea1"></textarea> 
    <input type="button" onClick="checkForm()"> 
    </form>

  8. #8
    SitePoint Zealot basbd's Avatar
    Join Date
    Oct 2005
    Location
    Oregon, USA
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I figured out the problem. I was wrapping my sample code in a main template, which included Meta tags for keywords and descriptions. Unbeknownst to me, Internet Explorer has some trouble with getElementByID, sometimes using an elements name for the ID. So what it was doing was trying to find the value of this meta tag I had in the head:

    HTML Code:
    <meta name="Description" content="This is the site description">
    Which it doesn't have one, thus the "undefinied" value.

    I set up two example scripts to show this,

    one with a Meta description tag:
    http://rankthenet.com/form_test_meta.html

    and one without a Meta description tag:
    http://rankthenet.com/form_test.html

    Try this in Internet Explorer, and notice how it gets the unnecessary value attribute in the Meta tag that I added when evaluating the following:

    HTML Code:
    document.getElementById("description").value
    Very strange, but at least I know the problem now, and the solution: never name an element "description" when you have a description Meta tag .

    Thank you all for your help. Sorry again for my constant spelling errors

    --Jon

  9. #9
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is an easy way to get around that problem.

    Code:
    document.getElementsByTagName('body')[0].getElementById('description').value
    Of course you could use another element, like the form, but body will always work.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


Bookmarks

Posting Permissions

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