Question

我在用纯JavaScript和php构建动态粘性表单时遇到了麻烦。我希望表单中存在某些字段，并允许添加其他字段。我的问题在于这样一个事实，即检查表单何时发布或有错误的结构似乎是错误的。

如果表单的字段不完整，并且用户单击添加其他字段，则在单击“提交”后，新字段将不会显示。

有人可以建议我实施的结构吗？我的问题

代码如下：

    <fieldset id="policeFieldset">
            <legend>Police Details</legend>
            <div>
                <label for="policeService">What police service is your complaint about?<em>*</em></label><br>
                <input name="policeService" type="text" id="policeService"  class="form-control" aria-required="true" required="" />
            </div>
            <div>
                <label for="officersStation">What police station/division/detachment does the officer(s) work at? (If known)</label><br>
                <input name="officersStation" type="text" id="officersStation"class="form-control" />
            </div>
            <p>If your complaint is about a specific officer(s), please give us any details you might have about the police officer(s)</p>
        <div class="officerContainer">
        <?php

        $officerCount = count($_POST['officerName']);


        for($i = 0; $i < $officerCount; $i++)
        {   
            array_push($specOfficerName, "");
            array_push($specOfficerRank, "");
            array_push($specOfficerBadge, "");
            array_push($specOfficerOther, "");

            echo "<fieldset class='officer' id='officer" . ($i + 1) . "'  style='border: none; border-top: 1px solid gray;'>";
            echo "<legend style='background: lightblue; float: left; clear: both'>Officer &#35;" . ($i + 1) . "</legend>";
            echo "<div style='clear: both'>";
                echo "<label style='display:inline-block; margin-top: 20px;' for='officerName" . $i . "'>Name</label>";
                echo "<input style='display: block; margin-top: 10px;' name='officerName[" . $i . "]'  type='text' id='officerName" . $i . "' maxlength=38 value='" . $specOfficerName[$i] ."'>";
            echo "</div>";
            echo "<div class='rankbadgerow'>";
                echo "<div>";
                    echo "<label for='officerRank" . $i . "'>Rank</label>";
                    echo "<input style='display:block; margin-top: 10px;' name='officerRank[" . $i . "]'  type='text' id='officerRank" . $i . " maxlength=38 value='" .  $specOfficerRank[$i] ."'>\n";
                echo "</div>";
                echo "<div>";
                    echo "<label for='officerBadge" . $i . "'>Badge</label>";
                    echo "<input style='display:block; margin-top: 10px;' name='officerBadge[" . $i . "]'  type='text' id='officerBadge" . $i . " maxlength=38 value='" . $specOfficerBadge[$i] . "'>\n";
                echo "</div>";
            echo "</div>\n";
            echo "<div class='otherident'>\n";
                echo "<label for='officerOther" . $i . "'>Any other identifier (e.g. age, height)</label>\n";
                echo "<input style='display:block; margin-top: 10px;' name='officerOther[" . $i . "]'  type='text' id='officerOther" . $i . " maxlength=38 value='" . $specOfficerOther[$i] . "'>\n";
            echo "</div>\n";
            echo "</fieldset>\n";
        }
        ?>
        </div>
        <div>
        <div class="add-officer" style="display: block; float: left; clear: both">
            <button id="add-officer-button" type='button'>Add Officer</button>
        </div>
        <div class="remove-officer" style="display: none; float: left; clear: both">
            <button id="remove-officer-button" type='button'>Remove Officer</button>
        </div>          
        </div>
    </fieldset>



 <script>
        document.querySelector('#select').addEventListener('change', showIncident);
        document.querySelector('#add-officer-button').addEventListener('click', addOfficer);
        var removeOfficerButton =   document.querySelector('#remove-officer-button').addEventListener('click', removeOfficer);
        var officerContainer = document.querySelector('.officerContainer');

    function addOfficer(ev)
        {
            ev.preventDefault();

            var currentFieldsetsCount = officerContainer.querySelectorAll('fieldset').length;
            //alert(currentInputCount);
            // return;

            console.log("fieldset count = " + currentFieldsetsCount);
            if(currentFieldsetsCount >= 6){
                return;
            }



            var newFieldset = mainFieldset.cloneNode(true);
            officerContainer.appendChild(newFieldset);
            newFieldset.querySelector('legend').innerText = 'Officer #' + (currentFieldsetsCount+1);
            var labels = newFieldset.querySelectorAll('label');
            var inputs = newFieldset.querySelectorAll('input');

            for(var i = 0; i< labels.length; i++){
                var newId = inputs[i].id.replace(/\d/, currentFieldsetsCount)
                console.log("New id is " + newId);
                inputs[i].setAttribute('id', newId);
                inputs[i].value = '';
                labels[i].setAttribute('for', newId);
            }

            currentFieldsetsCount++;
            console.log(currentFieldsetsCount);


            if(currentFieldsetsCount > 6){
                document.querySelector('.add-officer').style.display = 'none';
            }
        }
</script>

如何使用纯JavaScript和PHP

0 个答案: