jQuery-UI выбираемый массив вывода в скрытую форму

Question

Этот сайт всегда отвечает на мои вопросы при использовании Google, но я изо всех сил пытался найти ответ на этот вопрос, поэтому я хотел бы зарегистрироваться, поздороваться и спросить :)

У меня есть расписание (с использованием html-таблиц), и каждая ячейка помечена как выбираемая для выбора jquery-ui.

Тогда у меня есть форма с кнопкой, которая будет использовать POST для бронирования выбранных ячеек.

<form method="get" action="../test" id="add"> 
        <button type="submit" class="btn btn-primary">Book selected period(s)</button> 
       </form> 

В выбираемом примере сериализации это показывает, что он отлично подходит для цифр. но когда я иду, нажмите кнопку (используя GET для тестирования), похоже, что они ошибаются. Например, если я выбираю ячейку 1 и книгу кликов, она показывает cell_id = 1 в GET, но если я выберу ячейку 1 и ячейку 2, она будет проходить через их подсчет, поэтому GET показывает cell_id = 1, cell_id = 1, cell_id = 2 (поэтому считая 1, а затем 1 + 1, а не только 1 + 1)

это означает, что если я выбираю 5 ячеек, я получаю 15 результатов (1 + 2 + 3 + 4 + 5), а не 5. Есть ли способ обойти это. это то, что я до сих пор в JavaScript:

  $("#selectable").selectable({ 
     filter: ".selectable", 
      stop: function() { 
       $(".ui-selected", this).each(function() { 
        var data = $(this).data(); 
        $(data).each(function(key, value){ 
         var period_id = document.createElement("input"); 
         period_id.setAttribute("type", "hidden"); 
         period_id.setAttribute("name", "booking[1][period]"); 
         period_id.setAttribute("value", data.period); 
         document.getElementById("add").appendChild(period_id); 
        }); 

       }); 
      } 
     }); 

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

благодаря

редактировать как дополнение, это то, что я надеюсь достичь (для более ясного понимания того, что я имею в виду). пользователь видит расписание сетки. они могут выбрать одну ячейку и выбрать книгу, которая пройдет через POST массив периода и дня, который они выбрали, чтобы перейти на booking.php. у них также есть возможность выбрать несколько ячеек и щелкнуть книгу, которая затем передаст каждую ячейку в виде массива для бронирования, так что php может перебирать все ячейки массивов и записывать несколько ячеек, используя их идентификатор номер/день, как это было возвращено jquery selectable ,

Answer 1

<pre> 
    $("#selectable").selectable({ 
    filter: ".selectable", 
     stop: function() { 
      $(".ui-selected", this).each(function() { 
       var data = $(this).data(); 
       $(data).each(function(key, value){ 
        var period_id = document.createElement("input"); 
        period_id.setAttribute("type", "hidden"); 
        period_id.setAttribute("name", "booking["+key+"][period]"); 
        period_id.setAttribute("value", data.period); 
        document.getElementById("add").appendChild(period_id); 
       }); 

      }); 
     } 
    }); 

бронирование [1] => бронирование [ключ].

Answer 2

Вот решение, которое я придумал с помощью скрытого элемента ввода.

Jquery

   //Activities Selectable 
      $(".selectable-activities").selectable(
       {filter: "li"}, 
      { 
       stop: function() 
        {//places selected in input box 
         var text = ""; 
         $("#activities-input").val(text); 
         $(".ui-selected", this).each(function() { 
          var index = $(this).attr("id"); 
          text = text + " " + index; 
          $("#activities-input").val(text); 
         }); 
        } 


      }, 
      //Clears input box on reload 
      { create: function() {$("#activities-input").val("");}} 
      ); 

Html

   <fieldset> 
       <legend>Environmental</legend> 
       <ol class="selectable selectable-activities"> 
        <li class="ui-state-default" id="LNTS" >"leave No Trace" Skills</li> 
        <li class="ui-state-default" id="Aqua" >Aquatic Ecology/Study</li> 
        <li class="ui-state-default" id="OutSkill" >Camping Skills/Outdoor Living</li> 
        <li class="ui-state-default" id="Cons" >Conservation</li> 
        <li class="ui-state-default" id="Ento" >Entomology</li> 
        <li class="ui-state-default" id="Farm" >Farming/Gardening</li> 
        <li class="ui-state-default" id="Fores" >Forest Ecology</li> 
        <li class="ui-state-default" id="Geol" >Geology (Earth)</li> 
        <li class="ui-state-default" id="Herp" >Herpetology (amphibians & Reptiles)</li> 
        <li class="ui-state-default" id="Mari" >Marine Science</li> 
        <li class="ui-state-default" id="Natur" >Nature Explosure</li> 
        <li class="ui-state-default" id="Oni" >Ornithology (Birds)</li> 
        <li class="ui-state-default" id="Vet" >Veterinary Science</li> 
        <li class="ui-state-default" id="WildLi" >Wildllife Ecology</li> 
        <li class="ui-state-default" id="Zoo" >Zoology (Animals)</li> 
       </ol> 
       </fieldset> 

       <!--Here is the hidden input--> 
       <input type="hidden" name="a" id="activities-input" /> 

Answer 3

Как я в конечном итоге решения это должно было добавить

var count = 0 

непосредственно перед

$(".ui-selected", this).each(function() { 

, то каждое поле было это

date_id.setAttribute("name", "booking["+count+"][date]"); 

затем в конце цикла просто

count = count + 1 

работал для меня, но спасибо всем за советы