HTML表单提交POST和复选框树视图值

时间:2016-11-15 19:14:47

标签: php jquery html treeview

我创建了一个包含一些选项的表单的HTML页面,这些值通过POST发送到PHP页面。

HTML包含带有复选框和文本类型的常用表单输入,然后我通过jQuery添加了带有treeview的复选框,但是当我单击提交按钮时,树视图复选框的值不会随着发布数据。为什么这些数据没有被发送?

  1. 如何获取表单数据的所有复选框值(即在POST数据中)?
  2. 如果用户在树视图中选择父复选框,如何选中所有子复选框,如果选中子复选框的一小部分,则父复选框将获得方括号?
  3. 如果用户点击重置表单按钮,是否可以使表单清除所有选中的复选框(包括树视图控件中的复选框)?
  4. 有人可以解释错误或如何更正以下内容:

    <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>
    

1 个答案:

答案 0 :(得分:0)

我做了一些更正,并回答了三个问题中的两个问题:

  1. 我不确定处理此问题的最佳方法是一种方法是使用javascript在每个复选框上设置name属性。您只能过滤到具有连字符(即 - )的复选框,以排除父节点(即 DSS SSS GSS )。我使用了下面的点击处理程序:

    $('#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. 树视图中可能有一些配置,或者您可以添加回调处理程序...

  3. 更新重置按钮上的type属性,使其值重置

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

  4. 您可以在this example plunker中看到这一点。请注意,我将表单方法更改为GET,因为我在该沙箱环境中没有包含服务器端代码(例如PHP)的页面,但表单字段的处理应与POST技术类似 - 例如在PHP中,您应该能够以数组的形式访问$_POST['platforms'](假设值已提交)。