Jump to content

Create Object Location

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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...