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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Script working in FF but not IE

    I am quite new to javascript and have created this function to show/hide rows of a html form on the page.

    It works fine in Firefox but doesn't work in IE.

    IE returns an error and it says there is an "object expected"

    this is the code, can anybody suggest a place to look for the error.

    Any help would be greatly appreciated. Thanks in advance

    The show hide buttons are as follows:
    Code:
    <tr><td colspan="3" align="right"><img id="removeRow" src="images/spacer.gif" width="14px" height="14px" alt="more" onclick="javascript:addDelRow('del')" /> <img id="addRow" src="images/expand.jpg" width="14px" height="14px" alt="more" onclick="javascript:addDelRow('add')" /></td></tr>
    The rows of the form are as follows:

    Code:
    </tr>        <tr  style="display:none;">        <th align="right">        <label for="seeker_category10" accesskey="10">Select job <u>c</u>ategory</label>:</th>        <td align="left"><select name="seeker_category10" id="seeker_category10" size="1"><option value="" selected="selected"> select </option><option value="1">Accountancy</option><option value="2">Legal</option><option value="3">Clerical</option><option value="4">Construction</option><option value="5">Medical</option><option value="7">Consultancy</option><option value="8">Transport</option></select></td>        <td></td>        </tr>
    and the javascript fundtion is:

    Code:
    function addDelRow(action){
    	
    	var changeArea = document.getElementById("seeker_categories");
    	var allInputs = changeArea.getElementsByTagName("select");
    	
    	//find number of input fields
    	var numRows = changeArea.getElementsByTagName('tr').length - 1;
    	var allRows = changeArea.getElementsByTagName('tr');
    	var addImg = document.getElementById('addRow');
    	var removeImg = document.getElementById('removeRow');
    	var numChanged = 0;
    	var n = 0; // number of rows
    	var d = 0; // 
    	
    	if (action == "add") {
    		for (i=1; i<=numRows; i++) {
    			if (allRows.item(i).style.display == 'none') {
    				//Current row is not displayed so display it if no rows have been changed yet
    				if (numChanged == 0) {
    					allRows.item(i).style.display = '';
    					numChanged++;
    				}
    			} else {
    				//increase number of displayed by 1
    				d++;	
    			}
    			n++;
    		}
    		
    		if (d >= n-1) {
    			addImg.src = 'images/spacer.gif';
    		}
    		
    		//if more than one row displayed show remove item image
    		if (d >= 1) {
    			removeImg.src = 'images/contract.jpg';	
    		}
    		
    	} else if (action == "del") {
    		
    		var nd = 0;
    		
    		for (i=1; i<=numRows; i++) {
    			if (allRows.item(i).style.display == '') {
    				d++;
    			} else {
    				nd ++;
    			}
    			
    		}
    		
    		// delete row if its not the first
    		if ((d > 1) && (d <= numRows)) {
    			allRows.item(d-1).style.display = "none";
    			//reset input field
    			allInputs.item(d-1).options[0].selected = true;		
    		}
    
    		// replace add image if less than maximum number of rows displayed
    		if (d-1 < numRows) {
    			addImg.src = 'images/expand.jpg';	
    		}
    		
    		if (d = 1) {
    			removeImg.src = 'images/spacer.gif';	
    		}
    		
    		
    	}
    	
    	//If no rows have been made visable they must all be visible
    	//so must make last one hidden
    
    	
    }

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    I'm not seeing any element having an id of seeker_categories (yet), which part of the markups is it placed?
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #3
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, the whole form is enclosed within the div tag with id="seeker_categories"

  • #4
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    I think IE needs the tbody tag to allow for dynamic rows.
    Code:
    <table>
     <tbody>
      <tr>
       <td></td>
      </tr>
     </tbody>
    </table>

  • #5
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I will try that when I get home but the whole form html is created in php with all but the first row set as style="display:none;".

    All this script does is change the diplay property of each row from 'none' to '' or vice versa.

    i,e if the function addDelRow('add') is called the next row will be unhidden and if addDelRow('del') is called the last row is set to syle="display:none;"

    Not sure if this makes it any clearer.

    Thanks for you help.

  • #6
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    My mistake - that's what I get for a quick glance at the problem. I saw addRow and deleteRow and didn't read past that. Not sure if the tbody will fix that problem or no.

  • #7
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi BadBen,

    A couple questions:

    Does it not work in both IE 6 and IE 7? Or only tested on one version?

    Does your generated HTML validate? If not IE will go into quirks mode, at which point it's behavior is a tad erratic.

    Last, a suggestion:

    Instead of trying to make the row display by setting display='', try setting a non-null value. Here is a list of possibilities with definitions: http://www.w3schools.com/css/pr_class_display.asp

    Cheers,

    MM


  •  

    Posting Permissions

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