移动而非桌面上的表单错误

Question

我在html表单中发现了一个无法调试的bug。我已经两次更改了表单的格式，但在这方面没有任何帮助。如果您想看看表单本身是如何位于http://driveforeagle.com/apply/page2/的

请注意，您将需要访问该链接，以便了解我所引用的内容以及对下面代码的引用。

The Bug

仅在移动设备上(设备类型之间不存在轻蔑)，当您进入“驾驶体验”部分时，两个小节“交通引证历史”和“驾照历史记录”；这两个部分中的输入字段不可点击，无法填写。就像有某种浮动部分，但我还无法确定这个浮动部分将从哪里来。

驾驶经验组

<article class='panel panel-danger'>
    <header class='panel-heading' role='tab' id='drivingExperienceHeading'>
        <h4 class='panel-title'>
            <a class='collapsed' role='button' data-toggle='collapse' data-parent='#panelMenu' href='#drivingExperience' aria-expanded='false' aria-controls='drivingExperience'> 
            Driving Experience
            </a>
            <span class='glyphicon glyphicon-remove pull-right'></span>
        </h4>
    </header>
    <div id='drivingExperience' class='panel-collapse collapse' role='tabpanel' aria-labelledby='drivingExperienceHeading'>
        <main class='panel-body'>
            <? require_once 'sections/driving_experience.php'; ?>
        </main>
    </div>
</article>

'sections/driving_experience.php' require_once

<article class='col-xs-12'>
<h5><strong>List all driving experience for the past 10 years</strong></h5>
</article>
<article class='col-xs-12'>
    <h4>Tractor Trailer Experience</h4>
</article>
<section class='clearfix'></section>
<article class='form-group col-md-3 col-sm-6 col-xs-12'>
    <label class='control-label req'>From</label>
    <input type='text' class='form-control addr-date' id='tt-from-date' name='tt-from-date' data-validator='notEmpty|isDateMMYYYY'/>
</article>
<article class='form-group col-md-3 col-sm-6 col-xs-12'>
    <label class='control-label req'>To</label>
    <input type='text' class='form-control addr-date' id='tt-to-date' name='tt-to-date' data-validator='notEmpty|isDateMMYYYY'/>
</article>
<article class='form-group col-md-3 col-sm-6 col-xs-12'>
    <label class='control-label req'>Approximate Miles</label>
    <input type='text' class='form-control' name='tt-miles' id='tt-miles' data-validator='notEmpty|isNumber'/>
</article>
<article class='col-xs-12'>
    <hr />
    <h4>Straight Truck Experience</h4>
</article>
<article class='form-group col-xs-12'>
    <section class='checkbox'>
        <label> 
            <input type="checkbox" name="st_exp"/> No Straight-Truck Experience
        </label>
    </section>
</article>
<article class='form-group col-md-3 col-sm-6 col-xs-12'>
    <label class='control-label req'>From</label>
    <input type='text' class='form-control addr-date' id='st-from-date' name='st-from-date' data-validator='notEmpty|isDateMMYYYY'/>
</article>
<article class='form-group col-md-3 col-sm-6 col-xs-12'>
    <label class='control-label req'>To</label>
    <input type='text' class='form-control addr-date' id='st-to-date' name='st-to-date' data-validator='notEmpty|isDateMMYYYY'/>
</article>
<article class='form-group col-md-3 col-sm-6 col-xs-12'>
    <label class='control-label req'>Approximate Miles</label>
    <input type='text' class='form-control not-empty' id='st-miles' name='st-miles' data-validator='notEmpty|isNumber'/>
</article>
<article class='col-xs-12'>
    <hr />
    <h4>Accident History</h4>
</article>
<article class='col-xs-12'>
    <h5><strong>List all accident records for the past 5 years regardless of fault.</strong></h5>
</article>
<article class='form-group col-xs-12'>
    <section class='checkbox'>
        <label> 
        <input type="checkbox" name="no_accidents" />No Accident History
        </label>
    </section>
</article>
<section id='accident-holder'>
    <article class='accident-form last'>
        <section class='form-group col-md-2 col-sm-6 col-xs-12'>
            <label class='control-label req'>Date</label>
            <input type='text' class='form-control addr-date accident-date' name='accident-date' data-validator='notEmpty|isDateUS'/>
        </section>
        <section class='form-group col-md-3 col-sm6 col-xs-12'>
            <label class='control-label req'>Nature</label>
            <input type='text' class='form-control nature' name="nature" data-validator='notEmpty'/>
        </section>
        <section class='form-group col-md-3 col-sm-6 col-xs-12'>
            <label class='control-label req'>Location</label>
            <input type='text' class='form-control location' name='location' data-validator='notEmpty'/>
        </section>
        <section class='form-group col-md-2 col-sm-6 col-xs-6'>
            <label class='control-label req'>No. of Fatalities</label>
            <input type='tel' class='form-control fatalities' name='fatalities' data-validator='notEmpty|isNumber'>
        </section>
        <section class='form-group col-md-2 col-sm-6 col-xs-6'>
            <label class='control-label req'>No. of Injuries</label>
            <input type='tel' class='form-control injuries' name='injuries' data-validator='notEmpty|isNumber'>
        </section>
    </article>
</section>
<section class='clearfix'></section>
<article class='form-group col-md-12'>
    <a href="" id="add_accident">Add Another Accident Record</a>
</article>
<!-- BEGIN TRAFFIC CITATION HISTORY -->
<article class='col-xs-12'>
    <hr />
    <h4>Traffic Citation History</h4>
</article>
<article class='col-xs-12'>
    <h5>
        <strong>List all traffic citations, convictions, supervision and forfeitures for the last 5 years (other than parking).</strong>
    </h5>
</article>
<article class='form-group col-xs-12'>
    <section class='checkbox'>
        <label> 
        <input type="checkbox" name="no_citations" />No Citations
        </label>
    </section>
</article>
<section id='traffic-holder'>
    <article class='traffic-citation-form last'>
        <section class='form-group col-md-3 col-sm-6 col-xs-12'>
            <label class='control-label req'>Location</label>
            <input type='text' class='form-control citation-location' name='citation-location' data-validator='notEmpty'/>
        </section>
        <section class='form-group col-md-3 col-sm-6 col-xs-12'>
            <label class='control-label req'>Date</label>
            <input type='text' class='form-control addr-date citation-date' name='citation-date' data-validator='notEmpty'/>
        </section>
        <section class='form-group col-md-3 col-sm-6 col-xs-12'>
            <label class='control-label req'>Charge</label>
            <input type='text' class='form-control charge' name='charge' data-validator='notEmpty'/>
        </section>
        <section class='form-group col-md-3 col-sm-6 col-xs-12'>
            <label class='control-label req'>Penalty</label>
            <input type='text' class='form-control penalty' name='penalty' data-validator='notEmpty'/>
        </section>
    </article>
</section>
<article class='col-md-12'>
    <a href="" id="add_citation">Add Another Traffic Citation Record</a>
</article>
    <!-- BEGIN DRIVER LICENSE HISTORY -->
<article class='col-xs-12'>
    <hr />
    <h4>Driver's License History</h4>
</article>
<article class='col-xs-12'>
    <h5>
        <strong>List every driver's license held in the past 3 years</strong>
    </h5>
</article>
<section id='license-holder'>
    <article class='license-form last'>
        <section class='form-group col-md-1 col-sm-3 col-xs-12'>
            <label class='control-label req'>State</label>
            <input type='text' class='form-control license_state' name='license_state' data-validator='notEmpty'/>
        </section>
        <section class='form-group col-md-3 col-sm-6 col-xs-12'>
            <label class='control-label req'>License No.</label>
            <input type='text' class='form-control license_no' name='license_no' data-validator='notEmpty'/>
        </section>
        <section class='form-group col-md-1 col-sm-3 col-xs-12'>
            <label class='control-label req'>Type</label>
            <input type='text' class='form-control license_type' name='license_type' data-validator='notEmpty'/>
        </section>
        <section class='form-group col-md-4 col-sm-6 col-xs-12'>
            <label class='control-label req'>Endorsements</label>
            <input type='text' class='form-control endorsements' name='endorsements' data-validator='notEmpty'/>
        </section>
        <section class='form-group col-md-3 col-sm-6 col-xs-12'>
            <label class='control-label req'>Exp. Date</label>
            <input type='text' class='form-control addr-date license_date' name='license_date' data-validator='notEmpty|isDateMMYYYY'/>
        </section>
    </article>
</section>
<section class='col-md-12'>
    <a href='' id='add_license'>Add Another Driver's License</a>
</section>
<section class='form-group col-xs-12'>
    <hr />
    <label class='control-label radio req'>
        A. Have you ever been denied a license, permit or privilege to operate a motor vehicle?
    </label>
    <label class='radio-inline'>
        <input type='radio' class="radio-check" name='qa' value='1' data-validator='groupNotEmpty'> Yes
    </label>
    <label class='radio-inline'>
        <input type='radio' class="radio-check" name='qa' value='-1'> No
    </label>
</section>
<section class='form-group col-xs-12'>
    <label class='control-label'>If "Yes" please explain:</label>
    <textarea rows='5' id='qa-explain'  name='qa_explain' class='form-control' readonly></textarea>
</section>
<section class='form-group col-xs-12'>  
    <label class='control-label radio req'>
        B. Has any license, permit or privilege ever been suspended or revoked?
    </label>
    <label class='radio-inline'>
        <input type='radio' class="radio-check" name='qb' value='1' data-validator='groupNotEmpty'> Yes
    </label>
    <label class='radio-inline'>
        <input type='radio' class="radio-check" name='qb' value='-1'> No
    </label>
</section>
<section class='form-group col-xs-12'>
    <label class='control-label'>If "Yes" please explain:</label>
    <textarea rows='5' id='qb-explain' name='qb_explain' class='form-control' readonly></textarea>
</section>
<section class='form-group col-xs-12'>
    <label class='control-label radio req'>
        C. Have you ever tested positive or refused a test, on any pre-employment drug or alchohol test administered by an employer to which you applied, but did not obtain safety-sensitive transportation work covered by DOT agency drug and alcohol testing rules during the past two years?
    </label>
    <label class='radio-inline'>
        <input type='radio' class="radio-check" name='qc' value='1' data-validator='groupNotEmpty'> Yes
    </label>
    <label class='radio-inline'>
        <input type='radio' class="radio-check" name='qc' value='-1'> No
    </label>
</section>
<section class='form-group col-xs-12'>
    <label class='control-label radio'>
        If "Yes", can you provide documentation that you successfully passed then returned to work?
    </label>
    <label class='radio-inline'>
        <input type='radio' class='' name='qc_explain' value='1' disabled> Yes
    </label>
    <label class='radio-inline'>
        <input type='radio' class='' name='qc_explain' value='-1' disabled> No
    </label>
</section>
<section class='col-xs-12 form-group'>
    <label class='control-label radio'>
        D. Have you ever been denied access to the mail, or had your postal badge revoked?<span class='req'> *</span>
    </label>
    <label class='radio-inline'>
        <input type='radio' class="radio-check" name='qd' value='1' data-validator='groupNotEmpty'> Yes
    </label>
    <label class='radio-inline'>
        <input type='radio' class="radio-check" name='qd' value='-1'> No
    </label>
</section>
<section class='clearfix'></section>

我对第二个文件的长度表示歉意，但我添加了整个部分，以确保所有的代码都在那里进行分析。同样，我也没有发现表单本身有什么异常，我找不到任何缺失的标签、未关闭的标签或类似的东西，所以这也没有什么意义。

另外，我也使用一些javascript来操作表单，因为用户可以添加另一条信息，所以它复制表单。我不确定这对它是否有影响，但是一开始不存在克隆形式，所以我假设它没有，我会把它包括进去，以供完成。

Javascript样本

 //generate an object of data to consolidate the amount of further coding needed

var multisections = {
'address' : [
    "#add_address",
    "#address-holder",
    ".address-form"
],
'employment' : [
    "#add_employment",
    "#employment-holder",
    ".employment-form"
],
'accident' : [
    "#add_accident",
    "#accident-holder",
    ".accident-form"
],
'citation' : [
    "#add_citation",
    "#traffic-holder",
    ".traffic-citation-form"
],
'license' : [
    "#add_license",
    "#license-holder",
    ".license-form"
]
};


$.each(multisections, function(i, e){
   $(e[0]).on('click', function(event){
    event.preventDefault();
    var parentEl = $(e[1]);
    var lastForm = $.makeArray($(parentEl).find('.last'));  

    var currF = $(lastForm).find('input[name*="fmscr_"]:checked').val();
    var currD = $(lastForm).find('input[name*="drug_testing_"]:checked').val();
    var lastFmscr = $(lastForm).find('input[name*="fmscr_"]').attr('name');
    var lastDrug = $(lastForm).find('input[name*="drug_testing_"]').attr('name');
    var newForm = $(lastForm).clone(true);
    $(newForm).addClass('last replica');
    $(newForm).find('.delete-record').remove();
    $(newForm).prepend('<div class="col-xs-12"><button class="delete-record btn btn-warning pull-right" value="delete">&times</button></div>');
    $(newForm).insertAfter(lastForm);
    $(lastForm).removeClass('last');   
    var i;
   if(e[1] == "#employment_history"){ 

        i = lastFmscr.substr(lastFmscr.length -1); //get the current count
        i = parseInt(i); //turn it to an int
        i++; //increase the count          
        $(newForm).find('input[name="fmscr_'+(i-1)+'"]').attr('name', 'fmscr_'+i);
        $(newForm).find('input[name="drug_testing_'+(i-1)+'"]').attr('name', 'drug_testing_'+i);

    }
    $(newForm).find('input:not([type=radio]), select').val("");
    $(lastForm).find('input[name*="fmscr_"][value='+currF+']').prop('checked', true);
    $(lastForm).find('input[name*="drug_testing_"][value='+currD+']').prop('checked', true);   
    $(newForm).find('input[name="fmscr_'+i+'"]').prop('checked', false);
    $(newForm).find('input[name="drug_testing_'+i+'"]').prop('checked', false);
    newForm.find('.addr-date').each(function(){
        $(this).removeAttr('id').removeClass('hasDatepicker');
        $('.addr-date').datepicker({
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            dateFormat: 'mm/yy',
            onClose: function(dateText, inst) { 
                var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                $(this).datepicker('setDate', new Date(year, month, 1));
                validator('#applicationForm');
                checkHeadings();
            }
        });

    });
    validator('#applicationForm');
    checkHeadings();
});
$(e[2]).on('click', '.delete-record', function(event){
    event.preventDefault();
    $(this).closest(e[2]).prev().addClass('last')
    $(this).closest('.replica').remove();
    validator('#applicationForm');
    checkHeadings();
});
});

如果有任何其他的人希望看到更多关于代码，请让我知道，我会尽快给你！提前感谢您的帮助和帮助。

Answer 1

你之前错过了一个<section class="clearfix"></section>

<article class="col-md-12"> <a href="" id="add_citation">Add Another Traffic Citation Record</a> </article>

部分，与以前一样

<section class="col-md-12"> <a href="" id="add_license">Add Another Driver's License</a> </section>

使用Firebug或类似的方法，右键单击不可点击的输入字段和“检查元素”，它会将您带到错误元素，即覆盖表单整个部分的链接。

这个事业需要更多的研究..。据我所知，问题是，所有的col-*-*东西都是float: left;，所以它们不会使容器变大，高度保持在0。包含添加交通引文或驾驶执照链接的<article>元素也是大屏幕上的float: left;，但不会在较小的屏幕上浮动。

不能100%确定这一点，但由于它不是浮点数，所以它至少需要和前面放置的元素一样大，并且涵盖前面的部分(代码后面的元素将覆盖前面的元素)。浮标通常需要清理，以避免奇怪的东西..。