Extending HTML Forms

I am trying to create an HTML form in which user will enter different items (he wants to purchase) in text fields. One text field is used for one item. Now it is not known in advance how much items the user will purchase so we cannot decide the total text fields required in advance. Is is possible to increase the number of text fields (using JavaScript) one by one if the user requires more fields.
Bye

md_salman

Newbie Poster

12 posts since Sep 2005

Reputation Points: 10

Solved Threads: 0

5 Years Ago

Yes is the answer, this should get you started a very very basic solution but enough to show you what you need to be looking at to acheive your goal. check out http://www.w3schools.com

and get yourself a copy of the javascript anthology published by sitepoint ISBN 0-9752402-6-9

<html>
	<head>
		<script type="text/javascript">
			var instance = 0;
			
			function newTextBox(element)
			{		
				instance++; 
				var newInput = document.createElement("INPUT");
				newInput.id = "text" + instance;
				newInput.name = "text" + instance;
				newInput.type = "text";
				document.body.insertBefore(newInput, element);
			}
		</script>
	</head>
	<body>
		<input type="button" id="btnAdd" value="New text box" onclick="newTextBox(this);" />
	</body>
</html>

hollystyles

Veteran Poster

1,182 posts since Feb 2005

Reputation Points: 262

Solved Threads: 68

4 Years Ago

Hello,

the script is exactly what I was searching but I still have a problem.
How can I get the information that people wrote in the text field ? I've tried to put into a but get an error msg.

Can you help ?

Thanks

yasminou

Newbie Poster

1 post since Nov 2007

Reputation Points: 10

Solved Threads: 0

4 Years Ago

Only if you tell me what the error message is, and post your current code in code tags. I don;t know how crystal balls work unfortunately :)

1. what is the action attribute set to in your form tag?
2. What server-side technology are you using? CGI ? ASP? ASP.NET? PHP? all have their different methods for retreiving the POST data from a submitted HTML Form.

hollystyles

Veteran Poster

1,182 posts since Feb 2005

Reputation Points: 262

Solved Threads: 68

1 Year Ago

I've done this base on your instructions and modifications. It works. But once I add the tags, then it stops working. Any way around this?

<html>
    <head>
    <script type="text/javascript">
    var instance = 1;
     
    function newUpload()
    {
    instance++;
    var newInput = document.createElement("INPUT");
    newInput.size = "12";
    newInput.name = "regPictures" + instance;
    newInput.type = "file";
	newInput.style.display = 'block';
	element = document.getElementById("btnAdd");
    document.getElementById("he").insertBefore(newInput, element);
    }
    </script>
    </head>
    <body>
    <form id="he">
    <div>
    <input name="regPictures1" type="file" size="12"/>
    
    <br/>
    <input type="button" id="btnAdd" value="More" onclick="newUpload();" />
    </div>
    </form>
    </body>
    </html>

zenghoong

Newbie Poster

2 posts since May 2011

Reputation Points: 10

Solved Threads: 0

This article has been dead for over three months

You