У меня есть многошаговая форма, и я хочу скрыть два поля на следующей вкладке после нажатия кнопки ДА . Позвольте мне объяснить, все работает нормально, но проблема в том, когда мы нажимаем YES кнопка показывает следующие два поля для заполнения, что очень важно (какой тип питомца и вес), когда мы нажимаем кнопку Next , это также отображается на следующей вкладке. Я хочу скрыть эти два поля в следующей вкладке и каждой вкладке в последовательности. Спасибо
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab
function showTab(n) {
// This function will display the specified tab of the form...
var x = document.getElementsByClassName("form_field_wrap");
if (x && x[n]) {
x[n].style.display = "block"; //checking for undefined
}
//... and fix the Previous/Next buttons:
var prevBtn = document.getElementById("prevBtn");
if (prevBtn) {
if (n == 0) {
prevBtn.disabled = true; //Checking for undefined
} else {
prevBtn.disabled = false;
prevBtn.style.display = "inline";
}
}
var nextBtn = document.getElementById("nextBtn");
if (nextBtn) {
if (n == (x.length - 1)) {
//nextBtn.style.display = "none";
nextBtn.innerHTML = "Submit";
} else {
//nextBtn.style.display = "inline";
nextBtn.innerHTML = "Next";
//document.body.scrollTop = document.documentElement.scrollTop = 0;
}
}
fixStepIndicator(n)
}
function nextPrev(n) {
// This function will figure out which tab to display
var x = document.getElementsByClassName("form_field_wrap");
// Exit the function if any field in the current tab is invalid:
if (n == 1 && !validateForm())
return false;
// Hide the current tab:
if (x && x[currentTab] ) {
x[currentTab].style.display = "none";
}
// Increase or decrease the current tab by 1:
currentTab = currentTab + n;
// if you have reached the end of the form...
if (currentTab >= x.length) {
// ... the form gets submitted:
document.getElementById("LMregForm").submit();
return false;
}
// Otherwise, display the correct tab:
showTab(currentTab);
}
function validateForm() {
// This function deals with validation of the form fields
var x, y, i, valid = true;
x = document.getElementsByClassName("form_field_wrap");
y = x[currentTab].getElementsByTagName("input");
// A loop that checks every input field in the current tab:
for (i = 0; i < y.length; i++) {
// If a field is empty...
if (y[i].value == "") {
// add an "invalid" class to the field:
y[i].className += " invalid";
// and set the current valid status to false
valid = false;
}
}
// If the valid status is true, mark the step as finished and valid:
if (valid) {
document.getElementsByClassName("form_field_wrap")[currentTab].className += " hide";
}
return valid; // return the valid status
}
function fixStepIndicator(n) {
var x = document.getElementsByClassName("form_field_wrap");
for (var i = 0; i < x.length; i++) {
x[i].className = x[i].className.replace(" show", "");
}
if (x && x[n]) {
x[n].className += " show";
}
}
function ShowHideDiv() {
var chkYes = document.getElementById("yes");
var chkNo = document.getElementById("no");
var showcontent = document.getElementById("pets_yes");
if (currentTab=='3' && chkNo.checked) {
showcontent.style.display = "none";
}else{
showcontent.style.display = "block";
}
}
Здесь HTML
<div class="form_field_wrap">
<label>Do You Have Any Pets?</label>
<div class="row booking-form pt-5 mt-4">
<div class="col-sm-6">
<p class="d-flex"><input type="radio" id="yes" name="pets" value="Yes" onclick="ShowHideDiv()">Yes</p>
</div>
<div class="col-sm-6">
<p class="d-flex"><input type="radio" id="no" name="pets" value="No" onclick="ShowHideDiv()">No</p>
</div>
</div>
</div>
<div class="form_field_wrap1 py-y mb-5" id="pets_yes" style="display:none">
<div class="">
<label>What type of pet</label><p><input type="text" name="pet_type" required placeholder="Type"></p>
<label>Pet Weight</label><p><input type="text" name="weight" required placeholder="Weight"></p>
</div>
</div>
<div class="form_field_wrap">
<h4>Contact Information</h4>
<div class="row booking-form contact-info">
<div class="col-lg-6 col-md-6 col-sm-12">
<label>First Name</label>
<p><input type="text" name="first_name" required placeholder="First Name" ></p>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<label>Last Name</label>
<p><input type="text" name="last_name" required placeholder="Last Name" ></p>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<label>Address</label>
<p><input type="text" name="address" required placeholder="Address" ></p>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<label>City</label>
<p><input type="text" name="city" required placeholder="City" ></p>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<label>State</label>
<p><input type="text" name="state" required placeholder="State" ></p>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<label>Zip</label>
<p><input type="number" name="zip" required placeholder="Zip" ></p>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<label>Day Phone</label>
<p><input type="tel" name="day_phone" required placeholder="Day Phone" ></p>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<label>Cell Phone</label>
<p><input type="tel" name="cell_phone" required placeholder="Cell Phone" ></p>
</div>
<div class="col-sm-12 mb-5">
<label>Email Address</label>
<p><input type="email" name="email" required placeholder="Email Address" ></p>
</div>
</div>
</div>
