Jump to content

Create Object Location


vchris

Recommended Posts

I have a drop down which will create a certain number of text inputs depending on the option they choose. In the drop down I have 0, 1, 2, 3, 4, 5, 6, 7 and 8. The inputs are created by groups of 3, each in their own cell, all on one row. What is the best way to create another row if the user chooses 2 and have the second row appear underneath the first?Here's a bit of code.

<select name="extra" onChange="createInputs()">				  <cfloop index="i" from="0" to="8">					  <cfoutput>						<option value="#i#"<cfif i eq extra> selected="selected"</cfif>>#i#</option>					</cfoutput>				  </cfloop>				</select>			  </p>			  <table>				<tr>				  <th>Name</th>				  <th>Email</th>				  <th>Phone number</th>				</tr>				<tr>				  <td><input type="text" name="extraName_1" value="<cfoutput>#extraName_1#</cfoutput>"></td>				  <td><input type="text" name="extraEmail_1" value="<cfoutput>#extraEmail_1#</cfoutput>"></td>				  <td><input type="text" name="extraPhone_1" value="<cfoutput>#extraPhone_1#</cfoutput>"></td>				</tr>

Got that figured but will I be able to validate them with ColdFusion since in the html code I don't see the element all I see is the JS?Should I simply have the 8 inputs invisible with CSS and when a certain option is chosen I make some appear?

Link to comment
Share on other sites

you could use getElementById('myTable').insertRow(1) within a loop, set to loop for whatever number of times they select.then set the innerHTML as a standard but change the numbers (ie. extraSomething_1) by using a variable that's incremented each time the loop repeats the code.if that makes sense?inserting rows into a table: http://www.w3schools.com/js/tryit.asp?file...table_insertrowfor loops: http://www.w3schools.com/js/js_loop_for.asp

Link to comment
Share on other sites

Here's what I got:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">	<title>Untitled Document</title>	</head>	<style type="text/css">	/*input.extraReg { display: none; }*/	tr.extraReg { display: none; }	</style>	<script language="javascript">	function toggleInputs(itemValue) {		var i;		removeInputs(itemValue);		addInputs(itemValue);	}	function removeInputs(itemValue) {		for(i = 1; i < 9; i++) {			document.getElementById('row_' + i).style.display = 'none';		}	}	function addInputs(itemValue) {		for(i = 1; i <= itemValue; i++){			document.getElementById('row_' + i).style.display = 'block';		}	}						function createInputs(itemValue) {		var i;		var inputName = '<td><input type="text" name="extraName_' + i + '"></td>';		var inputEmail = '<td><input type="text" name="extraEmail_' + i + '"></td>';		var inputPhone = '<td><input type="text" name="extraPhone_' + i + '"></td>';								for(i = 1; i <= itemValue; i++) {			document.getElementById('my_div').innerHTML = document.getElementById('my_div').innerHTML +			'<tr id="row_' + i + '">' + inputName + inputEmail + inputPhone + '</tr>';		}		for(i = 1; i <= 8; i++) {			document.getElementById('row_' + i).remove();		}	}		</script><body><form method="post" action="testingdb.cfm">	<p><strong>Extra Registration :</strong>	<select name="extra" onChange="toggleInputs(this.value)">		<cfloop index="i" from="0" to="8">			<cfoutput>				<option value="#i#">#i#</option>			</cfoutput>		</cfloop>	</select>	</p>	<table border="1" id="my_div">	<tr>		<th>Name</th>		<th>Email</th>		<th>Phone number</th>	</tr>	<cfloop index="i" from="1" to="8">		<cfoutput>			<tr id="row_#i#" class="extraReg">				<td><input type="text" name="extraName_#i#" id="extraName_#i#" value="extraName_#i#"></td>				<td><input type="text" name="extraEmail_#i#" id="extraEmail_#i#" value="extraEmail_#i#"></td>				<td><input type="text" name="extraPhone_#i#" id="extraPhone_#i#" value="extraPhone_#i#"></td>			</tr> 		</cfoutput>		<!--- <tr><td>cell 1</td><td>cell 2</td><td>cell 3</td></tr> --->	</cfloop>	</table></form></body></html>

I make the whole row appear onchange of the select but somehow the row appear all in one cell. I don't understand why. Any ideas? When I reselect another number, it removes the rows and adds the correct number again but it leaves a blank area (sort of like empty <td>). I don't know how to remove that. It seems like it ignores the <td> and </td>.I think that the <cfoutput> creates the problem that everything is in one cell. In my loop I typed in this line: <tr><td>cell 1</td><td>cell 2</td><td>cell 3</td></tr> and it worked perfectly. Any ideas for a solution to this? I need output for naming my inputs and ids.If you want to see what I mean, just use the above code (I don't use the createInputs() function right now).I found the solution. My problem is I set the <tr> to display block instead of table-row.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...