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

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>

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 <form> but get an error msg.

Can you help ?

Thanks

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.

I've done this base on your instructions and modifications. It works. But once I add the <div> 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>
This article has been dead for over six months. Start a new discussion instead.