使用js计算表单字段

时间：2016-05-08 06:06:50

标签： javascript jquery

我的表单看起来像这样：

<form method="post" action="">
   <label for="id_count-count">Count:</label>
   <input id="id_count-count" type="number" name="count-count">
   <div class="extrafieldWrapper"></div>
   <input type="submit" value="Submit">
</form>

根据字段count的数量，我添加或删除新的字段item和item2。例如：如果字段count的值为2，则会生成两对字段item和item2。

有这样的字段：

<label for="id_items-0-item">Item:</label>
<input id="id_items-0-item" type="number" name="items-0-item">
<label for="id_items-0-item2">Item2:</label>
<input id="id_items-0-item2" class="children_age" type="number" name="items-0-item2" value="0">
<div class="extrafieldWrapperChAge"></div>

然后，根据字段item2的每个值，添加调用childrenage的新字段。看起来有childrenage字段：

<label for="id_childrenage-0-childrenage">ChildrenAge 1</label>
<input id="id_childrenage-0-childrenage" type="number" name="childrenage-0-childrenage" value="0">

这是小提琴link。 这里有我想要的东西以及我所拥有的link。

根据item2的值，childrenage的ID也会发生变化。例如，如果我有＆＃39; 3＆＃39;作为item2的值，我有id_childrenage-0-childrenage，id_childrenage-1-childrenage和id_childrenage-2-childrenage。如果我有多个item2我有childrenage的新示例，从一开始就计算每个item2的ID：

<label for="id_items-0-item2">Item2:</label>
<input id="id_items-0-item2" class="children_age" type="number" name="items-0-item2" value="2">
<div class="extrafieldWrapperChAge">
   <label for="id_childrenage-0-childrenage">ChildrenAge</label>
   <input id="id_childrenage-0-childrenage" type="number" name="childrenage-0-childrenage" value="0">
   <label for="id_childrenage-1-childrenage">ChildrenAge</label>
   <input id="id_childrenage-1-childrenage" type="number" name="childrenage-1-childrenage" value="0">
</div>
<label for="id_items-0-item2">Item2:</label>
<input id="id_items-0-item2" class="children_age" type="number" name="items-0-item2" value="1">
<div class="extrafieldWrapperChAge">
   <label for="id_childrenage-0-childrenage">ChildrenAge</label>
   <input id="id_childrenage-0-childrenage" type="number" name="childrenage-0-childrenage" value="0">
</div>

在上面的示例中，我有两个字段item2，其中一个值为＆＃39; 2＆＃39;以及另一个价值＆＃39; 1＆＃39;。根据这一点，我有childrenage的两个字段，其中第一个item2的标识为id_childrenage-0-childrenage和id_childrenage-1-childrenage，另一个字段childrenage为第二个字段id_childrenage-0-childrenage 1}}。但我需要从第一个childrenage到最后一个item2继续计算<label for="id_items-0-item2">Item2:</label> <input id="id_items-0-item2" class="children_age" type="number" name="items-0-item2" value="2"> <div class="extrafieldWrapperChAge"> <label for="id_childrenage-0-childrenage">ChildrenAge</label> <input id="id_childrenage-0-childrenage" type="number" name="childrenage-0-childrenage" value="0"> <label for="id_childrenage-1-childrenage">ChildrenAge</label> <input id="id_childrenage-1-childrenage" type="number" name="childrenage-1-childrenage" value="0"> </div> <label for="id_items-0-item2">Item2:</label> <input id="id_items-0-item2" class="children_age" type="number" name="items-0-item2" value="1"> <div class="extrafieldWrapperChAge"> <label for="id_childrenage-2-childrenage">ChildrenAge</label> <input id="id_childrenage-2-childrenage" type="number" name="childrenage-2-childrenage" value="0"> </div> ，这是示例：

$(function(){
   $('#id_count-count').on('change', function(e){
      var n = $('#id_count-count').val() || 0;
      var html = "<input id='id_items-TOTAL_FORMS' type='hidden' value='" + n + "' name='items-TOTAL_FORMS'>"
         + "<input id='id_items-INITIAL_FORMS' type='hidden' value='0' name='items-INITIAL_FORMS'>"
         + "<input id='id_items-MIN_NUM_FORMS' type='hidden' value='0' name='items-MIN_NUM_FORMS'>"
         + "<input id='id_items-MAX_NUM_FORMS' type='hidden' value='15' name='items-MAX_NUM_FORMS'>";

      for (var i = 0; i < n; i++) {
         html += "<div>Items" + (i + 1) + "</div>"
            + "<br/><label for='id_items-" + i + "-item'>Item:</label>"
            + "<input id='id_items-" + i + "-item' type='number' name='items-" + i + "-item'/>"
            + "<label for='id_items-" + i + "-item2'>Item2:</label>"
            + "<input id='id_items-" + i + "-item2' type='number' value='0' name='items-" + i + "-item2' class='children_age'/>"
            + "<div class='extrafieldWrapperChAge'></div>";
      }
      $(".extrafieldWrapper").html(html);
   });
   $(".extrafieldWrapper").on('change', '.children_age', function(e){
      var n = $(this).val() || 0;
      var html = "<input id='id_childrenage-TOTAL_FORMS' type='hidden' value='" + n + "' name='childrenage-TOTAL_FORMS'>"
         + "<input id='id_childrenage-INITIAL_FORMS' type='hidden' value='0' name='childrenage-INITIAL_FORMS'>"
         + "<input id='id_childrenage-MIN_NUM_FORMS' type='hidden' value='0' name='childrenage-MIN_NUM_FORMS'>"
         + "<input id='id_childrenage-MAX_NUM_FORMS' type='hidden' value='15' name='childrenage-MAX_NUM_FORMS'>"; 

      for (var i = 0; i < n; i++) {
         html += "<br/><label for='id_childrenage-" + i + "-childrenage'>ChildrenAge "+(i+1)+"</label>"
            + "<input id='id_childrenage-" + i + "-childrenage' type='number' value='0' name='childrenage-" + i + "-childrenage' />";
      }
      $(this).next('.extrafieldWrapperChAge').html(html);
   });

});

这是实现这个的js代码：

{{1}}

希望你明白我的意思。 我是java-script的新手，你能帮我写一些正确的代码吗？非常感谢！

1 个答案:

答案 0 :(得分：2)

这个特别的答案变得越来越长，所以我决定将其截断为当前的答案。

代码

$(function() {
  var fieldset = $('<fieldset>');
  var legend = $('<legend>');
  var input = $('<input>').prop('type', 'number');
  var hidden = $('<input>').prop('type', 'hidden');
  var label = $('<label>');
  var child_wrapper = $('<div class="child-wrapper">');
  /*
    Here we create a couple of new HTML elements. These elements are not a part of the 
    HTML DOM yet and can therefore be manipulated without any visual changes.
  */
  var create_hidden_fields = function(str, fields_arr) {
    var ret = [];
    //return array;
    $.each(fields_arr, function(i, obj) {
      //Loops through each field to set up the hidden values
      var h = hidden.clone();
      //Clones the hidden fields
      h.prop('id', 'id_' + str + '-' + obj.name).prop('name', str + '-' + obj.name).val(obj.value);
      //Sets the ID, name, and value.
      ret.push(h);
    });
    return ret;
  };

  $('#id_count-count').on('change', function(e) {
    var n = $(this).val() || 0;
    //Gets the id count value, or 0;

    var hidden_fields = [{
      name: 'TOTAL_FORMS',
      value: n
    }, {
      name: 'INITIAL_FORMS',
      value: 0
    }, {
      name: 'MIN_NUM_FORMS',
      value: 0
    }, {
      name: 'MAX_NUM_FORMS',
      value: 15
    }];
    //Hidden fields pre-build, makes life easier, since there seems to be a pattern

    var h_arr = create_hidden_fields('items', hidden_fields);
    //Hidden Array created
    if ($(this.form).children(':hidden')) {
      $(this.form).children(':hidden').remove();
      //Removes all the current hidden fields, because lazy.
    }
    $(this.form).prepend(h_arr); //adds in our created hidden fields.

    var form = $(this.form).children('.extra-field-wrapper');
    //Gets the fieldset wrapper.
    form.empty();
    //Empties any children there already. Otherwise extra children are added.

    for (var i = 0; i < n; i++) {
      var fs_clone = fieldset.clone(); //clones the fieldset element
      var l_clone = legend.clone().text("Item " + (i + 1));
      // clones the legend element and adds text
      var la_clone_1 = label.clone();
      //label clone 1
      var input_clone_1 = input.clone();
      //Input clone 1
      var child_wrapper_clone = child_wrapper.clone().prop('id', 'parent-' + (1 + i));
      //We use clones to keep our initial values safe. This way we can alter the clones without changing our defaults

      fs_clone.append(l_clone);
      //Adds our legend up top for readability;      
      la_clone_1.prop('for', 'id-items-' + i + '-item').html('Parent ' + (i + 1));
      //Adds the 'for' property with the correct ID, then sets the HTML. Item and Item2 were getting confusing
      input_clone_1.prop('value', 0).prop('id', 'id-items-' + i + '-item');
      //Sets the default value to 0, and the necessary ID for our label to work
      var la_clone_2 = label.clone().html('# of Children').prop('for', 'id-items-' + i + '-num-children');
      /*
       This is a lot in one line, it clones the label element, adds the HTML, and sets the property all in one.
      */
      var input_clone_2 = input.clone().prop('id', 'id-items-' + i + '-num-children').prop('value', 0).addClass('children_age');
      //See above comment. One difference is that this adds our class for our next function to work

      fs_clone.append([la_clone_1, input_clone_1, la_clone_2, input_clone_2, child_wrapper_clone]);
      //This could probably be cleaned up, but for now it works.

      form.append(fs_clone); //adds the fieldset clone to the form.
    } //End for

  });

  $(".extra-field-wrapper").on('change', '.children_age', function(e) {

    var n = $(this).val() || 0;
    // the current value of the item
    var append_array = [];
    //Add an HTML append array, lessens calls to the $(this).next().append();

    $(this).before(h_arr);
    //Adds the hidden elements before this element

    $(this).next('.child-wrapper').empty();
    //Clears the child elements

    for (var i = 0; i < n; i++) {
      var l_clone = label.clone().html('Children Age' + (i + 1));
      var i_clone = input.clone().addClass('child-age').prop('value', 0);

      append_array.push(l_clone);
      append_array.push(i_clone);
      //Adds the elements to the append_array since we are now done with them.
    }

    $(this).next('.child-wrapper').append(append_array);
    //Adds all created elements;

    var children_age = $('input.child-age').each(function(i, el) {
      var self = $(el);
      //Lazy handle
      var label = $(el).prev();
      //The label is the element in front of our current element.
      label.text("Child Age " + (i + 1)).prop('for', 'id_childrenage_' + i + '_childrenage');
      //Gives correct label number /re does the for property;
      self.prop('id', 'id_childrenage_' + i + '_childrenage');
      //give correct id now that changes have been made to the dom.
    });


    var hidden_fields = [{
      name: 'TOTAL_FORMS',
      value: children_age.length
    }, {
      name: 'INITIAL_FORMS',
      value: 0
    }, {
      name: 'MIN_NUM_FORMS',
      value: 0
    }, {
      name: 'MAX_NUM_FORMS',
      value: 15
    }];
    //We have to redeclare this function here in order for the value: n  to work correctly.
    if ($('#id_childrenage-TOTAL_FORMS').length == 0) {
      //This element does not exist yet in the DOM
      var hidden_fields = [{
        name: 'TOTAL_FORMS',
        value: children_age.length
      }, {
        name: 'INITIAL_FORMS',
        value: 0
      }, {
        name: 'MIN_NUM_FORMS',
        value: 0
      }, {
        name: 'MAX_NUM_FORMS',
        value: 15
      }];
      //We have to redeclare this function here in order for the value: n  to work correctly.

      var h_arr = create_hidden_fields('childrenage', hidden_fields);
      //creates the hidden fields
      $(this.form).prepend(h_arr);
    } else {
      $('#id_childrenage-TOTAL_FORMS').val(children_age.length);
    }


  });

});
label {
  font-weight: 800;
}
input[type="number"] {
  width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="">
  <label for="id_count-count">Count:</label>
  <input id="id_count-count" type="number" name="count-count">
  <div class="extra-field-wrapper"></div>
  <input type="submit" value="Submit">
</form>

解释

我在这里做了一些事情，而且很可能是一种更好的方式，但我在时间限制下做得最好。

  1. 我创建要复制到jQuery中的项目，因为我已经读完了，我只是不记得template标签是如何工作的，所以我远离它的特殊种类的魔法。为了便于阅读，字段集和图例仅 。在您的实际代码中，您只需删除其引用以及fs_clone和l_clone，而是将这些项目直接附加到表单元素。
  2. 我创建了一个函数，它只存在于我们的包装匿名函数create_hidden_fields的范围内，作为一个程序员，数学家和所有懒惰的人我注意到命名约定中的模式，这吸引了我更多而不是必须手动创建和复制一堆项目 每个 时间，我想创建一个字段。
  3. id_childrenage-TOTAL_FORMS本身就有form（顺便说一下，我遇到的最奇怪的命名约定）。因为我们不需要超过1份输入。
  4. 在两个函数中重新声明hidden_fields数组的原因非常简单：如果在变量n之前声明它，则TOTAL_FORMS输入将没有正确的值。不好。
  5. 希望其他所有内容都可以通过我在代码中的评论来回答。

    6. 快乐编码。

相关问题
最新问题