SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2004
    Location
    Dublin
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How to hide and unhide fields in a form?

    I want to create a form where the value chosen by the user from a dropdown menu causes a cetain number of text fileds to appear.

    For example, if the user selects number '3' from the dropdown menu then 3 text fields should appear in the form. (without reload)

    I guess I can output all of the textboxes and use JavaScript to hide the ones not being used.

    How can I do this?

  2. #2
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    Finland
    Posts
    703
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The layout of your form is very, very important to know in this particular case. Well, I don't know it, so here's a very basic example. I hope it helps.
    Code:
    <script language="JavaScript" type="text/javascript">
    	function makeBoxes(howMany) {
    		var container = document.getElementById("txtboxes");
    		var existingFields = container.getElementsByTagName("INPUT");
    		var size = existingFields.length; // current amount of fields
    		if (howMany < size) { // need to remove fields
    			for (var i = (size - 1); i >= howMany; --i) { // start from the last field and remove all fields until howMany is reached.
    				existingFields[i].parentNode.removeChild(existingFields[i]); // remove field
    			}
    		}
    		else if (howMany > size) { // need to add fields
    			var field;
    			for (var i = size; i < howMany; ++i) { // start from the current amount of fields, stop when howMany reached
    				field = document.createElement("INPUT"); // create field
    				field.type = "text";
    				field.id = field.name = "txtbox_" + i;
    				container.appendChild(field); // add field
    			}
    		}
    	}
    </script>
    
    <style type="text/css">
    #txtboxes input {
    	display: block;
    	border: dotted 1px black;
    	margin: 2px;
    	font-size: 8pt;
    }
    </style>
    
    <select onchange="if (this.selectedIndex != 0) { makeBoxes(this.options[this.selectedIndex].value); }">
    	<option>-- Select --</option>
    	<option value="1">1</option>
    	<option value="2">2</option>
    	<option value="3">3</option>
    	<option value="4">4</option>
    	<option value="20">20</option>
    </select>
    
    <div id="txtboxes"></div>

  3. #3
    SitePoint Wizard
    Join Date
    Mar 2004
    Posts
    1,647
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    var arrFields = new Array()
    function createFields() {
    var fieldForm, fieldNum;
    fieldForm = document.getElementById("myForm");
    fieldNum = document.myForm.mySelect.value;
    for(i = 0; i < FieldNum; i++) {
    arrFields[i] = createElement("input");
    arrFields[i].setAttribute("id", "myId" + i);
    // set other attributes
    fieldForm.appendChild(arrFields[i]);
    }
    }
    cheers

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2004
    Location
    Dublin
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The layout of the form is simply this:

    <form>
    Dropdown menu

    Hidden text fields

    </form>

    I'm a bit confused as how to implement the code you gave me.

  5. #5
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    Finland
    Posts
    703
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Place the script between your HEAD-tags (and the stylesheet if you want to) and put the SELECT inside the FORM-tags. Then, you need to have a block-level element (DIV is the most simple one). You can place it anywhere you want, but most likely you'd like to have it inside the FORM-tags. So, here goes:

    Code:
    <html>
    	<head>
    		<script language="JavaScript" type="text/javascript">
    			function makeBoxes(howMany) {
    				var container = document.getElementById("txtboxes"); // the div
    				var existingFields = container.getElementsByTagName("INPUT"); // existing fields
    				var size = existingFields.length; // current amount of fields
    				if (howMany < size) { // need to remove fields
    					for (var i = (size - 1); i >= howMany; --i) { // start from the last field and remove all fields until howMany is reached.
    						existingFields[i].parentNode.removeChild(existingFields[i]); // remove field
    					}
    				}
    				else if (howMany > size) { // need to add fields
    					var field;
    					for (var i = size; i < howMany; ++i) { // start from the current amount of fields, stop when howMany reached
    						field = document.createElement("INPUT"); // create field
    						field.type = "text"; // textbox
    						field.id = field.name = "txtbox_" + i; // the name/id of the textbox. the first one will be txtbox_0, the next one txtbox_1 and so on. 
    						container.appendChild(field); // add field
    					}
    				}
    			}
    		</script>
    
    		<style type="text/css">
    		#txtboxes input { /* some style for the textboxes. display: block will put each textbox on a line of its own. */
    			display: block;
    			border: dotted 1px black;
    			margin: 2px;
    			font-size: 8pt;
    		}
    		</style>
    	</head>
    	<body>
    		
    		<form action="#" method="get">
    			<!-- tables shouldn't really be used for layout :( -->
    			<table>
    				<tr valign="top">
    					<td>
    						<select name="fields" onchange="if (this.selectedIndex != 0) { makeBoxes(this.options[this.selectedIndex].value); }">
    							<option>-- Select the amount of fields --</option>
    							<option value="1">one</option>
    							<option value="2">two</option>
    							<option value="3">three</option>
    							<option value="4">four</option>
    							<option value="20">twenty</option>
    						</select>
    					</td>
    					<td>
    						<div id="txtboxes"></div>
    					</td>
    					<td>
    						<button type="submit">Submit!</button>
    					</td>
    				</tr>
    			</table>
    		</form>
    
    	</body>
    </html>

  6. #6
    SitePoint Zealot
    Join Date
    Jul 2004
    Location
    Dublin
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face

    Thanks!


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
  •