2016-11-15 1 views
0

Я создал HTML-страницу с формой, содержащей некоторые параметры, и значения отправляются через POST на страницу PHP.HTML-форма Отправить POST и checkbox treeview Значение

HTML, содержит обычные поля ввода формы с флажками и типами текста, а затем я добавил флажки с TreeView с помощью JQuery, но когда я нажимаю Отправить кнопку, значения TreeView флажков не посылается с данными POST. Почему эти данные не отправляются вместе?

  1. Как я могу получить все значения флажка с данными формы (т. Е. В данных POST)?
  2. Если пользователь выбирает флажки «Родитель» в дереве, как я могу сделать его, выберите все дочерние флажки, и если выбрана часть дочерних флажков, то флажок parent получит квадратную метку?
  3. Могу ли я сделать форму очистить все выбранные флажки (в том числе в элементе управления деревом), если пользователь нажимает кнопку формы Сброс?

Может кто-то объяснить, что это неправильно или как исправить следующее:

<head> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" /> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
</head> 

<body> 
    <form class="form-horizontal" action="ConstructorMain.php" method="post"> 
     <fieldset> 

      <!-- Form Name --> 
      <legend>Documents Generator</legend> 


      <!-- Text input--> 
      <div class="form-group"> 
       <label class="col-md-4 control-label" for="filename">File Name</label> 
       <div class="col-md-4"> 
        <input id="filename" name="filename" type="text" placeholder="" class="form-control input-md" required=""> 
        <span class="help-block">File name for the generated file</span> 
       </div> 
      </div> 

      <!-- Certified Or Non --> 
      <div class="form-group"> 
       <label class="col-md-4 control-label" for="type">Product Type</label> 
       <div class="col-md-4"> 
        <div class="radio"> 
         <label for="type-0"> 
          <input type="radio" name="type" id="type-0" value="cert" checked="checked"> Certified Products 
         </label> 
        </div> 
        <div class="radio"> 
         <label for="type-1"> 
          <input type="radio" name="type" id="type-1" value="non"> Non-Certified Product 
         </label> 
        </div> 
        <div class="radio"> 
         <label for="type-2"> 
          <input type="radio" name="type" id="type-2" value="full"> Universal 
         </label> 
        </div> 
       </div> 
      </div> 

      <!-- AV & CC --> 
      <div class="form-group"> 
       <label class="col-md-4 control-label" for="avcc[]">Protection Type</label> 
       <div class="col-md-4"> 
        <div class="checkbox"> 
         <label for="avcc-0"> 
          <input type="checkbox" name="avcc[]" id="avcc-0" value="AV"> Anti-virus 
         </label> 
        </div> 
        <div class="checkbox"> 
         <label for="avcc-1"> 
          <input type="checkbox" name="avcc[]" id="avcc-1" value="CC"> Complex Protection 
         </label> 
        </div> 
       </div> 
      </div> 

      <!-- Product Line --> 
      <div class="form-group"> 
       <label class="col-md-4 control-label" for="ostype">Operating System Platform</label> 
       <div class="col-md-4"> 
        <div id="treeview-checkbox"> 
         <ul> 
          <li>DSS 
           <ul> 
            <li data-value="DSS-WIN-OS">Windows</li> 
            <li data-value="DSS-LINUX-OS">Linux</li> 
           </ul> 
          </li> 
          <li>SSS 
           <ul> 
            <li data-value="SSS-WIN-OS">Windows</li> 
            <li data-value="SSS-LINUX-OS">Linux</li> 
           </ul> 
          </li> 
          <li>GSS 
           <ul> 
            <li data-value="GSS-WIN-OS">Windows</li> 
            <li data-value="GSS-LINUX-OS">Windows</li> 
           </ul> 
          </li> 
         </ul> 
        </div> 
       </div> 
      </div> 




      <div class="form-group"> 
       <label class="col-md-4 control-label" for="products[]">Product</label> 
       <div class="col-md-4"> 
        <div class="checkbox"> 
         <label for="products-0"> 
          <input type="checkbox" name="products[]" id="products-0" value="DSS">DSS 

         </label> 
        </div> 
        <div class="checkbox"> 
         <label for="products-1"> 
          <input type="checkbox" name="products[]" id="products-1" value="SSS">SSS 

         </label> 
        </div> 
        <div class="checkbox"> 
         <label for="products-2"> 
          <input type="checkbox" name="products[]" id="products-2" value="MSS"> MSS 

         </label> 
        </div> 
        <div class="checkbox"> 
         <label for="products-3"> 
          <input type="checkbox" name="products[]" id="products-3" value="GSS"> GSS 

         </label> 
        </div> 
        <div class="checkbox"> 
         <label for="products-4"> 
          <input type="checkbox" name="products[]" id="products-4" value="MoSS"> MoSS 

         </label> 
        </div> 
       </div> 
      </div> 

      <!-- Operating System --> 
      <div class="form-group"> 
       <label class="col-md-4 control-label" for="ostype">Operating System Platform</label> 
       <div class="col-md-4"> 
        <select id="ostype" name="ostype" class="form-control"> 
         <option value="win">Windows Platform</option> 
         <option value="linx">Linux Platform</option> 
         <option value="allos">Both Platform</option> 
        </select> 
       </div> 
      </div> 

      <!-- Button (Double) --> 
      <div class="form-group"> 
       <label class="col-md-4 control-label" for="generate">Confirm Slection</label> 
       <div class="col-md-8"> 
        <button id="generate" name="generate" class="btn btn-primary">Generate File</button> 
        <button id="clearselection" name="clearselection" class="btn btn-inverse">Reset Selection</button> 
       </div> 
      </div> 

     </fieldset> 
    </form> 

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <script src="js/jquery-treeview/logger.js"></script> 
    <script src="js/jquery-treeview/treeview.js"></script> 

    <script> 
     $('#treeview-checkbox').treeview({ 
      debug: true, 
      data: ['links', 'Do WHile loop'] 
     }); 
     $('#show-values').on('click', function() { 
      $('#values').text(
       $('#treeview-checkbox').treeview('selectedValues') 
      ); 
     }); 
    </script> 

</body> 

ответ

0

Я сделал несколько исправлений и получить ответы на два из трех ваших вопросов:

  1. Я не уверен, что лучший способ справиться с этим - только один метод - использовать javascript для установки атрибута имени при каждом флажке. Вы можете выбирать только флажки, где значение имеет дефис (т.е. -), чтобы исключить родительские узлы (т.е. DSS, SSS, ГСС). Я использовал обработчик щелчка ниже:

    $('#generate').on('click', function() { 
        var checkboxes = $('#treeview-checkbox input[type="checkbox"]'); 
        Array.prototype.forEach.call(checkboxes,function(checkbox) { 
        if (checkbox.value.indexOf('-') > -1 && checkbox.checked) { //only include checked child nodes 
         checkbox.name = 'platform[]'; 
        } 
        }); 
    }); 
    

    Кроме того, представляется, что данные свойство используется для предварительного выбора флажков:

    $('#treeview-checkbox').treeview({ debug: true, //use this for pre-selecting items: data: ['DSS-WIN-OS'] //have the DSS > Windows checkbox checked on page load

  2. Там могут быть некоторые конфигурации в TreeView для этого, или вы можете добавить обработчик обратного вызова ...

  3. Обновите атрибут type на кнопке сброса, чтобы иметь Значение сброса

    <button id="clearselection" name="clearselection" class="btn btn-inverse" type="reset">Reset Selection</button>

Вы можете увидеть это работает в this example plunker. Обратите внимание, что я изменил метод формы на GET, потому что у меня не может быть страницы с кодом на стороне сервера (например, PHP) в этой среде песочницы, но обработка полей формы должна быть похожа на метод POST - например, в PHP вы должны иметь доступ к $_POST['platforms'] как массив (предполагаемые значения были представлены).

+0

Perfect Integration, теперь я пытаюсь сделать Parent Node автоматически выбранным все чили узлы, а также пытается создать что-то, что позволит мне отключить некоторые чековые книжки на основе выбора переключателей. Спасибо большое – Ti2

Смежные вопросы