I have found a bug with my html form that I can't debug. I have changed the formatting of the form twice, but nothing has helped on that aspect. If you would like to see how the form itself it is located at http://driveforeagle.com/apply/page2/
Please note that you will need to visit the link in order to understand what I am referencing along with references to my code below.
The Bug
On mobile devices only (no disparagement between device types), when you go down to the "Driving Experience" section, the two subsections "Traffic Citation History" and "Driver's License History"; the input fields within these two subsection are not clickable and are unable to be filled out. Almost like there is some kind of floating section, but I have not been able to locate where this floating section would be coming from.
Driving Experience Section
<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>
require_once 'sections/driving_experience.php'
<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>
My apologies for the length of the second file but I added the entirety of the section in order to make sure all the code was there for analysis. Again I find nothing abnormal about the form itself, I can't find any missing tags, unclosed tags, or anything like that, so again this just isn't making much sense.
On another note I also do use some javascript to manipulate the forms as well because the user can add another piece of information, so it clones the form. I'm not sure if that has some effect on it either, however no cloned forms exist at the start so I'm assuming it doesn't. I will include it for completion anyway.
Javascript Sample
//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">×</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();
});
});
If there is anything else that anyone would like to see further regarding the code please let me know and I will get it to you as soon as possible! Thank you ahead of time for all and any assistance.
答案 0 :(得分：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％确定这一点，但由于它不是浮点数，它需要至少与之前放置的元素一样大，并且它涵盖了前一部分（代码中稍后出现的元素）将涵盖前面的要素）。浮标通常需要清理，以避免奇怪的事情......