www.webdeveloper.com
Results 1 to 14 of 14

Thread: [RESOLVED] Fill Down Textbox Values

  1. #1
    Join Date
    Oct 2010
    Posts
    45

    resolved [RESOLVED] Fill Down Textbox Values

    Fang helped me out a lot by showing me a simple slick fill down script but I'm having trouble implementing it in to the MooGrid I'm using to display the data.

    The error message I get is "aObj[down[col]] is undefined" and I believe the error comes from the script not finding the correct table and column to work with. I'm new to DOM tree navigation and wondered if someone could give me a hand.

    The page I'm building is located here:
    http://bftrs2.mainvista.com/test/test.html

    And the external js file that builds the grid is here:
    http://bftrs2.mainvista.com/test/jav..._compressed.js

    I appreciate your taking the time to look at it!

  2. #2
    Join Date
    Oct 2010
    Posts
    45
    Looking over the code further I find that the dynamic table isn't a table, but a series of DIVs to display the data in a grid (that's how they get the fixed columns/rows and the double scrolling going so well).


    So now my question is how to fill down the value of the last inputted textbox in a column of divs? My example has dynamic number of divs to make the columns/rows.

  3. #3
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    /*  Fill Down */
    window.onload=function() {
    var aObj = document.getElementsByTagName('input');
    var i = aObj.length; 
    while(i--) { 
        if(aObj[i].type=='text') {
            aObj[i].onchange = function() {lastChoice(this.name);};
            }
        else {
            aObj[i].onclick = function() {fillDown(this);};
            }
        }
    };
    
    function lastChoice(ref) {
    var needle = /grade(\d+)_(\d+)$/i;
    ref.match(needle);
    down[(RegExp.$2)] = RegExp.$1;
    }	
    
    var down = [];
    function fillDown(obj) {
    // button column
    var aObj = document.getElementsByName('copy');
    var len = aObj.length; 
    for(var i=0; i<len; i++) {
    if(aObj[i]==obj) {
        var col = i;
        break;
        }
    }
    // fill
    var aObj = document.getElementsByTagName('input');
    var len = aObj.length; 
    var idx = down[col];
    var lastName = 'grade'+idx+'_'+col;
    var val = document.getElementsByName(lastName)[0].value;
    for(var i=0, count=0; i<len; i++) {
        if(aObj[i].name==lastName) {
            aObj[i].value = val;
            lastName = 'grade'+(++idx)+'_'+col; 
            }
        }
    }
    /* End Fill Down */

  4. #4
    Join Date
    Oct 2010
    Posts
    45

    Not working in IE?

    This is brilliant! Thanks!

    Upon putting the script on my page it worked first try in FF with no errors; however, it's not working in IE8 and I'm not getting an error code to give me a clue where to look.

    I'll do a little research and see if I can figure out the problem but I'd love some ideas of where to start.

    Again, brilliant script, thanks!

  5. #5
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    It's the order of loading.
    Change the window.onload=function() to:
    Code:
    /*  Fill Down */
    function initFillDown() {
    var aObj = document.getElementsByTagName('input');
    var i = aObj.length; 
    while(i--) { 
        if(aObj[i].type=='text') {
            aObj[i].onchange = function() {lastChoice(this.name);};
            }
        else {
            aObj[i].onclick = function() {fillDown(this);};
            }
        }
    }
    and
    Code:
    		window.addEvent("domready", function(event) {
    			var myGrid = new MooGrid("demoDiv", {
    				allowGridResize : true, 
    				allowColumnResize : true, 
    				allowSelections : true, 
    				allowMultipleSelections : true, 
    				fixedCols : 7, 
    				srcType : "json_local", 
    				// xml_remote : "data_v2.xml", 
    				// xml_local : $("srcXml").value, 
    				// json_remote : "data_json_v2.txt", 
    				json_local : jsonData
    			});
    		initFillDown();
    		});

  6. #6
    Join Date
    Oct 2010
    Posts
    45
    Thanks for saving me a few hours of debugging!

    Really nice code, simple and even someone who is not that good at JavaScript can read it and understand it!

    =D

  7. #7
    Join Date
    Oct 2010
    Posts
    45
    With more testing I find it won't work with a 0 as a value but does work well with other odd things like 10.4

  8. #8
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    works OK in my test document. Have you changed the default values of the inputs?
    Try with onblur
    Code:
    function initFillDown() {
    var aObj = document.getElementsByTagName('input');
    var i = aObj.length; 
    while(i--) { 
        if(aObj[i].type=='text') {
            aObj[i].onblur = function() {lastChoice(this.name);};
            }
        else {
            aObj[i].onclick = function() {fillDown(this);};
            }
        }
    }

  9. #9
    Join Date
    Oct 2010
    Posts
    45
    That fixed it! I switched onchange to onblur and now it accepts 0 as a value.

    Many thanks!

  10. #10
    Join Date
    Oct 2010
    Posts
    45
    One more question Fang....if I wanted to use the id (which are the same as the name) rather than the name would I simply change:

    Code:
    /*  Fill Down */
    	function initFillDown() {
    	var aObj = document.getElementsByTagName('input');
    	var i = aObj.length; 
    	while(i--) { 
    	    if(aObj[i].type=='text') {
    		aObj[i].onblur = function() {lastChoice(this.id);};
    		}
    	    else {
    		aObj[i].onclick = function() {fillDown(this);};
    		}
    	    }
    	};
    	
    	function lastChoice(ref) {
    	var needle = /grade(\d+)_(\d+)$/i;
    	ref.match(needle);
    	down[(RegExp.$2)] = RegExp.$1;
    	}	
    	
    	var down = [];
    	function fillDown(obj) {
    	// button column
    	var aObj = document.getElementsByName('copy');
    	var len = aObj.length; 
    	for(var i=0; i<len; i++) {
    	if(aObj[i]==obj) {
    	    var col = i;
    	    break;
    	    }
    	}
    	// fill
    	var aObj = document.getElementsByTagName('input');
    	var len = aObj.length; 
    	var idx = down[col];
    	var lastName = 'grade'+idx+'_'+col;
    	var val = document.getElementById(lastName)[0].value;
    	for(var i=0, count=0; i<len; i++) {
    	    if(aObj[i].id==lastName) {
    		aObj[i].value = val;
    		lastName = 'grade'+(++idx)+'_'+col; 
    		}
    	    }
    	}
    	/* End Fill Down */
    When I tried this initially I was getting the error getElementById(lastName)[0] is undefined.

  11. #11
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Why add id when name is already unique?
    It probably won't work as the reference, in this case, to this returns the name and not an object reference.

  12. #12
    Join Date
    Oct 2010
    Posts
    45
    I wanted to switch to id because I already have some php written that uses a different name that I'd like to use with it. I can see if I can change the name referenced in the php to match what is used here. Thanks!

  13. #13
    Join Date
    Oct 2010
    Posts
    45
    For those that may be interested, here's the code changed to handle the id attribute instead of the name attribute. It's running good now:

    Code:
    /*  Fill Down */
    	function initFillDown() {
    		var aObj = document.getElementsByTagName('input');
    		var i = aObj.length; 
    		while(i--) { 
    			if(aObj[i].type=='text') {   // onchange to onblur (some instances onchange wasn't allowing a 0 as a value)
    			    aObj[i].onblur = function() {lastChoice(this.id);};  // changed this.name to this.id
    			} else {
    			    aObj[i].onclick = function() {fillDown(this);};
    			}
    		}
    	};
    	
    	function lastChoice(ref) {
    		var needle = /points(\d+)_(\d+)$/i;
    		ref.match(needle);
    		down[(RegExp.$2)] = RegExp.$1;
    	}	
    	
    	var down = [];
    	function fillDown(obj) {
    		// button column
    		var aObj = document.getElementsByName('copy');
    		var len = aObj.length; 
    		for(var i=0; i<len; i++) {
    			if(aObj[i]==obj) {
    			    var col = i;
    			    break;
    			}
    		}
    		// fill
    		var aObj = document.getElementsByTagName('input');
    		var len = aObj.length; 
    		var idx = down[col];
    		var lastName = 'points'+idx+'_'+col;
    		var val = document.getElementById(lastName).value;  // changed document.getElementsByName[0] to document.getElementsById
    		for(var i=0, count=0; i<len; i++) {
    			if(aObj[i].id==lastName) {   // changed aObj[i].name to aObj[i].id
    			    aObj[i].value = val;
    			    lastName = 'points'+(++idx)+'_'+col; 
    			}
    		}
    	}
    	/* End Fill Down */

  14. #14
    Join Date
    Oct 2010
    Posts
    45
    Oh, I almost forgot, a big THANK YOU for your help. I wouldn't have been able to write this script from scratch so I really appreciate you're taking the time to work with me. I'm starting to understand a little better JavaScript and jquery, but I have a super long way to go =)

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