runtime input boxes

**drhowarddrfine** · Nov 22 '07, 02:58 AM

This is a javascript question and I am transferring it there. However, I was tempted to delete this whole thing because I cannot take the time to try and figure out what you are saying. While I understand English may not be your primary language, your shorthand words suggest otherwise and I wouldn't be surprised if the javascript folks close this out. I suggest you edit this and make it more readable before they do.

And now I screwed up the listing for the code so you will have to repost that, too.

**omerbutt** · Nov 22 '07, 10:30 AM

Runtime Input Fields

hi there i am working on an inventory project (platform ,HTML,JAVASCRIP T,ASP)and for that i have made a stock entry form which is pasted below,I have included this form in the main Add Stock.asp page, having the following inputs to be saved

1.code no
2.part no
3.total replace no's--------->this is wot the ques is about
4.auto
5.type
6.brand
7.height
8.product
9.outer dia 1
10. outer dia2
11.inner dia1
12.inner dia 2
13unit price

Now the client has the business of AUTO FILTERS ,now for each Filter they have different qualities for which they Reprsent a "Replacemen t No" means for example if he has Mobile of Nokia6230 in 3 Manufacturers andhe has 2pieces of each, i.e "uk made"=2, "china made"=2, "hungary made"=2 e.t.c he will assign 1 "Code No" the Hungary Made mobile and for the other 2 mobiles he will assign 2 "Replace Nos" in the same Entry, now the prob is that the total number of "Replace Nos" are not fixed there can be 1 "Replace No" for 1 product and on the other hand 5 "Rep Nos " for another product ,what i am doing/trying to do is that i am using a div with a selection menu in which i want to give a serial of numbers from 1 to onwards and i am using the "onchange" in the "Select" tag which is calling a javascript function which enables the other divs for eg if i have selected "3" in the "Total Replace Nos" option then it shud call the javascript function which shud enable 3 input boxes to enter the 3 replace nos for the part :( isnt it lengthy ...if there is a better way todo this thing do temme and thanks for any help in advance, the code for the form is given here :

Code:

<tr>
 <td>
<table cellspacing="0" cellpadding="0" width="690" align="center" valign="top" bordercolor="#4C4A48" height="170">
 
<tr><td class="add"><div align="left">Code No:</div></td>
     <td width="150" align="Center" valign="Center"><div align="left"><input name="code_no" type="text" size="25" style="width:194px; height:17px; font-size:11px; font-family:tahoma; border-style:solid; border-width:1px; border-color:#4C4A48; color:#8C8B89; background-color:#0A0501 "></div></td>
			<td class="add"><div align="left">Part No:</div></td>
			<td width="150" align="Center" valign="Center"><div align="left"><input name="cust_name" type="text" size="25" style="width:194px; height:17px; font-size:11px; font-family:tahoma; border-style:solid; border-width:1px; border-color:#4C4A48; color:#8C8B89; background-color:#0A0501 "></div></td>
		</tr>
		<tr>			
			<td class="add"><div align="left">Total Replace No's:</div></td>
			<td class="150" align="center" valign="middle">
			<div align="left">
			<SELECT name="t_rep" onChange="" style=" width:194px; height:17px; font-size:11px; font-family:tahoma; border-style:solid; border-width:1px; border-color:#8C8B89; color:#8C8B89; background-color:#0A0501 ">
				<OPTION value="none" selected="selected">Please Select Any Number</OPTION>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
			</select>
			</div>
			</td>
			<td class="add"><div align="left">Auto:</div></td>
			<td width="150" align="Center" valign="Center"><div align="left"><input name="cust_add" type="text" size="25" style="width:194px; height:17px; font-size:11px; font-family:tahoma; border-style:solid; border-width:1px; border-color:#4C4A48; color:#8C8B89; background-color:#0A0501 "></div></td>
		</tr>
		<tr>
			<td class="add"><div align="left">Replace No:</div></td>
			<td width="150" align="Center" valign="Center"><div align="left"><input name="cust_add" type="text" size="25" style=" width:194px; height:17px; font-size:11px; font-family:tahoma; border-style:solid; border-width:1px; border-color:#8C8B89; color:#8C8B89; background-color:#0A0501 "></div></td>
			<td class="add"><div align="left">Outer Dia1:</div></td>
			<td width="150" align="Center" valign="Center"><div align="left"><input name="toc_fr" type="text" size="25" style="width:194px; height:17px; font-size:11px; font-family:tahoma; border-style:solid; border-width:1px; border-color:#4C4A48; color:#8C8B89; background-color:#0A0501 "></div></td>
		</tr>
		<tr>
			<td class="add"><div align="left">Type:</div></td>
			<td width="150" align="Center" valign="Center"><div align="left"><input name="cust_add" type="text" size="25" style="width:194px; height:17px; font-size:11px; font-family:tahoma; border-style:solid; border-width:1px; border-color:#4C4A48; color:#8C8B89; background-color:#0A0501 "></div></td>
			<td class="add"><div align="left">Outer Dia2:</div></td>
			<td width="150" align="Center" valign="Center"><div align="left"><input name="toc_fr" type="text" size="25" style="width:194px; height:17px; font-size:11px; font-family:tahoma; border-style:solid; border-width:1px; border-color:#4C4A48; color:#8C8B89; background-color:#0A0501 "></div></td>
		</tr>										    
		<tr>
			<td class="add"><div align="left">Brand:</div></td>
			<td ="#346598" width="150" align="Center" valign="Center"><div align="left"><input name="caller" type="text" size="25" style="width:194px; height:17px; font-size:11px; font-family:tahoma; border-style:solid; border-width:1px; border-color:#4C4A48; color:#8C8B89; background-color:#0A0501 "></div></td>
			<td class="add"><div align="left">Inner Dia1:</div></td>
			<td width="150" align="Center" valign="Center"><div align="left"><input name="toc_to" type="text" size="25" style="width:194px; height:17px; font-size:11px; font-family:tahoma; border-style:solid; border-width:1px; border-color:#4C4A48; color:#8C8B89; background-color:#0A0501 "></div></td>
		</tr>
		<tr>
			<td class="add"><div align="left">Height:</div></td>
			<td ="#346598" width="150" align="Center" valign="Center"><div align="left"><input name="caller" type="text" size="25" style="width:194px; height:17px; font-size:11px; font-family:tahoma; border-style:solid; border-width:1px; border-color:#4C4A48; color:#8C8B89; background-color:#0A0501 "></div></td>
			<td class="add"><div align="left">Inner Dia2:</div></td>
			<td width="150" align="Center" valign="Center"><div align="left"><input name="toc_to" type="text" size="25" style="width:194px; height:17px; font-size:11px; font-family:tahoma; border-style:solid; border-width:1px; border-color:#4C4A48; color:#8C8B89; background-color:#0A0501 "></div></td>
		</tr>
		<tr>
			<td class="add"><div align="left">Product:</div></td>
			<td width="150" align="Center" valign="Center"><div align="left"><input name="cust_add" type="text" size="25" style=" width:194px; height:17px; font-size:11px; font-family:tahoma; border-style:solid; border-width:1px; border-color:#8C8B89; color:#8C8B89; background-color:#0A0501 "></div></td>
			<td class="add"><div align="left">Unit Price:</div></td>
			<td width="150" align="Center"><div align="left"><input name="tel_no" type="text" size="25" style="width:194px; height:17px; font-size:11px; font-family:tahoma; border-style:solid; border-width:1px; border-color:#4C4A48; color:#8C8B89; background-color:#0A0501 "></div></td>
		</tr>
	</table>	
	</td>
</tr>

**acoder** · Nov 22 '07, 11:25 AM

You're not calling any function onchange.

Where's the JavaScript code or have you not written any yet?

Could you explain a little more what exactly needs adding?

**acoder** · Nov 22 '07, 11:47 AM

I've merged the two threads - your thread was already moved here.

**omerbutt** · Nov 22 '07, 01:01 PM

Originally posted by acoder

You're not calling any function onchange.

Where's the JavaScript code or have you not written any yet?

Could you explain a little more what exactly needs adding?

okay,.......... ......i am rewriting the code and have just inclued the part in which i need the help okay below isteh code u can copy paste and run ........what this code has is it has a Dropdown Selection Box with a name of
"TOTAL REP NOS"in which we have 2 options
namely "1 replace no", "2 replace nos"
if we select "1 replace no" then it will enable the div named "rep_no_1"
and if we select "2 replace nos" then it will enable div named "rep_no_2" along with the "rep_no_1" ,,,,,,......... ....now in this code the selection box has only 2 options i want those options to be unlimited means like this
{1 rep no ,2 rep no,3 rep nos and so on}.....means it shud not be hard coded

NO 2

it shud generate the input boxes according to the selected option in the
"Total rep nos".......wha t i have done is i have created those 2 input boxes named as "rep no 1" & "rep no 2" and have hidden it through a javascript funtion named "HideDiv()" , which i am calling in the<body onload="Hidediv ();"> which uses an 'inline' code and hides those input fields ........whereas i donot want to do this because the client can have any number of "Rep nos" ....i hope u get the rest when ou will see and run the code ,,,,,,,,,,,,,,, ,thanks in advance 4 any help

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Add New Stock</title>
<link rel="stylesheet" href="home.css" />
<link rel="stylesheet" type="text/css" href="cssverticalmenu.css" />
<link rel="stylesheet" type="text/css" href="Stk_frm.css" />
<script type="text/javascript" language="javascript">
		function HideDiv()
		{
			eval("document.all.lable_rep_no1.style.display = 'none';");
			eval("document.all.div_rep_no1.style.display = 'none';");
			eval("document.all.lable_rep_no2.style.display = 'none';");
			eval("document.all.div_rep_no2.style.display = 'none';");			
		}
		function enablediv()
		{
			if((document.all.t_rep.value)=="a")
			{
				HideDiv();
				eval("document.all.lable_rep_no1.style.display = 'inline';");
				eval("document.all.div_rep_no1.style.display = 'inline';");				
			}
			else if((document.all.t_rep.value)=="b")
			{
				HideDiv();
				eval("document.all.lable_rep_no1.style.display = 'inline';");
				eval("document.all.div_rep_no1.style.display = 'inline';");	
				eval("document.all.lable_rep_no2.style.display = 'inline';");
				eval("document.all.div_rep_no2.style.display = 'inline';");
			}
			else
			{
				HideDiv();
			}
		}
</script>
</head>
<body bgcolor="#1D1710" onload="HideDiv(); document.stkfrm.code_no.focus();">
<form name="stkfrm" method="post">
<table width="100%">
<div class="content" align="center">
	<div id="top">	
		<h1>FILTERS INVENTORY SYSTEM</h1>
		<h2>STOCK ENTRY FORM</h2>
	</div>
</div>

<table align="left" cellpadding="0" cellspacing="0" width="190" bgcolor="#0A0501">
</table>	
	<tr>
<tr>
	<div class="h1" align="left">
		<div id="top2" align="left">
			<h3>Add New Stock Item</h3>
		</div>
	</div>
</tr>
<tr>
<td>
<table align="center" cellpadding="0" cellspacing="0" width="700" bgcolor="#0A0501" bordercolor="4C4A48">
	<tr>
		<td><br>
			<tr>			
			<td class="add"><div align="left"><font face="Verdana, Arial, Helvetica, sans-serif" color="#FFFFFF">Total Replace No's:</font></div></td>
			<td class="150" align="center" valign="middle">
			<div align="left">
			<SELECT name="t_rep" onChange="enablediv();" style=" width:194px; height:17px; font-size:11px; font-family:tahoma; border-style:solid; border-width:1px; border-color:#8C8B89; color:#8C8B89; background-color:#0A0501 ">
				<OPTION value="none" selected="selected">Please Select Any Number</OPTION>
				<option value="a">1 Rep No</option>
				<option value="b">2 Rep Nos</option>
			</select>
			</div>
			</td>
		</tr>
		<tr>
			<td class="add"><div align="left" id="lable_rep_no1"><font face="Verdana, Arial, Helvetica, sans-serif" color="#FFFFFF">Rep no1:</font></div></td>
			<td width="150" align="Center" valign="Center"><div align="left" id="div_rep_no1"><input name="rep_no1" type="text" size="25" style="width:194px; height:17px; font-size:11px; font-family:tahoma; border-style:solid; border-width:1px; border-color:#4C4A48; color:#8C8B89; background-color:#0A0501 "></div></td>
		</tr>
		<tr>
			<td class="add"><div align="left" id="lable_rep_no2"><font face="Verdana, Arial, Helvetica, sans-serif" color="#FFFFFF">Rep no2:</font></div></td>
			<td width="150" align="Center" valign="Center"><div align="left" id="div_rep_no2"><input name="rep_no2" type="text" size="25" style="width:194px; height:17px; font-size:11px; font-family:tahoma; border-style:solid; border-width:1px; border-color:#4C4A48; color:#8C8B89; background-color:#0A0501 "></div></td>
		</tr>
			</td>
		</tr>
	</tr>
	<tr>
	<td>

	</td>
	</tr>
	<tr>
	<td>
	<table align="right" cellpadding="0" cellspacing="0" width="50%" border="1" bordercolor="#0A0501">
		<td align="center" ><input name="" type="image" src="images/submit.jpg" align="absmiddle" style="margin-left:80px" onclick="javascript:return val_log();"></td>
		<td align="left" ><input name="" type="image" src="images/reset.jpg" align="absmiddle" style="margin-left:0px" onclick="javascript:return canc();"></td>
	 </table>
	</td>
	</tr>
	<tr>
	<td>
	
	</td>
	</tr>
</table>
</td>
</tr>
	</tr>
</table>
</form>
</body>
</html>

**acoder** · Nov 22 '07, 01:18 PM

When you say you don't want it hard-coded, how are you going to decide how many? Is this determined from the server-side code?

Note 1: don't use document.all. Use document.getEle mentById instead - you will need to give your elements ids.

Note 2: there's no need to use eval. Remove eval and the JavaScript statements should be executed.

**omerbutt** · Nov 22 '07, 01:35 PM

Originally posted by acoder

When you say you don't want it hard-coded, how are you going to decide how many? Is this determined from the server-side code?

Note 1: don't use document.all. Use document.getEle mentById instead - you will need to give your elements ids.

Note 2: there's no need to use eval. Remove eval and the JavaScript statements should be executed.

that isw the problem i t could be any number that the user decides can be 4 replace no for a product and can be 1 replace number :( i am rally stucked in it
..........sir if u have any other way to do this lemme know and i am a new bee to javascript i am not that much expert at it and i havent used that document.getEle mentById....can u give me some helping code or ereeference through which i can have an idea that what i have to do

**acoder** · Nov 22 '07, 02:29 PM

Originally posted by omerbutt

that isw the problem i t could be any number that the user decides can be 4 replace no for a product and can be 1 replace number :( i am rally stucked in it
..........sir if u have any other way to do this lemme know and i am a new bee to javascript i am not that much expert at it and i havent used that document.getEle mentById....can u give me some helping code or ereeference through which i can have an idea that what i have to do

You will have to dynamically create elements or, if you have a maximum, you could hide them all and display the ones required.

What if someone wants more than the number you have in the select element? You would need to let them enter a number in a text field and then parse it to get the number and display that number of divs/input text boxes.

For document.getEle mentById(), see this link.

**omerbutt** · Nov 23 '07, 01:32 PM

document.getEle mentById()

hi i am trying to make an input box that shud take a numeric input and then display that number of input boxes under it,for e.g a user enters 4 in the input box then there should be 4 input boxes appearing under it, what i have done in my code is here, my current code is for 2 input boxes but it is not working

Code:

<html>
<head>
<script type="javascript">
function HideDiv()
{
	eval("document.all.lable_rep_no1.style.display = 'none';");
	eval("document.all.div_rep_no1.style.display = 'none';");
	eval("document.all.lable_rep_no2.style.display = 'none';");
	eval("document.all.div_rep_no2.style.display = 'none';");		
}

function enablediv()
{
	var Count;
	Count = document.getElementById('t_rep');
	if((Count)=="1")
	{
	HideDiv();
	eval("document.all.lable_rep_no1.style.display = 'inline';");
	eval("document.all.div_rep_no1.style.display = 'inline';");
	}
	else if((Count)=="2")
	{
	HideDiv();
	eval("document.all.lable_rep_no1.style.display = 'inline';");
	eval("document.all.div_rep_no1.style.display = 'inline';");	
	eval("document.all.lable_rep_no2.style.display = 'inline';");
	eval("document.all.div_rep_no2.style.display = 'inline';");
	}
	else
	{
	HideDiv();
	}
}
</script>
</head>
<body bgcolor="#1D1710" onload="HideDiv(); document.stkfrm.t_rep.focus();">
<form name="stkfrm" method="post">
<table width="100%">
<div class="content" align="center">
	<div id="top">	
		<h1>FILTERS INVENTORY SYSTEM</h1>
		<h2>STOCK ENTRY FORM</h2>
	</div>
</div>

<table align="left" cellpadding="0" cellspacing="0" width="190" bgcolor="#0A0501">
</table>	
	<tr>
<tr>
	<div class="h1" align="left">
		<div id="top2" align="left">
			<h3>Add New Stock Item</h3>
		</div>
	</div>
</tr>

<table align="center" cellpadding="0" cellspacing="0" width="700" bgcolor="#0A0501" bordercolor="4C4A48">
<tr>
	<td>
		<tr>			
			<td class="add"><div align="left"><font face="Verdana, Arial, Helvetica, sans-serif" color="#FFFFFF">Total Replace No's:</font></div></td>
			<td class="150" align="center" valign="middle"><div align="left"><input onkeypress="enablediv();" id="t_rep" type="text" style=" width:194px; height:17px; font-size:11px; font-family:tahoma; border-style:solid; border-width:1px; border-color:#8C8B89; color:#8C8B89; background-color:#0A0501 "></div>
			</td>
		</tr>
		<tr>
			<td class="add"><div align="left" id="lable_rep_no1"><font face="Verdana, Arial, Helvetica, sans-serif" color="#FFFFFF">Rep no1:</font></div></td>
			<td width="150" align="Center" valign="Center"><div align="left" id="div_rep_no1"><input name="rep_no1" type="text" size="25" style="width:194px; height:17px; font-size:11px; font-family:tahoma; border-style:solid; border-width:1px; border-color:#4C4A48; color:#8C8B89; background-color:#0A0501 "></div></td>
		</tr>
		<tr>
			<td class="add"><div align="left" id="lable_rep_no2"><font face="Verdana, Arial, Helvetica, sans-serif" color="#FFFFFF">Rep no2:</font></div></td>
			<td width="150" align="Center" valign="Center"><div align="left" id="div_rep_no2"><input name="rep_no2" type="text" size="25" style="width:194px; height:17px; font-size:11px; font-family:tahoma; border-style:solid; border-width:1px; border-color:#4C4A48; color:#8C8B89; background-color:#0A0501 "></div></td>
		</tr>
	</td>
<tr>
	<td>
	<table align="right" cellpadding="0" cellspacing="0" width="50%" border="1" bordercolor="#0A0501">
		<td align="center" ><input name="" type="image" src="images/submit.jpg" align="absmiddle" style="margin-left:80px" onclick=""></td>
		<td align="left" ><input name="" type="image" src="images/reset.jpg" align="absmiddle" style="margin-left:0px" onclick=""></td>
	 </table>
	</td>
	</tr>
	<tr>
	<td>
	
	</td>
	</tr>
</table>
</td>
</tr>
	</tr>
</table>
</form>
</body>
</html>

**acoder** · Nov 23 '07, 01:45 PM

I've merged this with your previous thread - keep this problem to one thread.

You will need to dynamically create the input boxes using document.create Element().

runtime input boxes

runtime input boxes

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment