Log in

View Full Version : 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:


<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">

<!--
var rownum=1

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

var cell0 = document.createElement("TD");
var inp0 = document.createElement("INPUT");
inp0.setAttribute("type","text");
inp0.setAttribute("name","Sno" + rownum);
inp0.setAttribute("size","2");
inp0.setAttribute("value", rownum);
inp0.setAttribute("disabled", true);
cell0.appendChild(inp0);


var cell1 = document.createElement("TD");
var inp1 = document.createElement("INPUT");
inp1.setAttribute("type","text");
inp1.setAttribute("name","Width" + rownum);
inp1.setAttribute("size","45");
inp1.setAttribute("value","");
cell1.appendChild(inp1);


var cell2 = document.createElement("TD");
var inp2 = document.createElement("INPUT");
inp2.setAttribute("type","text");
inp2.setAttribute("name","Drop" + rownum);
inp2.setAttribute("size","45");
inp2.setAttribute("value","");
cell2.appendChild(inp2);


row.appendChild(cell0);
row.appendChild(cell1);
row.appendChild(cell2);

tbody.appendChild(row);
}

function validate(the)
{
i=document.FORM1.Drop1.value;
alert(i);
i= document.FORM1.Drop2.value;

alert(i)

submit();


}


-->




</SCRIPT>


</HEAD>
<BODY>


<P>

<form method="POST" action="--WEBBOT-SELF--">
<!--webbot bot="SaveResults" u-file="_private/form_results.csv" s-format="TEXT/CSV" s-label-fields="TRUE" --><p>&nbsp;</p>

<p align=center> <b>
<U>ABCTOZ</U>
</P>
<p>
&nbsp;</p>

<p>
&nbsp;</p>

<p>
&nbsp;</p>

<p>
<br>
<br>

</p>

<table id="table1" cellSpacing=1 cellPadding=1 border=1>
<TR >
<TD rowSpan=2 size=4>&nbsp;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();">&nbsp; </p>
</b>
<table id="table1" cellSpacing=1 cellPadding=1 border=1>
<TR >
<TD rowSpan=2 size=4>&nbsp;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();">&nbsp; </p>


<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</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:



var tbody = document.getElementById("table1")

Then in the HTML you have:

<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".:confused:

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:


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:


<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:


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


into:


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.
sheraz79
09-28-2008, 10:06 PM
Thank You so much for your help.

every thing worked fine.

Thank you Again.

One more question.. Please.

how do I get values from these boxes ,they made dynamically on this order form.

this would be a great help.


Thank you again..

God Bless You.
rangana
09-29-2008, 01:31 AM
What do you mean by that? If you're wanting to retrieve the values of your order form, then you need server-side.
sheraz79
09-29-2008, 11:13 PM
Yes, I would like to retrieve values or data enter by user in this form.

I have no problem getting data from the text boxes that are present on this form.I have set it up to, on submit send form by email.

but I have a problem retrieving data or values with the dynamic text boxes that we just created.

if it is server side.. what are the requirements for it.what do I need to get data from these dynamic text boxes.

Thank You so for your help..
rangana
09-30-2008, 12:09 AM
Since this is entirely different from the thread's (main) topic, I suggest posting on the server-side section, as it is'nt my forte.
sheraz79
09-30-2008, 05:34 PM
Thank you for your help.

God Bless You.