Javascript/jQuery Adding Elements to Form and binding events

Question

I'm trying to create a dynamic form, which would have drop-down items which when changed would generate certain input fields. the form is to have at least 1 drop-down on load.

The problem I am facing is that I would need to add a maximum of 4 drop-down items, which would generate the same fields. I can generate the drop-down elements, but I am finding it hard to understand where and how should I plug in my event handler so that the generated elements can use them as soon as they generate.

I have a standard event handling function such as below to handle the default which would get the selected value and would call respective methods to generate the form.

<select id="question-type-1">
    ..
    <option value="text">Text Field</option>
    ..
</select>

// dummy code -- please see jsfiddle link below
$("#question-type-1").on("change", function(){
   ....
   generateTextField();
   ....
});

This bit works fine ^

http://jsfiddle.net/fatgamer85/f8QWc/2/

I am trying to add a maximum of 4 select options; and I would like each of them linked to a common event handler? and generate form

<select id="question-type-1">
    ..
    <option value="text">Text Field</option>
    ..
</select>

<!-- Generated by JS --->
<select id="question-type-2">
    ..
    <option value="text">Text Field</option>
    ..
</select>
<!-- Generated by JS --->


// dummy code -- please see jsfiddle link below
$("#question-type-1").on("change", function(){
   ....
   generateTextField();
   ....
});

// Do I manually write 4 different event handling code?

Any ideas would be much appreciated.

Answer 1

The id selector is used to specify a single, unique element. The class selector is used to specify a group of elements. Make use of class selector.

<select class="question-type">
  ..
  <option value="text">Text Field</option>
  ..
</select>

<!-- Generated by JS --->
<select class="question-type">
  ..
  <option value="text">Text Field</option>
  ..
</select>

and

$(document).on("change",".question-type", function(){
   ....
   generateTextField();
   ....
});

Answer 2

You should use event delegation

$(".questions-list").on("change", ".question-type", function(){
    ....
    generateTextField();
    ....
});

Now for every new select you have same event handler.

Check the fiddle http://jsfiddle.net/f8QWc/5/ Now the problem is elements added from other selects replaces this added earlier. I'm not sure how it should work?

Answer 3

I have created you this script and showed how it should look like. Take a good look at the global_id counter, and the use of html. I didn't initialize the first fieldset cause you can do it yourself very well. I did create only the things your script had trouble with. http://jsfiddle.net/f8QWc/9/

$(document).ready(function(){
// Configuration
var max_fieldsets = 4;

// Fieldset adding function
var global_id = 1;
function create_fieldset(parent, id)
{
  $(parent).append(
  "<fieldset class=\"fieldset fieldset-"+ id +"\">" +   $("#prototype").html() + 
  "</fieldset>");
}

// Dropdown behaviour controller
$("#add").on("click", function(){
    if(global_id > 4) return; // More than 4 added?
    var handle = create_fieldset("body", global_id);
    $(".fieldset-"+global_id).children('select').on("click", function() {           // Dropdown actions below:
        switch($(this).find(":selected").text())
        {
            case "Checkbox":
            alert("add checkbox"); // Replace it with ur code
            $(this).val(0); // Reset dropdown 
            break;
        }

    });
    global_id++;
});      
});