Подсчет количества добавленных элементов для отправки формы

Question

У меня есть веб-страница, которая является динамической формой. Он позволяет пользователям указывать любое количество атрибутов для устройств. Этими атрибутами могут быть выбранные списки опций. Когда пользователь выбирает это, им предлагается кнопка для добавления опций.

Моя проблема заключается в том, что мне нужно знать, сколько вариантов существует для каждого атрибута. Я попытался использовать var counter=$('.class-name').next().val();, чтобы попытаться посчитать их alert(counter);, чтобы узнать, работает ли он. Но все, что я получаю, является предупреждением о неопределенности, поэтому счетчик var не инициализируется.

Мне нужно знать количество опций для каждого списка выбора, чтобы иметь возможность группировать их вместе и знать, какие параметры идут с определенным атрибутом. Я не могу придумать способ сделать это через JS или PHP. Я могу получить параметры, опубликованные в php, но я не могу определить, какие варианты идут с каждым атрибутом.

Адрес fiddle!

Answer 1

Вот код для получения длин для каждого из соответствующих параметров.

$('.tattribute option:selected[value="text"]').length 
$('.tattribute option:selected[value="checkbox"]').length 
$('.tattribute option:selected[value="select-list"]').length 
$('.tattribute option:selected[value="notes"]').length 

Fiddle

Вот скрипка со скрытым полем добавила следить за подсчитывать варианты. Каждый раз, когда опция добавляется или удаляется, значение скрытого поля увеличивается или уменьшается. Изменения в коде ниже

var template="<div class=\"new-attribute\">" 
       + "<h3>New Attribute</h3>" 
       + "<label for=\"attributeName[]"+"\">Name:</label>" 
       + "<input class=\"attribute\" type=\"text\" name=\"attributeName[]"+"\">" 
       + "<input class=\"attribute_count\" type=\"hidden\" name=\"attributeCount[]"+"\">" 
       + "<label for=\"attributeType[]"+"\">Type:</label>" 
       + "<select class=\"tattribute\" name=\"attributeType[]"+"\">" 
       + "<option value=\"text\" selected>Text</option>" 
       + "<option value=\"checkbox\">Checkbox</option>" 
       + "<option value=\"select-list\">Select Option List</option>" 
       + "<option value=\"notes\">Notes</option>" 
       + "</select>" 
       + "<div class=\"option\"></div>" 
       + "<button type=\"button\" class=\"remove\">Delete</button>" 
       + "</div>"; 

И

//Add action 
    $("#attributes").on('click', '.btn', function() { 
     add = "<div class=\"op\"><label for=\"attributeOption[]" +"\">Name:</label>" 
     + "<input class=\"option-input\" type=\"text\" name=\"attributeOption[]" + "\">" 
     +"<button type=\"button\" class=\"remove-option\">remove</button></div>"; 
     $(this).after(add); 
     //COUNT NUMBER OF OPTIONS 
     $opt = $(this).closest('.option') 
     $opt.siblings('.attribute_count').val($opt.find('.op').length) 
     alert($opt.siblings('.attribute_count').val()); 
    }); 

    //Remove input 
    $("#attributes").on('click', '.remove-option', function() { 
      $(this).closest('.op').remove(); 
      $opt = $(this).closest('.option') 
      $opt.siblings('attribute_count').val($opt.find('.op').length) 
    });