Dynamically generating multiple rows of input fields?

[hostfreak]

I am trying to figure out if it is possible dynamically generate multiple rows of input fields. I've seen places on the web that show how to generate one input with an On Event etc... however never to generate multiple rows of inputs. I guess the concept is the same, however my skills when it comes to javascript are almost non-existent.

 

To further explain what I mean, say someone has:

Select box | Input | Input | Input |

 

When it comes to the last Input, say OnClick, how could I generate another row of the same fields? So it would be:

Select box | Input | Input | Input |
Select box | Input | Input | Input |

[hostfreak]

Any suggestions?

[emehrkay]

http://www.javascriptkit.com/javatutors/dom2.shtml

[hostfreak]

Alright, that gives me a good start. Thanks. Also, not sure if it will make this much more difficult, but say I have:

 

Select box | Input | Input | Input | + -*Main
  Select box | Input | Input | Input | + - *Sub

 

I will put a + and a - beside each row. They should be self-explanatory (+ = add new row, - = subtract row). Now the problem I am trying to overcome, is that say someone wants to add a new "Main" row. How will I make it appear below the other "Main" row and its "Sub" row(s), then allow it to have it's own dynamic "Sub" rows.

 

The reason for this is, the "Main" row select box will determine what is available in the "Sub" row(s) select box(es) (via AJAX).

 

Sigh... this is getting confusing for me. Anyways, thanks guys for the input so far. I really appreciate it.

[emehrkay]

may i suggest the use of a javascript library? I use mootools(mootools.net) and it makes creating and adding elements to the dom a million times easier. Look at this

 

new Element('input', {'type': 'text', 'name': 'text_name', 'value': 'default value'}).injectInside('another element's id');

 

now you could easily create a function with a few new Element() class calls and append them where needed. and if you needed to remove them you'd just do $(ele).remove();

 

the library is basically a suite of shortcuts, but it is very useful and powerful in approach

 

but if you wanted to, i could help you hash out how to do it without the use of a library

 

 

[hostfreak]

I wouldn't have a problem using a library at all. Anything that gets it done is fine with me. I've been stressing with this for a good bit of time now (I think I'm almost bald; from the amount of hair pulling). I will look into mootools. If you didn't mind helping with an example using mootools, more specific to my needs, that would be great. Once again, your help is appreciated. Thanks.

[emehrkay]

get the mootools library and i can help you write the function that you need

[hostfreak]

I am at the download page now, but am unsure which components I need to select? For now, I have just downloaded all the components (some of the ones sound really nice and may be useful later on).

 

[hostfreak]

I am really anticipating your response emehrkay. Finding a solution to this will relieve so much stress, it's been something I have been wanting to accomplish for awhile now. Thanks.

[emehrkay]

this isnt too difficult, just have to get the naming down for the form fields.

 

here is what your function should do:

 

create input fields, create delete button

append those fields and buttons to a div

give the delete button the action of removing that div

 

creating an element is pretty simple with mootools

var ele = new Element('div',{
'id': 'whatever',
'styles':{
'width': '100px'
},
'events':{
'click': function(){
//some action
},
'mouseover': function(){
//some action
}
}).adopt('other created ele').inject('somewhere');

 

look here: http://docs.mootools.net/Native/Element.js#Element.initialize

 

create your function and show me what you have so far and we can go from there

[hostfreak]

Hey, I just got back again from out of town. I am looking at the link you supplied and reading everything I can. I will see what kind of function I can come up with and post it when I'm done. For this specific function, which components of mootools would you download?

[hostfreak]

Alright, got done reading that. I am actually going to reread it. I seem to be having trouble grasping it. I've never been really too familiar with javascript. I feel pretty ignorant at the moment. Anyways, i'll continue to see what I can put together.

 

On a side note, with mootools, do you include it as an external source, then within the page write actual code? Example:

 

<html>
    <head>
        <script type="text/javascript" src="mootools.js"></script>
        <script type="text/javascript">
            //js code here
        </script>
    </head>
    <body>
    </body>
</html>

 

Also, once again, if you could please inform me as to which mootool components you would download for this specific task? Thanks.

[emehrkay]

yeah just like that

[emehrkay]

I had a little downtime at work. this is an example, hopefully you can build from here

 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="../js/mootools1.js"></script>
<script type="text/javascript">

formFields = {
ef: [],

start: function(){
	formFields.extraFields();
	$('add_row').addEvent('click', function(){
		formFields.addRow();
	});
},

extraFields: function(){	
	return this.ef = $$('.extra_field');
},

addRow: function(){
	var count = this.ef.length;
	var input_field = new Element('input',{
		'type': 'text',
		'name':	'input_field[]'
	});
	var remove = new Element('input',{
		'type': 'button',
		'value': 'remove',
		'name':	'remove_button[]',
		'events': {
			'click': function(){
				formFields.extraFields();
				this.getParent().remove();
			}
		}
	});
	var div = new Element('div',{
		'class': 'extra_field'
	}).adopt(input_field, remove).injectInside('extra_fields');
}
};

window.addEvent('domready',function(){
formFields.start();
});
</script>
</head>

<body>
<form id="test_form">
<div id="extra_fields">
    </div>
<input type="button" value="Add Row" id="add_row" />
</form>
</body>
</html>

[hostfreak]

Ah thanks. I'm the type of person that learns by examples. This helps a great deal. Now I need to get the concept/naming down of how to implement it the way I want; which seems pretty complicated. After all my research and your help, I understand how to do it when dealing with say one row of set inputs etc, but not for what I need just yet. Thanks a bunch.