Member Avatar for md_salman

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

  • 4 Contributors
  • 4 Replies
  • 846 Views
  • 4 Years Discussion Span
  • Latest Post Latest Post by zenghoong
Member Avatar for hollystyles

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>
Member Avatar for yasminou

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

Member Avatar for hollystyles

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.

Member Avatar for zenghoong

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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.