У меня есть следующая и предыдущая кнопка в форме шага в css и js.
Кнопка работает безупречно в Chrome и Opera.
По неизвестной причине она не работает в Mozilla Firefox.
Код кнопки:
<div style="overflow:auto;">
<div style="float:right;">
<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
</div>
</div>
Живой URL-адрес формы ЗДЕСЬ
Я использовал этот пример кода для создания моей формы.
Я не понимаю, почему следующая кнопка не работает, хотя я использовал точный формат в примере.
Следующая кнопка работает, например, после ввода сведений, но не в моем коде.
Вот мой полный HTML-код, использованный в приведенном выше примере.
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<style>
* {
box-sizing: border-box;
}
body {
background-color: #f1f1f1;
}
#regForm {
background-color: #ffffff;
margin: 100px auto;
font-family: Raleway;
padding: 40px;
width: 70%;
min-width: 300px;
}
h1 {
text-align: center;
}
input {
padding: 10px;
width: 100%;
font-size: 17px;
font-family: Raleway;
border: 1px solid #aaaaaa;
}
/* Mark input boxes that gets an error on validation: */
input.invalid {
background-color: #ffdddd;
}
/* Hide all steps by default: */
.tab {
display: none;
}
button {
background-color: #4CAF50;
color: #ffffff;
border: none;
padding: 10px 20px;
font-size: 17px;
font-family: Raleway;
cursor: pointer;
}
button:hover {
opacity: 0.8;
}
#prevBtn {
background-color: #bbbbbb;
}
/* Make circles that indicate the steps of the form: */
.step {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbbbbb;
border: none;
border-radius: 50%;
display: inline-block;
opacity: 0.5;
}
.step.active {
opacity: 1;
}
/* Mark the steps that are finished and valid: */
.step.finish {
background-color: #4CAF50;
}
</style>
<body>
<!-- One "tab" for each step in the form: -->
<div class="tab w3-margin-bottom">
<h3>Pick a Service:</h3>
<form id="reservationForm" method="POST" action="/booking/" onsubmit="return false">
<div class="w3-container">
<div class="w3-row">
<div class="w3-bar">
<button type="button" class="w3-bar-item w3-button w3-black " style="width:100%" id="service1" onclick="onServicesClicked(event, 'service1');">
<i class="fa fa-moon-o w3-text-cyan"></i>
<br>
<span><strong>Dog Boarding</strong></span>
<br>
<span><small>Overnight Stay</small></span>
</button>
<input type="hidden" name="name" id="name" value="dog-boarding">
</div>
</div>
<div class="w3-card w3-container w3-margin-top">
<div class="w3-row-padding">
<div class="w3-quarter">
<p>
<label><b>When would you like to Dropoff</b></label>
<input id="start_date" class="w3-input w3-border w3-margin-bottom hasDatepicker" type="text" name="start_date" required="" onchange="setStartDate(this)" min="2019-06-28">
</p>
</div>
<div class="w3-quarter">
<p>
<label><b>At what time</b></label>
<select id="start_time" class="w3-input w3-select w3-border" name="start_time" style=" height:38px;" onchange="checkStartWorkingHour(this)">
<option value="7:00 AM">7:00 AM</option>
<option value="7:30 AM">7:30 AM</option>
<option value="8:00 AM">8:00 AM</option>
<option value="8:30 AM">8:30 AM</option>
<option value="9:00 AM">9:00 AM</option>
<option value="9:30 AM">9:30 AM</option>
<option value="10:00 AM">10:00 AM</option>
<option value="10:30 AM">10:30 AM</option>
<option value="11:00 AM">11:00 AM</option>
<option value="11:30 AM">11:30 AM</option>
<option value="12:00 PM">12:00 PM</option>
<option value="12:30 PM">12:30 PM</option>
<option value="1:00 PM">1:00 PM</option>
<option value="1:30 PM">1:30 PM</option>
<option value="2:00 PM">2:00 PM</option>
<option value="2:30 PM">2:30 PM</option>
<option value="3:00 PM">3:00 PM</option>
<option value="3:30 PM">3:30 PM</option>
<option value="4:00 PM">4:00 PM</option>
<option value="4:30 PM">4:30 PM</option>
<option value="5:00 PM">5:00 PM</option>
<option value="5:30 PM">5:30 PM</option>
<option value="6:00 PM">6:00 PM</option>
<option value="6:30 PM">6:30 PM</option>
<option value="7:00 PM">7:00 PM</option>
<option value="7:30 PM">7:30 PM</option>
<option value="8:00 PM">8:00 PM</option>
<option value="8:30 PM">8:30 PM</option>
<option value="9:00 PM">9:00 PM</option>
<option value="9:30 PM">9:30 PM</option>
<option value="10:00 PM">10:00 PM</option>
</select>
</p>
</div>
<div id="service1_div" style="display: block;">
<div class="w3-quarter">
<p>
<label><b>When would you like to Pickup</b></label>
<input class="w3-input w3-border w3-margin-bottom hasDatepicker" type="text" name="end_date" onchange="setEndDate(this)" id="end_date" min="2019-06-28">
</p>
</div>
<div class="w3-quarter">
<p>
<label><b>At what time</b></label>
<select id="end_time1" class="w3-input w3-select w3-border" name="end_time1" style=" height:38px;" onchange="checkEndWorkingHour(this)">
<option value="7:00 AM">7:00 AM</option>
<option value="7:30 AM">7:30 AM</option>
<option value="8:00 AM">8:00 AM</option>
<option value="8:30 AM">8:30 AM</option>
<option value="9:00 AM">9:00 AM</option>
<option value="9:30 AM">9:30 AM</option>
<option value="10:00 AM">10:00 AM</option>
<option value="10:30 AM">10:30 AM</option>
<option value="11:00 AM">11:00 AM</option>
<option value="11:30 AM">11:30 AM</option>
<option value="12:00 PM">12:00 PM</option>
<option value="12:30 PM">12:30 PM</option>
<option value="1:00 PM">1:00 PM</option>
<option value="1:30 PM">1:30 PM</option>
<option value="2:00 PM">2:00 PM</option>
<option value="2:30 PM">2:30 PM</option>
<option value="3:00 PM">3:00 PM</option>
<option value="3:30 PM">3:30 PM</option>
<option value="4:00 PM">4:00 PM</option>
<option value="4:30 PM">4:30 PM</option>
<option value="5:00 PM">5:00 PM</option>
<option value="5:30 PM">5:30 PM</option>
<option value="6:00 PM">6:00 PM</option>
<option value="6:30 PM">6:30 PM</option>
<option value="7:00 PM">7:00 PM</option>
<option value="7:30 PM">7:30 PM</option>
<option value="8:00 PM">8:00 PM</option>
<option value="8:30 PM">8:30 PM</option>
<option value="9:00 PM">9:00 PM</option>
<option value="9:30 PM">9:30 PM</option>
<option value="10:00 PM">10:00 PM</option>
</select>
</p>
</div>
</div>
<div id="service2_div" style="display: none;">
<div class="w3-third">
<p>
<label><b>Time you will Pickup your dogs?</b></label>
<select id="end_time2" class="w3-input w3-select w3-border" name="end_time2" style=" height:38px;" onchange="checkStartWorkingHour(this)">
<option value="7:00 AM">7:00 AM</option>
<option value="7:30 AM">7:30 AM</option>
<option value="8:00 AM">8:00 AM</option>
<option value="8:30 AM">8:30 AM</option>
<option value="9:00 AM">9:00 AM</option>
<option value="9:30 AM">9:30 AM</option>
<option value="10:00 AM">10:00 AM</option>
<option value="10:30 AM">10:30 AM</option>
<option value="11:00 AM">11:00 AM</option>
<option value="11:30 AM">11:30 AM</option>
<option value="12:00 PM">12:00 PM</option>
<option value="12:30 PM">12:30 PM</option>
<option value="1:00 PM">1:00 PM</option>
<option value="1:30 PM">1:30 PM</option>
<option value="2:00 PM">2:00 PM</option>
<option value="2:30 PM">2:30 PM</option>
<option value="3:00 PM">3:00 PM</option>
<option value="3:30 PM">3:30 PM</option>
<option value="4:00 PM">4:00 PM</option>
<option value="4:30 PM">4:30 PM</option>
<option value="5:00 PM">5:00 PM</option>
<option value="5:30 PM">5:30 PM</option>
<option value="6:00 PM">6:00 PM</option>
<option value="6:30 PM">6:30 PM</option>
<option value="7:00 PM">7:00 PM</option>
<option value="7:30 PM">7:30 PM</option>
<option value="8:00 PM">8:00 PM</option>
<option value="8:30 PM">8:30 PM</option>
<option value="9:00 PM">9:00 PM</option>
<option value="9:30 PM">9:30 PM</option>
<option value="10:00 PM">10:00 PM</option>
</select>
</p>
</div>
</div>
<div id="service34_div" style="display: none;">
<div class="w3-third">
<p>
<label><b>Where should I Pickup your dog(s)?</b></label>
<input class="w3-input" type="text" name="start_address1" id="start_address1" value="" placeholder="Enter a location" autocomplete="off">
</p>
</div>
<div class="w3-third">
<p>
<label><b>Any special instructions?</b></label>
<textarea class="w3-input w3-select w3-border" id="d_walk_notes" name="d_walk_notes" rows="5" cols="15" placeholder="How do I get in the house? Will you be home? Etc..."> </textarea>
</p>
</div>
</div>
</div>
</div>
<div id="service12_div" class="w3-card-4 w3-container w3-margin-top" style="display: block;">
<div class="w3-row-padding w3-margin-bottom">
<div class="w3-half">
<p>
<label><b>Need ME to Pickup your dogs?</b></label>
</p>
<input class="w3-radio w3-input" type="radio" name="dog_pickup" value="1" onclick="onRadioClicked('pickup_yes')">
<label>Yes</label>
<input class="w3-radio w3-input" type="radio" name="dog_pickup" value="0" checked="" onclick="onRadioClicked('pickup_no')">
<label>No</label>
<div id="dog_pickup_yes_div" style="display: none;">
<label><b>Enter Pickup Address:</b></label>
<input class="w3-input" type="text" name="start_address2" id="start_address2" value="" placeholder="Enter a location" autocomplete="off">
</div>
</div>
<div class="w3-half">
<p>
<label><b>Need ME to Dropoff your dogs?</b></label>
</p>
<input class="w3-radio w3-input" type="radio" name="dog_dropoff" value="1" onclick="onRadioClicked('drop_yes')">
<label>Yes</label>
<input class="w3-radio w3-input" type="radio" name="dog_dropoff" value="0" checked="" onclick="onRadioClicked('drop_no')">
<label>No</label>
<div id="dog_dropoff_yes_div" style="display: none;">
<label><b>Enter Dropoff Address:</b></label>
<input class="w3-input" type="text" name="end_address" id="end_address" value="" placeholder="Enter a location" autocomplete="off">
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="tab w3-margin-bottom">
<h3>Dogs Information:</h3>
<form id="dogsForm" method="POST" action="/booking/" onsubmit="return false">
<div class="w3-container">
<div id="" class="w3-row">
<div class="w3-row-padding">
<div class="w3-quarter">
<p>
<label><b>Name</b></label>
<input id="dog_name" class="w3-input w3-border w3-margin-bottom" type="text" name="dog_name">
</p>
</div>
<div class="w3-quarter">
<p>
<label><b>Age</b></label>
<input id="dog_age" class="w3-input w3-border w3-margin-bottom" type="number" name="dog_age" style="height:38px">
</p>
</div>
<div class="w3-quarter">
<p>
<label><b>Size in (LBS)</b></label>
<select id="dog_size" class="w3-input w3-select w3-border" name="dog_size" style=" height:38px;">
<option value="small">Small (0-40)</option>
<option value="large">Large (40+)</option>
</select>
</p>
</div>
<div class="w3-quarter">
<p>
<label><b> </b></label>
<button class="w3-input w3-bar-item w3-button w3-small w3-blue" style="width:50%" id="dog6" onclick="addRowToTable(event);">
<i class="fa fa-plus w3-margin-right"></i>
<span><strong>Add</strong></span>
</button>
</p>
</div>
</div>
</div>
<div id="" class="w3-row">
<div class="table-responsive">
<table id="dog_table" class="wp-list-table tables">
<tbody>
<tr class="w3-black">
<th class="manage-column ss-list-width">Name</th>
<th class="manage-column ss-list-width">Age</th>
<th class="manage-column ss-list-width">Size</th>
<th class="w3-right-align"> </th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</form>
</div>
<div style="overflow:auto;">
<div style="float:right;">
<button type="button" id="prevBtn" onclick="nextPrev(-1)" style="display: none;">Previous</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
</div>
</div>
<!-- Circles which indicates the steps of the form: -->
<div style="text-align:center;margin-top:40px;">
<span class="step"></span>
<span class="step"></span>
</div>
<script>
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("tab");
x[n].style.display = "block";
//... and fix the Previous/Next buttons:
if (n == 0) {
document.getElementById("prevBtn").style.display = "none";
} else {
document.getElementById("prevBtn").style.display = "inline";
}
if (n == (x.length - 1)) {
document.getElementById("nextBtn").innerHTML = "Submit";
} else {
document.getElementById("nextBtn").innerHTML = "Next";
}
//... and run a function that will display the correct step indicator:
fixStepIndicator(n)
}
function nextPrev(n) {
// This function will figure out which tab to display
var x = document.getElementsByClassName("tab");
// Exit the function if any field in the current tab is invalid:
if (n == 1 && !validateForm()) return false;
// Hide the current tab:
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("regForm").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("tab");
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("step")[currentTab].className += " finish";
}
return valid; // return the valid status
}
function fixStepIndicator(n) {
// This function removes the "active" class of all steps...
var i, x = document.getElementsByClassName("step");
for (i = 0; i < x.length; i++) {
x[i].className = x[i].className.replace(" active", "");
}
//... and adds the "active" class on the current step:
x[n].className += " active";
}
</script>
</body>
</html>