我的问题是,当我按下“选择”上的“下一步”按钮时,该选择显示为无效,但随后不执行onchange功能。因此不可能继续下去。您能帮我为什么吗?
更新: 如果我首先将select更改为带有值的选项,则一切正常。您可以here看到它。
简单前进,当选择出现时,不输入任何内容,然后单击“继续”。欧芹会说它无效,您必须选择一些东西。但是,当我选择某些内容时,onchange事件不会向我显示隐藏的字段。
没有香菜,一切正常。因此,问题在于在进行香菜验证后,偶然事件不再触发。有提示吗?
选择HTML
<h4 class="text-uppercase">Ihr genehmigter Vertrag wartet auf Sie:</h4>
<p class="text-left">Sie bestimmen wie Sie Ihren Vertrag erhalten möchten.</p>
<div class="single-element-widget mt-30">
<div class="default-select">
<select class="form-control border" id="bezahlart" name="bezahlart" required onchange="formupdate();" style="width: 100%;white-space: normal;">
<option value="">Wie möchten Sie Ihren Vertrag bekommen ?</option>
<option value="NN1">Vertrag - per Nachname - nur Deutschland</option>
<option value="Transfer1">Vertrag - nach Überweisung (Kontodaten per E-Mail)</option>
<option value="Transfer2">Vertrag - nach Überweisung (Kontodaten per SMS)</option>
<option value="Pick1">Vertrag - selbst in Zürich abholen</option>
</select>
</div>
</div>
<div class="col-12 pt-3" id="NN" style="display: none;">
<p class="text-danger"><i class="fas fa-exclamation-circle"></i> WICHTIG: Nachnahme wird nur für Kunden angeboten, welche ihren Wohnsitz in Deutschland haben.</p>
<p class="text-success" id="NachnahmeDE"><i class="fas fa-exclamation-circle"></i> Bitte geben Sie an zu wann Sie Ihren Vertrag erhalten wollen.</p>
<input type="text" id="cashondelivery" name="cashondelivery" class="form-control text-center" placeholder="tt.mm.jjjj" pattern="(0[1-9]|1[0-9]|2[0-9]|3[01]).(0[1-9]|1[012]).[0-9]{4}"/>
</div>
JS PARSLEY
<script type="text/javascript">
$('.form-signin').parsley();
$(function () {
var $sections = $('.form-section');
console.log($('.form-section').index());
function navigateTo(index) {
// Mark the current section with the class 'current'
$sections
.removeClass('current')
.eq(index)
.addClass('current');
// Show only the navigation buttons that make sense for the current section:
$('.form-navigation .previous').toggle(index > 0);
var atTheEnd = index >= $sections.length - 1;
$('.form-navigation .next').toggle(!atTheEnd);
$('.form-navigation [type=submit]').toggle(atTheEnd);
}
function curIndex() {
// Return the current index by looking at which section has the class 'current'
return $sections.index($sections.filter('.current'));
}
// Previous button is easy, just go back
$('.form-navigation .previous').click(function () {
navigateTo(curIndex() - 1);
});
// Next button goes forward iff current block validates
$('.form-navigation .next').click(function () {
$('#pathOne').removeClass('active');
$('#pathTwo').addClass('active');
$('.form-signin').parsley().whenValidate({
group: 'block-' + curIndex()
}).done(function () {
navigateTo(curIndex() + 1);
});
});
// Prepare sections by setting the `data-parsley-group` attribute to 'block-0', 'block-1', etc.
$sections.each(function (index, section) {
$(section).find(':input').attr('data-parsley-group', 'block-' + index);
});
navigateTo(0); // Start at the beginning
});
更改功能
function formupdate() {
var selectedPackage = document.getElementById("bezahlart").value;
if ( selectedPackage == 'NN1' ) {
document.getElementById('NN').style.display = "block";
document.getElementById('Transfer_mail').style.display = "none";
document.getElementById('Transfer_phone').style.display = "none";
document.getElementById('Pick').style.display = "none";
document.getElementById("cashondelivery").setAttribute("required","");
document.getElementById("advancepayment_mail").removeAttribute("required","");
document.getElementById("advancepayment_phone").removeAttribute("required","");
document.getElementById("pickuptime").removeAttribute("required","");
document.getElementById("pickup").removeAttribute("required","");
//Empty values they dont use
document.getElementById('advancepayment_mail').value = "";
document.getElementById('advancepayment_phone').value = "";
document.getElementById('pickuptime').value = "";
document.getElementById('pickup').value = "";
}
}