...

View Full Version : How to make the form generate fields for user input



kunyomi
09-06-2008, 06:48 AM
Firstly, I must say hi to everyone here, and thanks in advance for trying to help me!

I am a newbie to java/php programming, so..

I am trying to have a form that can change quantities. For example, the user needs to order 5 items, and when he choose 5, and click on change quantity, the script will generate 5 fields for him to fill.

An example is as follows..

http://spreesg.com/b2b.php

I am really thankful if any of you can help me. Thanks!

Regards,
Shawn

JordanW
09-06-2008, 03:10 PM
Really simply:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Jordan Woodley" />

<title>Untitled 3</title>

<script>
function changeQuan(quantity){
document.getElementById('quantInputHolder').innerHTML = "";
for (i=0;i<quantity;i++)
{
document.getElementById('quantInputHolder').innerHTML += "Item Name: <input type='text' size='20' id='quantInput'"+i+"> <br />";
}

}
</script>
</head>

<body>

<input type="text" size="2" maxlength="2" id="quantity" />
<input type="button" value="Change Quantity" onclick="changeQuan(document.getElementById('quantity').value)" />
<div id="quantInputHolder"></div>
</body>
</html>


~Jordan

kunyomi
09-07-2008, 05:13 PM
Hi Jordan,

this is EXACTLY what I have been looking for!

This is what I get when I generate 1 quantity.
http://img396.imageshack.us/img396/4671/49833754kr7.jpg

This is what I get when I generate 2.
May I know if it is possible to make 1 set of questions each? Like as in the first one.
I tried making a for loop in the for loop, but I cant.
http://img185.imageshack.us/img185/5610/80914900kr2.jpg

Just another question.

Is there a way to add the number beside the generated field?

For example,

1.field
2.field
3.field

Thanks in advance! :)

What I have now:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Jordan Woodley" />

<title>Untitled 3</title>

<script>
function changeQuan(quantity){
document.getElementById('quantInputHolder').innerHTML = "";
for (i=0;i<quantity;i++)
{

for (i=0;i<quantity;i++)
{
document.getElementById('quantInputHolder').innerHTML += "Item Name: <input type='text' size='20' id='quantInput'"+i+"> <br /><br>";
}
for (i=0;i<quantity;i++)
{
document.getElementById('quantInputHolder').innerHTML += "Item Code: <input type='text' size='20' id='quantInput'"+i+"> <br /><br>";
}
for (i=0;i<quantity;i++)
{
document.getElementById('quantInputHolder').innerHTML += "Item Color: <input type='text' size='20' id='quantInput'"+i+"> <br /><br>";
}
for (i=0;i<quantity;i++)
{
document.getElementById('quantInputHolder').innerHTML += "Item Size: <input type='text' size='20' id='quantInput'"+i+"> <br /><br>";
}
for (i=0;i<quantity;i++)
{
document.getElementById('quantInputHolder').innerHTML += "Item Price in US$: <input type='text' size='20' id='quantInput'"+i+"> <br /><br>";
}
}

}
</script>
</head>

<body>

<input type="text" size="2" maxlength="2" id="quantity" />
<input type="button" value="Change Quantity" onclick="changeQuan(document.getElementById('quantity').value)" />
<div id="quantInputHolder"></div>
</body>
</html>

Regards,
Shawn

vwphillips
09-07-2008, 05:50 PM
The previously code generates the input but does not allow the values to be submitted.

this should


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Jordan Woodley" />

<title>Untitled 3</title>

<script>
function changeQuan(quantity){
var obj=document.getElementById('quantInputHolder');
obj.innerHTML = "";
for (i=0;i<quantity;i++)
{
zxcESA('SPAN',{},{},obj,'Item '+(i+1));
if (document.all) zxcESA('<input type="text" size="20" name="quantInput[]" >',{},{},obj)
else zxcESA('INPUT',{},{type:'text',name:'quantInput[]'},obj);
zxcESA('BR',{},{},obj);
}
}

function zxcESA(zxcele,zxcstyle,zxca,zxcp,zxctxt){
if (typeof(zxcele)=='string') zxcele=document.createElement(zxcele);
for (key in zxcstyle) zxcele.style[key]=zxcstyle[key];
for (key in zxca) zxcele.setAttribute(key,zxca[key]);
if (zxcp) zxcp.appendChild(zxcele);
if (zxctxt) zxcele.appendChild(document.createTextNode(zxctxt));
return zxcele;
}






</script>
</head>

<body>
<form name="tst" >
<input type="text" size="2" maxlength="2" id="quantity" />
<input type="button" value="Change Quantity" onclick="changeQuan(document.getElementById('quantity').value)" />
<div id="quantInputHolder"></div>
</form>
</body>
</html>

JordanW
09-08-2008, 12:13 AM
<?PHP

if (isset($_POST['submit'])){
print_r($_POST);
}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Jordan Woodley" />

<title>Untitled 3</title>

<script>
function changeQuan(quantity){
var obj=document.getElementById('quantInputHolder');
obj.innerHTML = "";
var i = 0;
for (i=0;i<quantity;i++)
{
zxcESA('SPAN',{},{},obj,(i+1)+'. Item Name: ');
if (document.all) zxcESA('<input type="text" size="20" name="quantInput[]">',{},{},obj)
else zxcESA('INPUT',{},{type:'text',name:'quantInput[]'},obj);
zxcESA('BR',{},{},obj);

zxcESA('SPAN',{},{},obj,(i+1)+'. Item Code: ');
if (document.all) zxcESA('<input type="text" size="20" name="quantInput[]">',{},{},obj)
else zxcESA('INPUT',{},{type:'text',name:'quantInput[]'},obj);
zxcESA('BR',{},{},obj);

zxcESA('SPAN',{},{},obj,(i+1)+'. Item Colour: ');
if (document.all) zxcESA('<input type="text" size="20" name="quantInput[]">',{},{},obj)
else zxcESA('INPUT',{},{type:'text',name:'quantInput[]'},obj);
zxcESA('BR',{},{},obj);

zxcESA('SPAN',{},{},obj,(i+1)+'. Item Size: ');
if (document.all) zxcESA('<input type="text" size="20" name="quantInput[]">',{},{},obj)
else zxcESA('INPUT',{},{type:'text',name:'quantInput[]'},obj);
zxcESA('BR',{},{},obj);

zxcESA('SPAN',{},{},obj,(i+1)+'. Item Price: US$');
if (document.all) zxcESA('<input type="text" size="20" name="quantInput[]">',{},{},obj)
else zxcESA('INPUT',{},{type:'text',name:'quantInput[]'},obj);
zxcESA('BR',{},{},obj);

zxcESA('BR',{},{},obj);
}
}

function zxcESA(zxcele,zxcstyle,zxca,zxcp,zxctxt){
if (typeof(zxcele)=='string') zxcele=document.createElement(zxcele);
for (key in zxcstyle) zxcele.style[key]=zxcstyle[key];
for (key in zxca) zxcele.setAttribute(key,zxca[key]);
if (zxcp) zxcp.appendChild(zxcele);
if (zxctxt) zxcele.appendChild(document.createTextNode(zxctxt));
return zxcele;
}






</script>
</head>

<body>
<form name="tst" method="POST" action="">
<input type="text" size="2" maxlength="2" id="quantity" />
<input type="button" value="Change Quantity" onclick="changeQuan(document.getElementById('quantity').value)" />
<div id="quantInputHolder"></div>
<input type="submit" value="Submit" id="submit" name="submit">
</form>
</body>
</html>



That's using vwphillips' code

kunyomi
09-08-2008, 01:48 AM
O.O OH MY GODD! This is what I have been searching for for like.. 5 days?

Thanks so much! I'll be trying this out later!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum