将所有表单字段值添加到一个

时间:2017-10-28 11:33:00

标签: javascript jquery

这段代码是我的函数的一部分,它创建了selectbox并将索引放到每个选项值。我的问题是如何将所有这些字段(文本框和选择框)值添加到基于提交表单隐藏的特定输入类型中? 这是我的代码:

$(function() {

  var createChildDropdown = function(i) {
    var $childDropdown = $('<div />', {
      'class': 'childs'
    });
    $childDropdown.append($('<label />', {
      'for': 'childDropdown-' + i
    }).text('Child age ' + i));
    $childDropdown.append($('<select />', {
      'name': 'childDropdown'
    }));
        var options = [' 1 years old', '2 years old', '3 years old'];
    options.forEach(function(option, index) {
	  $childDropdown.find('select').append($('<option />').text(option).attr('value', `,${index}`));


    });
        return $childDropdown;
  };
    var destroyChildDropdown = function($el, i) {
    $el.find('div.childs').get(i).remove();
  };

  $(".button-click-child a").on("click", function() {
    var button = $(this);
    var oldVal = parseInt(button.closest("ul").prev().val());
    var newVal = (button.text() == "+") ? oldVal + 1 : (oldVal > 0) ? oldVal - 1 : 0;
    var total_value = "";
	if(newVal >= 5) return; 
    button.closest("ul").prev().val(newVal);

    $(".cat_textbox").each(function() {
      var cat = $(this).prev('span').text();
    });

    if (oldVal < newVal) {
      $('.childDropdowns').append(createChildDropdown(newVal));
    } else if (oldVal > newVal) {
      destroyChildDropdown($('.childDropdowns'), newVal);
    }
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form method="post" action="">
<input type="text" class="cat_textbox" name="child"  value="0" />

 <ul class="button-group button-click-child">
  <li><a href="javascript:void(0)"><span class="hide">+</span></a></li>
  <li><a href="javascript:void(0)" ><span class="hide">-</span></a></li>
  </ul>
      <div class="childDropdowns"></div>
  <button type="submit">SEND</button>
  </form>

1 个答案:

答案 0 :(得分:0)

根据您的问题,我假设您想为每个选择框提供个人ID。如果是这种情况,您可以为每个选择框添加一个唯一的ID值,如下所示: $childDropdown.append($('<select />', { 'id': 'childDropdown-' + i 'name' : 'childDropdown-' + i }));