Geek Answers Handbook

Using jQuery to dynamically add form fields (or fields) based on the value of a popup

As the title says, I'm trying to make jQuery by adding a number of additional fields based on the value selected in the drop-down list. For example, when a page loads, the drop-down menu has a default value of 1, and the default input field is displayed. Now, if the user selects a different value from this drop-down list, the number of fields should be adjusted accordingly by cloning (I suppose this would be a better solution). Here is what I still have:

Dropdown Code ...

<select id="itemCount" name="itemCount">
 <option value="1">1 item</option>
 <option value="2">2 items</option>
 <option value="3">3 items</option>
 <option value="4">4 items</option>
 <option value="5">5 items</option>
 <option value="6">6 items</option>
</select>

... jQuery change listener ...

$(document).ready(function() {
 $("#itemCount").change(function(){
  var itemCountVal = jQuery(this).val();
  $("#item_dup_1").fieldsManage(itemCountVal);
 });
});

... ( jQuery, , , , ):

jQuery.fn.fieldsManage = function (number) {
  var clone,
  objTemplate = source.clone(true),
  source = jQuery(this),
  maxClones = number - 1,
  clones = [];

  if (clones.length < maxClones) {
    while (clones.length < maxClones) {
      clone = objTemplate.clone(true).insertAfter(clones[clones.length - 1] || source);
      clones.push(clone);
    }
  }

  if (clones.length > maxClones) {
    // Fieldsets removal function goes here.
  }
}

, , <fieldset id="item_dup_1"><input><input><input></fieldset>. , .

, , , - , , , . , , , , , . ( , ), .

, - , , , , , !

!

+5
2

Nate B.

  • ,
  • : html ( HTML, )
  • (id )

, , . ( , , ). . , , . 3 5. . , .

jQuery.fn.fieldsManage = function (number) {
    var ele = $(this);
    var clones = ele.data("clones");
    clones = clones ? clones : new Array(ele.attr("id"));
    if (clones.length < number) {
        var clone;
        while(clones.length < number) {
            clone = ele.clone(true);
            var id = clones[0]+clones.length;
            clone.attr("id", id);
            $("#"+clones[clones.length-1]).after(clone);
            clones.push(id);
        }
    } else {
        while(clones.length > number) {
            $("#"+clones.pop()).remove();
        }
    }
    ele.data("clones", clones);
}

$(document).ready(function() {
    $("#itemCount").change(function() {
        $("#item_dup_1").fieldsManage(this.value);
    });
});
+6

, - ( )?

$(".divWhereTheseGo").empty();
var count = 0;
while (count < maxItems) {
   $(".divWhereTheseGo").append("<fieldset id=\"" + count + "\">your form info</fieldset>");
   count++;
}

count - , .

0

More articles:


All Articles