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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Apr 2006
    Posts
    133
    Thanks
    6
    Thanked 0 Times in 0 Posts

    How to add fields to the form

    Hi all,

    I have a form and there are three drop down menus (adults, children, infants) which has the values from 0 to 10. I want my javascript code add new text fields to the form when the drop down menu changes.
    For Example:
    Selected option is 0. When the client changes adults drop down to 2, children drop down to 1 and infants drop down to 1, I want the code add
    <input type="text" name="adult1" /><br>
    <input type="text" name="adult2" /><br>
    <input type="text" name="child1" /><br>
    <input type="text" name="inf1" /><br>
    to the HTML.

    Any idea how?

    Thanks
    Ceyhun

  • #2
    Senior Coder shyam's Avatar
    Join Date
    Jul 2005
    Posts
    1,563
    Thanks
    2
    Thanked 163 Times in 160 Posts
    there are plenty of examples littered around codingforums about this topic if u had spent some time searching through the archives...well, what the hell i'd time to kill...so, here goes
    Code:
    function $(v) {
    	return document.getElementById(v);
    }
    window.onload = function() {
    	$('adultCount').onchange = handleChange('adultCount', 'adultHolder', 'adult');
    	$('childrenCount').onchange = handleChange('childrenCount', 'childrenHolder', 'child');
    	$('infantCount').onchange = handleChange('infantCount', 'infantHolder', 'infant');
    }
    function handleChange(which, where, prefix) {
    	return function() {
    		var howMany = parseInt($(which).value);
    		if ( howMany > 0 ) {
    			var vals = [];
    			while ( $(where).firstChild ) {
    				var rem = $(where).removeChild($(where).firstChild);
    				if ( rem.nodeType == 1 && rem.nodeName == 'INPUT' && rem.name.indexOf(prefix) != -1 ) {
    					vals.push(rem.value);
    				}
    			}
    			console.log(vals);
    			for ( var i = 1; i <= howMany ; i++ ) {
    				var inp = document.createElement('input');
    				inp.setAttribute('type', 'text');
    				inp.setAttribute('name', prefix + i);
    				if ( i <= vals.length ) {
    					inp.setAttribute('value', vals[i-1]);
    				}
    				$(where).appendChild(inp);
    				$(where).appendChild(document.createElement('br'));
    			}
    		}
    	};
    }
    Code:
    <TABLE>
    <TR>
    	<TD>
    	  <SELECT id="adultCount">
    		<option value="0">0</option>
    		<option value="1">1</option>
    		<option value="2">2</option>
    		<option value="3">3</option>
    		<option value="4">4</option>
    		<option value="5">5</option>
    	  </SELECT>
    	</TD>
    	<TD>
    	  <SELECT id="childrenCount">
    		<option value="0">0</option>
    		...
    		<option value="5">5</option>
    	  </SELECT>
    	</TD>
    	<TD>
    	  <SELECT id="infantCount">
    		<option value="0">0</option>
    		...
    		<option value="5">5</option>
    	  </SELECT>
    	</TD>
    </TR>
    <TR>
    	<TD id="adultHolder"></TD>
    	<TD id="childrenHolder"></TD>
    	<TD id="infantHolder"></TD>
    </TR>
    </TABLE>
    You never have to change anything you got up in the middle of the night to write. -- Saul Bellow

  • #3
    Regular Coder
    Join Date
    Apr 2006
    Posts
    133
    Thanks
    6
    Thanked 0 Times in 0 Posts
    hi shyam,
    I am not very good in Javascript. But I have an error message of console undefined when I run this script.

  • #4
    Senior Coder shyam's Avatar
    Join Date
    Jul 2005
    Posts
    1,563
    Thanks
    2
    Thanked 163 Times in 160 Posts
    Quote Originally Posted by shyam View Post
    there are plenty of examples littered around codingforums about this topic if u had spent some time searching through the archives...well, what the hell i'd time to kill...so, here goes
    Code:
    function $(v) {
    	return document.getElementById(v);
    }
    window.onload = function() {
    	$('adultCount').onchange = handleChange('adultCount', 'adultHolder', 'adult');
    	$('childrenCount').onchange = handleChange('childrenCount', 'childrenHolder', 'child');
    	$('infantCount').onchange = handleChange('infantCount', 'infantHolder', 'infant');
    }
    function handleChange(which, where, prefix) {
    	return function() {
    		var howMany = parseInt($(which).value);
    		if ( howMany > 0 ) {
    			var vals = [];
    			while ( $(where).firstChild ) {
    				var rem = $(where).removeChild($(where).firstChild);
    				if ( rem.nodeType == 1 && rem.nodeName == 'INPUT' && rem.name.indexOf(prefix) != -1 ) {
    					vals.push(rem.value);
    				}
    			}
    			console.log(vals);
    			for ( var i = 1; i <= howMany ; i++ ) {
    				var inp = document.createElement('input');
    				inp.setAttribute('type', 'text');
    				inp.setAttribute('name', prefix + i);
    				if ( i <= vals.length ) {
    					inp.setAttribute('value', vals[i-1]);
    				}
    				$(where).appendChild(inp);
    				$(where).appendChild(document.createElement('br'));
    			}
    		}
    	};
    }
    Code:
    <TABLE>
    <TR>
    	<TD>
    	  <SELECT id="adultCount">
    		<option value="0">0</option>
    		<option value="1">1</option>
    		<option value="2">2</option>
    		<option value="3">3</option>
    		<option value="4">4</option>
    		<option value="5">5</option>
    	  </SELECT>
    	</TD>
    	<TD>
    	  <SELECT id="childrenCount">
    		<option value="0">0</option>
    		...
    		<option value="5">5</option>
    	  </SELECT>
    	</TD>
    	<TD>
    	  <SELECT id="infantCount">
    		<option value="0">0</option>
    		...
    		<option value="5">5</option>
    	  </SELECT>
    	</TD>
    </TR>
    <TR>
    	<TD id="adultHolder"></TD>
    	<TD id="childrenHolder"></TD>
    	<TD id="infantHolder"></TD>
    </TR>
    </TABLE>
    remove that
    You never have to change anything you got up in the middle of the night to write. -- Saul Bellow


  •  

    Posting Permissions

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