dynamic form displays variable number of new text fields

**loren.hibbard.i** · 11-23-2010 12:13 PM

Hello,

I am thomas. This is my first post!

I have a question. I am trying to make a dynamic form. I have seen this addressed in a few other threads, but it is first of all not exactly like my problem and also, the language of the explanations is not simple enough for me to understand.

I am trying to make a form that has 1 box that asks how many designs a customer wishes to order, then based upon that number, reveals that many pairs of text boxes below; one should be with the label, «name of design», while the other should be with the label «quantity of design». That way, if a user enters 4, four pairs of these boxes will appear, asking him specific names and quantities

If I set up a variable quantity to the value of the text box, I think I should be able to loop like,

for x=1; x<=qty.value; x++

but then I am confused about how to make the thing render the text boxes. My primitive knowledge tells me I could do something like document.write. But on another thread I read I saw that I could also use

document.createElement('input');
setAttribute('type', 'text');

Something like that seems a bit more sophisticated (or at least like it would work at all), but I am so confused about how to put it all together.

I am very grateful if someone can take the time to shed some light on a solution to this problem.

Thank you so much in advance,
Thomas

**thraddash** · 11-23-2010 03:23 PM

Hope this helps in some way...

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Dynamic Form</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<style type="text/css">
		</style>

		<script type="text/javascript">

			function BuildFormFields($amount)
			{
				var
					$container = document.getElementById('FormFields'),
					$item, $field, $i;

				$container.innerHTML = '';
				for ($i = 0; $i < $amount; $i++) {
					$item = document.createElement('div');
					$item.style.margin = '3px';

					$field = document.createElement('span');
					$field.innerHTML = 'Name of Design';
					$field.style.marginRight = '10px';
					$item.appendChild($field);

					$field = document.createElement('input');
					$field.name = 'Design[' + $i + ']';
					$field.type = 'text';
					$item.appendChild($field);

					$field = document.createElement('span');
					$field.innerHTML = 'Quantity of Design';
					$field.style.margin = '0px 10px';
					$item.appendChild($field);

					$field = document.createElement('input');
					$field.name = 'Quantity[' + $i + ']';
					$field.type = 'text';
					$item.appendChild($field);

					$container.appendChild($item);
				}
			}

		</script>

	</head>
	<body>

		<form method="post" action="order.php">
			How Many? <input type="text" onkeyup="BuildFormFields(parseInt(this.value, 10));" />
			<div id="FormFields" style="margin: 20px 0px;"></div>
			<input type="submit" />
		</form>

	</body>
</html>

**loren.hibbard.i** · 11-23-2010 04:26 PM

Yes. That is exactly what I meant. Thank you very much for the help.

I cannot, however, really claim a comprehensive understanding of how this code works. Can you explain what this code does:

$field.name = 'Design[' + $i + ']';

I hope to append a few other more specific questions, but I wanted to quickly post this in case you are still monitoring this thread at all.

Thank you again.
Thos.

**thraddash** · 11-23-2010 04:31 PM

Originally Posted by loren.hibbard.i

I cannot, however, really claim a comprehensive understanding of how this code works. Can you explain what this code does:

$field.name = 'Design[' + $i + ']';

$field.name = 'Design[' + $i + ']'; and $field.name = 'Quantity[' + $i + ']'; are assigning each field in the form a unique name, you will require this when retrieving the information on the server side.

Eg.

If your using PHP, you would access the data as such

PHP Code:


$design   = $_POST['Design'];

$quantity = $_POST['Quantity'];



for ($i = 0; $i < count($design); $i++) {

    echo $design[$i] . ' = ' . $quantity[$i] . '<br />';

}

This code is untested.

Thread: dynamic form displays variable number of new text fields

Thread Tools

Display

dynamic form displays variable number of new text fields

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions