dynamic form creation

**loren.hibbard.i** · 12-06-2010 06:01 PM

Hello!

A while back, I asked for some help with dynamic form creation. I wanted a user to be able to enter into a text field how many designs he or she would like, then, based on that number, be provided with a pair of text boxes that asked 1) name of design 2) quantity of that particular design.

I received this cool way of doing it by user thraddash :

<head>
<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>

As a followup, I wonder how to control in a table where each of these text boxes will appear. Any help is very appreciated. Thank you in advance!

Thomas

**Fang** · 12-07-2010 05:36 AM

If you mean a html table then create this using dom methods: http://www.howtocreate.co.uk/tutoria...ript/domtables.

Using a '$' in scripting can create side effects if a JavaScript library is used. All libraries use it as a special meaning.
Also the iteration used in the name attributes is probably unnecessary as php will see Quantity[] as an array.

**loren.hibbard.i** · 12-07-2010 10:47 AM

thank you for your reply.

I read the page at the link you supplied and it does seem pretty useful. I am, however, too novice to understand where to put that code into my code.

When I put it here, where it seems sensible to me, it broke.

var theTable = document.getElementById('order_table_1');
theTable.tBodies[0].appendChild(document.createElement('tr'));
$field = document.createElement('span');
$field.innerHTML = 'Name of Design';
$field.style.marginRight = '10px';
$item.appendChild($field);

Can you be more specific on how to implement this please? Thanks again!
Thomas

**Fang** · 12-08-2010 01:37 AM

Simpler version

Code:

function BuildFormFields(amount)
{
var container = document.getElementById('FormFields');
container.innerHTML = '';
var tab = '<table><tbody><tr><th>Name of Design</th><th>Quantity of Design</th></tr>';
for (var i = 0; i < amount; i++) {
    tab += '<tr><td><input type="text" name="Design[]"></td><td><input type="text" name="Quantity[]"></td></tr>';
    }
container.innerHTML = tab +  '</tbody></table>';
}

**loren.hibbard.i** · 12-08-2010 11:15 AM

Yes, the innerHTML is a lot less verbose. Thank you!

How could you apply a file upload (FTP) button and an ajax progress bar to each iteration of that loop?

Thomas

**Fang** · 12-08-2010 11:55 AM

A file upload input?
What has Ajax got to do with this script?

**loren.hibbard.i** · 12-08-2010 12:26 PM

Since the files being transferred are pretty heavy (60 - 80 mb), I thought I'd incorporate a progress bar so the user will know something is happening. I was under the impression that Ajax was necessary for that back-and-forth communication so the progress bar would know what amount of the file had been received in order to change it's level of completion.

**Fang** · 12-08-2010 12:33 PM

Ajax can't upload images, it can only fake it using an iframe
http://valums.com/ajax-upload/

**loren.hibbard.i** · 12-08-2010 12:38 PM

yes. i thought I would use php to upload the file, then ajax to show the progress; is this inaccurate?

Thread: dynamic form creation

Thread Tools

Display

dynamic form creation

file upload with progress bar possible too

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions