Ad:

JavaScript / DHTML / AJAX Discussion Thread
Unsolved
Views: 6590

Feb 1st, 2007

Extending HTML Forms

Expand Post »

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

Similar Threads

html/php form for .htaccess validation in PHP
Passing variables from delphi to html forms in Pascal and Delphi
HTML & C++ in C++
How to use two forms in asp in ASP
Generation html in perl in Perl

md_salman

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

12 posts
since Sep 2005

Permalink

Feb 1st, 2007

Re: Extending HTML Forms

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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<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>
<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>

Last edited by hollystyles; Feb 1st, 2007 at 9:51 am.

hollystyles

Reputation Points: 262

Solved Threads: 68

Veteran Poster

Offline

1,181 posts
since Feb 2005

Permalink

Nov 9th, 2007

Re: Extending HTML Forms

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

yasminou

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

1 posts
since Nov 2007

Permalink

Nov 9th, 2007

Re: Extending HTML Forms

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

Reputation Points: 262

Solved Threads: 68

Veteran Poster

Offline

1,181 posts
since Feb 2005

Permalink

May 25th, 2011

Re: Extending HTML Forms

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?

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
   <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>
   <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

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

2 posts
since May 2011

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Image Above Div Z-index

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Calling Airshow- Return false; and Z-index issues

DaniWeb Message

Cancel Changes

User Name
Password