堆棧內存溢出
  簡體   English   中英

HTML表單提交POST和復選框treeview值

[英]HTML Form Submit POST and checkbox treeview Value

 原文  2016-11-15 19:14:46  4   1    php/ jquery/ html/ treeview

問題描述

我用包含一些選項的表單制作了一個HTML頁面，這些值通過POST發送到PHP頁面。

HTML包含帶有復選框和文本類型的常規表單輸入，然后我通過jQuery添加了具有樹視圖的復選框，但是當我單擊“ 提交”按鈕時，樹視圖復選框的值不會與POST數據一起發送。 為什么沒有發送數據？

  1. 如何獲得帶有表單數據的所有復選框值（即在POST數據中）？
  2. 如果用戶在樹形視圖中選擇了“父”復選框，那么我如何使其選擇所有子復選框，並且如果選中了一部分子復選框，則父復選框將變為正方形標記？
  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>

1 個解決方案

解決方案1
 0 已采納  2016-11-15 21:26:31

我已進行了一些更正，並針對您的三個問題中的兩個回答了：

  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[]'; } }); });

    同樣，似乎data屬性用於預選復選框：

    $('#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. 更新型的復位按鈕屬性有值復位

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

您可以在此示例代碼插件中看到此功能 。 請注意，我將form方法更改為GET，因為在該沙盒環境中無法使用包含服務器端代碼（例如PHP）的頁面，但是對表單字段的處理應類似於POST技術-例如，在PHP中，能夠以數組形式訪問$_POST['platforms'] （假定已提交值）。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 提交html表單上動態元素的復選框值 PHP HTML FORM CHECKBOX值的最大值-POST轉換為GET HTML表單不通過PHP文件中的$ _POST傳遞復選框值 html 表單不會提交 POST HTML在復選框中發布選定的值 HTML 表單，帶有多值復選框 通過via表單提交html表數據（post） 提交HTML表單后，$ _POST變量中沒有值 HTML表單提交按鈕未寫入$ _POST 使用POST提交按鈕而不是使用HTML表單
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM