Dynamically add form elements

**Stom** · 10-03-2006, 11:18 PM

I'm trying to create an order form in the guise of a selection box, with accompanying field for quantity.

The way i would liek it to work is thus:

Select the product from the drop down box. Enter the quantity in the field.

Press the "Add" button to insert another row. For those of you that have used Gmail, its the same effect of adding another attachment, but adding two fields, a selection and a text field. Also, changing the form action to reflect the number of fields. e.g. submit.asp?q=4 for four rows, submit.asp?q=12 for 12 and so on.

Thanks for any help, sorry if this makes no sense... its late and i have a head cold - not a good combination.

**jscheuer1** · 10-04-2006, 05:16 AM

Once you add form elements, and if they are named, their value should be passed automatically via submission.

The best way to add form elements is via the DOM:

Code:

var newInput=document.createElement('input');
newInput.name='myNewInput'
document.forms.myform.appendChild(newInput);

As I'm not sure of all the specifics, here is a very basic working example:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function add_input(){
var newInput=document.createElement('input');
newInput.name='myNewInput';
document.forms.myform.appendChild(newInput);
}
</script>
</head>
<body>
<form name="myform" action="#">
<input type="submit" value="submit">
<input type="text" name="art" onchange="add_input();">
</form>
</body>
</html>

**Stom** · 10-04-2006, 11:22 PM

Thanks for the reply. I really dont knwo what i'm doing with JS, so if you dont mind i'll pick your brains a little more...

How do i specify the type of form element i'm adding? I want ti to add both a select box with some 50 options or so, and a text field.

I'd also like them to be named select1, text1... select2, text2... select3, text3... etc for ease of processing with the form.

Thanks again,

Stom

**Stom** · 10-05-2006, 11:12 PM

Anyone? Please? Help?!

**jscheuer1** · 10-06-2006, 05:34 AM

That's a lot of creation. To create any particular element, use its tag name. With inputs, the type attribute may be defined (I left that out of my initial script as 'text' appears to be the default type). Children should be created before parents and then appended to their parent:

Code:

function add_input(){
var newOption0=document.createElement('option');
newOption0.value='25';
newOption0.innerHTML='Twenty Five';
var newOption1=document.createElement('option');
newOption1.value='75';
newOption1.innerHTML='Seventy Five';
var newOption2=document.createElement('option');
newOption2.value='50';
newOption2.innerHTML='Fifty';
var newSelect=document.createElement('select');
newSelect.name='myselect';
newSelect.appendChild(newOption0);
newSelect.appendChild(newOption1);
newSelect.appendChild(newOption2);
var newInput=document.createElement('input');
newInput.type='text';
newInput.name='myNewInput';
document.forms.myform.appendChild(newSelect);
document.forms.myform.appendChild(newInput);
}

One or more arrays and counting variables could be set up to keep track of the options, selects, and text inputs, their names, values and whatever. Depending upon what each would be, arrays,variables or creation functions could be established for some or all of them so that they would be at the ready when needed rather than having to be individually created from scratch each time.

**beginner_prithvi** · 06-07-2008, 07:21 AM

want to design a html form. it will contain two text areas at the top as a parent.
txt1 textarea
txt2 textarea
add button
whenever i click on add button it should again add two text areas to to the parent. This first child element will contain again add button to add two more text areas (first child's first child element) to first child element. Like this parent element can have any number of child elements, and again these child elements can have any number of child elements. [here each element is considered as two text areas]. There should also be facility to remove these elements. Actually trying to do it but i am not getting how to do it.. Please anyone help me.

Thread: Dynamically add form elements

Thread Tools

Search Thread

Dynamically add form elements

hi need your help regarding the same question.

Bookmarks

Bookmarks

Posting Permissions