tmgolf tmgolf - 6 months ago 19
HTML Question

limit dynamic form fields based on data element

I have the following code that allows the adding and removing of selection fields dynamically:

Here is the HTML:

<div class="multi-field-wrapper">
<div class="multi-fields">
<div class="multi-field">

<select class="input-normal selection"name="options1[]" data-limit="2">
<option value="">None</option>
<option value="option1">Option 1</option>
</select>

<button type="button" class="remove-field">X</button>
</div></div>


<button type="button" class="add-field">Add</button>
</div>


<div class="multi-field-wrapper">
<div class="multi-fields">
<div class="multi-field">

<select class="input-normal selection"name="options2[]" data-limit="3">
<option value="">None</option>
<option value="option1">Option 1</option>
</select>

<button type="button" class="remove-field">X</button>
</div></div>


<button type="button" class="add-field">Add</button>
</div>


Here is the JS:

$('.multi-field-wrapper').each(function() {
var $wrapper = $('.multi-fields', this);
$(".add-field", $(this)).click(function(e) {
$('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
});
$('.multi-field .remove-field', $wrapper).click(function() {
if ($('.multi-field', $wrapper).length > 1)
$(this).parent('.multi-field').remove();
});
});


What I have been struggling with is the ability to limit the number of selection fields that can be added. I added data-limit="2" in attempts to write some JS that references the data value and sets the limit based on the value.

Any ideas where to start?

I tried the following wich I do not know why it did not work:

var article = document.getElementByClass('multi-fields');
var len = $(".multi-field-wrapper").find(".multi-fields").length;
if(len == article.dataset.limit){
$('#add-field').hide();
}
});
});

Answer

Maybe a bit ugly solution, but you can use it as a base. I would put data-limit somewhere outside of the select field, maybe to multi-fields, so you can create a function to access multi-field.length and data-limit in add and remove clicks
EDIT: simplified a bit and fixed, when removing selection, it should be less than limit, so we don't need to count select boxes ..
EDIT2: now you can use as many select boxes as you want

$('.multi-field-wrapper').each(function() {
  var $wrapper = $('.multi-fields', this);
  $(".add-field", $(this)).click(function(e) {
    limit = $('.selection', $wrapper).length + 1;
    $select = $('.multi-field:first-child', $wrapper);
    if(limit < $select.find('.selection').data('limit'))
      $(this).show();
    else $(this).hide();
    $select.clone(true).appendTo($wrapper).find('input').val('').focus();
  });
  $('.multi-field .remove-field', $wrapper).click(function() {
    if ($('.multi-field', $wrapper).length > 1) {
      $(this).closest('.multi-field-wrapper').find('.add-field').show();
      $(this).parent('.multi-field').remove();
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="multi-field-wrapper">
  <div class="multi-fields">
    <div class="multi-field">
      <select class="input-normal selection" name="options1[]" data-limit="3">
        <option value="">None</option>
        <option value="option1">Option 1x</option>
      </select>

      <button type="button" class="remove-field">X</button>
    </div>
  </div>
  
  <button type="button" class="add-field">Add</button>
</div>

<div class="multi-field-wrapper">
  <div class="multi-fields">
    <div class="multi-field">
      <select class="input-normal selection" name="options2[]" data-limit="5">
        <option value="">None</option>
        <option value="option1">Option 2x</option>
      </select>

      <button type="button" class="remove-field">X</button>
    </div>
  </div>

  <button type="button" class="add-field">Add</button>
</div>