www.webdeveloper.com
Results 1 to 5 of 5

Thread: How to fill multiple text fields from one text field.

  1. #1
    Join Date
    Feb 2012
    Posts
    1

    How to fill multiple text fields from one text field.

    I've been searching the internet for a while and can't find any conclusive ways to do this. I'm new to javascript however I have coding experience in java, c, perl, etc... I need a script that will allow you to type in one text field, say the header of a table of fields, and autofill those fields with whatever is typed into the header. Also the amount of fields to be filled is dynamically chosen on the page before, so the script must be able to fill varying numbers of fields depending on what the user chose on the previous page. To clarify, there is a table generated with birthday eartag cage comment and under those headers are multiple fields that all need to be filled with the same information in each column. Any help appreciated as the script I started to write isn't very good and is not working.

  2. #2
    Join Date
    Feb 2012
    Posts
    218
    HTML Code:
    <input type="text" id="headerInput" />
    
    <input type="text" class="autofill" />
    <input type="text" class="autofill" />
    <input type="text" class="autofill" />
    <input type="text" class="autofill" />
    <input type="text" class="autofill" />
    <input type="text" class="autofill" />
    
    <script type="text/javascript">
    	inputs = document.getElementsByClassName('autofill');
    	document.getElementById('headerInput').onkeyup = function(){
    		for(var i=0; i<inputs.length; i++){
    			inputs[i].value = this.value;
    		}
    	}
    </script>

  3. #3
    Join Date
    May 2012
    Posts
    2

    thank you, but how to make it work in ie8?

    thank you #hyperionXS,
    i'm using your code and it's a great solution
    but i can't make it work in ie8
    any suggestion?

    thank you
    nico

  4. #4
    Join Date
    Nov 2010
    Posts
    1,085
    you are right - IE8 (and below) does not support getElementsByClassName. Her is a cross-browser alternative:

    Code:
    <script type="text/javascript">
    	inputs = document.getElementsByTagName('input');
    	document.getElementById('headerInput').onkeyup = function(){
    		for(var i=0; i<inputs.length; i++){
    		if(inputs[i].className=="autofill"){
    			inputs[i].value = this.value;
    			}
    		}
    	}
    </script>

  5. #5
    Join Date
    May 2012
    Posts
    2

    thank you!

    thank you!

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