Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    How to make the form generate fields for user input

    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

  • #2
    Regular Coder
    Join Date
    Jul 2007
    Location
    United Kingdom
    Posts
    159
    Thanks
    2
    Thanked 15 Times in 15 Posts
    Really simply:

    Code:
    <!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
    Remember The Thank You Button Is Your Friend =]

    [ PHP / Javascript / VisualBasic / HTML / DHTML / CSS / .NET / MySQL ]

  • Users who have thanked JordanW for this post:

    kunyomi (09-07-2008)

  • #3
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi Jordan,

    this is EXACTLY what I have been looking for!

    This is what I get when I generate 1 quantity.


    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.


    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:

    Code:
    <!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
    Last edited by kunyomi; 09-07-2008 at 06:33 PM.

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    Thanks
    3
    Thanked 512 Times in 499 Posts
    The previously code generates the input but does not allow the values to be submitted.

    this should

    Code:
    <!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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    kunyomi (09-08-2008)

  • #5
    Regular Coder
    Join Date
    Jul 2007
    Location
    United Kingdom
    Posts
    159
    Thanks
    2
    Thanked 15 Times in 15 Posts
    Code:
    <?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
    Remember The Thank You Button Is Your Friend =]

    [ PHP / Javascript / VisualBasic / HTML / DHTML / CSS / .NET / MySQL ]

  • #6
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •