Order form help

**sheraz79** · 09-17-2008, 05:42 PM

Hi There,

how are you.

I created a order form using front page 2002.simply using text boxes.
it worked well.this form is sent to email ,not to database.

but the problem is ,the form is too long.

I like to have button where user can click and add a text box (as many they like). Instead of having so many text boxes in my order form.

Thank you .

**rangana** · 09-18-2008, 01:10 AM

A basic example to keep you going:

Code:

<script type="text/javascript">
function Add(targ,elm,separate) 
/* Accepts three parameters: The target element (targ), the element you wish to create (elm) 
and the element you wish to separate the textbox (separate)
*/
{
document.getElementById(targ).appendChild(document.createElement(separate));
document.getElementById(targ).appendChild(document.createElement(elm));
}
</script>
<p id="tst">
<input type="button" value="Add Textbox" onclick="Add('tst','input','br');">
</p>

**sheraz79** · 09-22-2008, 07:57 PM

Thank you very much for your help.

it worked well.

I'm wondering, how do I increase the size of box?

one problem here when I put 2 add text button ,only one of them works 2nd text box button add in to the first one.

Thanks again for your great help.
God Bless You.

**rangana** · 09-22-2008, 11:48 PM

Could you show us your attempt. It'll be a lot easier to start from where you were stumped at.

**sheraz79** · 09-25-2008, 06:26 PM

Hello There,

I found a different script ,that full fill my needs. but the problem is that I want to use this script may be 5 times on the same page or form for different section.however for some reason when I add another set of dynamic text box unit ,the add button from this set adds on to first one. Also how can I get data from these dynamic text boxes.

/here is script I'm using.

Thank You Again For your help.

<HEAD>

<TITLE>dynamic</TITLE>

<script language="javascript">



</SCRIPT>

</HEAD>
<BODY>

<P>

<form method="POST" action="--WEBBOT-SELF--">
<p> </p>

<p align=center> <b>
<U>ABCTOZ</U>
</P>
<p>
 </p>

<p>
 </p>

<p>
 </p>

<p>
<br>
<br>

</p>

<table id="table1" cellSpacing=1 cellPadding=1 border=1>
<TR >
<TD rowSpan=2 size=4> No</TD>
<TD colSpan=2>
<CENTER >
<p>Please Enter Your Order Details Here</p>
</CENTER></TD>
</TR>
<TR>
<TD>
<CENTER>
<p>Product</p>
</CENTER></TD>
<TD>
<CENTER>
<p>Manufacture </p>
</CENTER></TD>
</TR>
<tbody>
<TR name=row1 >
<TD ><input type="text" name="Sno" size=2 value=1 disabled></TD>
<TD><input type="text" name="Product" size=45></TD>
<TD><input type="text" name="Manufacture" size=45></TD>

</TR>
</tbody>
</table>

<p>

<input type="button" value="Add a Box" onClick="addRow();">  </p>
</b>
<table id="table1" cellSpacing=1 cellPadding=1 border=1>
<TR >
<TD rowSpan=2 size=4> No</TD>
<TD colSpan=2>
<CENTER >
<p>Please Enter Your Order Details Here</p>
</CENTER></TD>
</TR>
<TR>
<TD>
<CENTER>
<p>Product</p>
</CENTER></TD>
<TD>
<CENTER>
<p>Manufacture </p>
</CENTER></TD>
</TR>
<tbody>
<TR name=row1 >
<TD ><input type="text" name="Sno" size=2 value=1 disabled></TD>
<TD><input type="text" name="Product" size=45></TD>
<TD><input type="text" name="Manufacture" size=45></TD>

</TR>
</tbody>
</table>

<p>

<input type="button" value="Add a Box" onClick="addRow();">  </p>

<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
</form>

</body>
</html>

**TheJoshMan** · 09-25-2008, 06:30 PM

I'm not really a script guru, but I could guess that the problem is that the script you are using is calling a particular table... see below:

Code:

var tbody = document.getElementById("table1")

Then in the HTML you have:

Code:

<table id="table1" cellSpacing=1 cellPadding=1 border=1>

For each new instance, try changing the ID to something unique from the others like "table2" then also change the reference to it in the script to match.

**sheraz79** · 09-25-2008, 09:28 PM

Thank you very much,
as you described I tried it,
but now the first table doesnt do any thing, from first table its add to 2nd table.
I'm new and I'm learning.
here what I did , I changed the 2nd table id to "table2"
in the script I added .

var tbody = document.getElementById("table2").getElementsByTagName("tbody")[1];
var row = document.createElement("TR");

Just to let you know the first one still exist "table1".

Thank You.
God Bless You.

**rangana** · 09-26-2008, 12:23 AM

In your markup, you have two instances of table1 id.

This is invalid since ID should be unique in every page.

...with that said, change the second table's ID other than table1.

For your problem, the script has no capability (as per time being) to distinguish as to which table are you wanting to add a new row.

The fix is by changing/adding highlighted in your script:

Code:

function addRow(el)
{
rownum++;
var tbody = document.getElementById(el).getElementsByTagName("tbody")[1];
var row = document.createElement("TR");

...and pass to your function the table you want to add a new row:

Code:

<input type="button" value="Add a Box" onClick="addRow('table1');">&nbsp; </p>
.
.
.
.

<input type="button" value="Add a Box" onClick="addRow('newID');">&nbsp; </p>

Hope that makes sense.

**sheraz79** · 09-26-2008, 08:32 PM

Hi There,

It worked well,, Thank you very much.

but now there is a new problem,

when I add from first table, its add in to it, same with the 2nd table its add in to it............but let say when I add in to first table 2nd row ,and when I add 2nd row in to 2nd table it skips the number. intead of having no.2 in 2nd table it adds no.3 while the first has 2nd in it, so both are taking each other no.3.

Thanks again.

**rangana** · 09-27-2008, 04:31 AM

Change this part:

Code:

function addRow(el)
{
rownum++;
var tbody = document.getElementById(el).getElementsByTagName("tbody")[1];
var row = document.createElement("TR");

into:

Code:

function addRow(el)
{
targEl=document.getElementById(el);
var tbody = targEl.getElementsByTagName("tbody")[1];
rownum=Number(targEl.getElementsByTagName('tr')[(targEl.rows.length-1)].getElementsByTagName('td')[0].getElementsByTagName('input')[0].value);
rownum+=1;
var row = document.createElement("TR");

Hope that helps.