Dynamically adding input controls to form, similar to Apple Mail Rules

Question

I'm attempting to build an advanced search form that allows the user to dynamically add lines of criteria.

1. The first drop down selects the field to search
2. The second is the operator
3. The third is the value (text, datepicker, or twitter typeahead)

The main part that changes is the value field. So it's not a case of simply cloning the line above. How can I code that in a generic way? there is no limit here. Someone could add two lines of criteria that use a twitter typeahead picker as the value field.

In terms of making sure they come through in an accessible way to the backend, I'd thinking naming the fields on each line like so could work?

field[], operator[], value[]

Answer 1

Use JQuery.append( html_fragment) to dynamically build & append your desired HTML elements, into the TD or DIV container where you need them.

See: http://api.jquery.com/append/ and also jQuery document.createElement equivalent?

For example:

var prefix = "cond0";
var content = "<select name='"+prefix+"_field'>";
// generate select options here..
content += "</select>";
//
var container = $( "#"+prefix);
container.append( content);

Hope this helps.