`I got this strange problem with my scripts when i’m filling out select option and if i’m trying too push the button it sends me towards half validation process.
There nothing are really happening. I have tried too add email type for the email input so it’s kinda require the users too put a @ into the input that’s also failing, and i have also require on all of the inputs for input that’s also failing.
Why is this so buggy?
Could you try too help me?`
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/index.css">
<title>Vasketjenester/renhold i Oslo</title>
<meta name="description" content="Profesjonelle vasketjenester i Oslo. Vi tilbyr effektive rengjøringstjenester for hjem, husvask og bedrifter. Vi tilbyr vindusvask, vaske klær, garasjen, skap, kjøleskap, kjøkkenbenk.">
<meta name="keywords" content="Renhold, vasketjenester, husvask, bedrift etc">
<meta name="author" content="Lasse Skaansar">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "LocalBusiness",
"name": "Ditt Bedriftsnavn",
"address": {
"@type": "PostalAddress",
"streetAddress": "Din Gateadresse",
"addressLocality": "Oslo",
"postalCode": "0010",
"addressRegion": "Oslo",
"addressCountry": "Norge"
},
"telephone": "46500809",
"openingHours": "24"
}
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
var containerContentHeight = document.querySelector('#container-content').clientHeight;
document.querySelector('.right-box').style.height = containerContentHeight + 'px';
});
</script>
</head>
<body>
<div class="top-menu">
<a href="#" class="menu-item">Hjem</a>
<a href="#" class="menu-item">Om oss</a>
<a href="#" class="menu-item">FAQ</a>
<a href="/index.php" class="menu-item">Vasketjenester</a>
</div>
<div id="default_everything">
<div class="container" style="width: 1000px">
<div class="right-box" style="width: 250px; margin-top: 15px">
<h1 style="margin-top: 22px; border-bottom: solid 1px #DEDEDE">Total kostnader:</h1>
<div id="totalAmount">
<div style="width: 100%; text-align: center">1300</div>
</div>
<div id="bookingSummary" style="margin-top: 20px;">
<h2>Booking Summary:</h2>
<ul id="selectedServices">
</ul>
</div>
</div>
<div id="container-content" style="margin-top: 5px;">
<div style="float: left; width: 100%; margin-top: 10px">
<div class="pages_active" style="margin-left: 65px; margin-bottom: 5px; margin-right: 0px" onclick="location.href='/index.php';">Husvask</div>
<div class="pages" style="margin-bottom: 5px; margin-left: 5px; margin-right: 5px" onclick="location.href='/bedrift.php';">Bedriftsvask</div>
<div class="pages" style="margin-bottom: 5px" onclick="location.href='/bilvask.php';">Bilvask</div>
<div class="pages" style="margin-bottom: 5px; margin-left: 5px" onclick="location.href='/wc.php';">WC - puplic</div>
</div>
<div style="min-height: 900px">
<p style="text-align: center; font-size: 23px">Vi tar kun bestillinger i <b>Oslo</b><br>Vi tar kun <b>Vipps</b> (vipps godtar visa etc)</p>
<?php
session_start();
include_once 'connection.php'; // Include your database connection file
if ($_SERVER["REQUEST_METHOD"] === "POST") {
// Retrieve and trim form data
$userFullName = trim($_POST["fullName"]);
$userAddress = trim($_POST["address"]);
$userhouseLetter = trim($_POST["houseLetter"]);
$userEmail = trim($_POST["email"]);
$userPhoneNumber = trim($_POST["phoneNumber"]);
$userZipCode = trim($_POST["zipCode"]);
$selectedDate = trim($_POST["selectedDate"]);
$error = ""; // Initialize error message variable
// Check if the entered ZIP code matches the allowed ZIP codes
if (!in_array($userZipCode, $allowed_Zip_Codes)) {
// ZIP code is not allowed, set error message
$error = "Beklager, men vi tilbyr tjenester kun i Oslo. Vennligst oppgi en gyldig Oslo postnummer.";
} else {
// Prepare an SQL statement to insert data into the table
$sql = "INSERT INTO table_order (fullName, address, email, phoneNumber, zipCode, selectedDate)
VALUES (?, ?, ?, ?, ?, ?, ?)";
// Prepare the statement
$stmt = mysqli_prepare($connection, $sql);
// Check if the statement preparation was successful
if ($stmt) {
// Bind parameters
mysqli_stmt_bind_param($stmt, "sssssss", $userFullName, $userAddress, $userEmail, $userPhoneNumber, $userZipCode, $selectedDate);
// Execute the statement
if (mysqli_stmt_execute($stmt)) {
echo '<p>Bestilling av våre tjenester er mottatt. Bedriften er blitt varslet.<br />Takk for at du benytter deg av våre tjenester!</p>';
echo '<dl>';
echo '<dt>Fullt navn:</dt><dd>' . $userFullName . '</dd>';
echo '<dt>Adresse:</dt><dd>' . $userAddress . '</dd>';
echo '<dt>Email:</dt><dd>' . $userEmail . '</dd>';
echo '<dt>Mobilnummer:</dt><dd>' . $userPhoneNumber . '</dd>';
echo '<dt>Postkode:</dt><dd>' . $userZipCode . '</dd>';
echo '<dt>Valgt dato:</dt><dd>' . $selectedDate . '</dd>';
echo '</dl>';
} else {
echo "Error: " . mysqli_error($connection);
}
// Close the statement
mysqli_stmt_close($stmt);
} else {
echo "Error: " . mysqli_error($connection);
}
}
}
?>
<?php
// Check if the success parameter is present in the URL
if (isset($_GET['success']) && $_GET['success'] == 'true') {
// Display the success message
echo "<div class='info_box' style='cursor: pointer' onclick='info_box()'>Din bestilling har blitt mottatt. Takk for at du valgte oss!</div>";
}
?>
<?php if (!empty($error)): ?>
<p class="error-message"><?php echo $error; ?></p>
<?php endif; ?>
<div id="zipCodeError" style="color: red;"></div>
<div style="float: left; width: 100%">
<hr>
</div>
<form id="orderForm" action="process.php" method="POST">
<div style="float: left; margin-left: 15px">
Hva slags type vask?
</div>
<div style="float: left; width: 100%; margin: 15px">
<select name="type" style="float: left; width: 570px; height: 30px" onchange="updateAmountFromDropdown()">
<option data-amount="0" disabled selected>Hva slags type vask?</option>
<option data-amount="0" value="Vanlig rengjøring">Vanlig rengjøring</option>
<option data-amount="700" value="Grundig rengjøring">Grundig rengjøring</option>
</select>
</div>
<div style="float: left; margin-left: 15px">
Hva slags størrelse på hjemmet ditt?
</div>
<div style="float: left; width: 100%; margin: 15px">
<select name="apartmentSize" style="float: left; width: 570px; height: 30px" onchange="updateAmountFromDropdown()">
<option data-amount="" disabled selected>Størrelse på hjemmet ditt?</option>
<option data-amount="" value="Mindre enn 40">40 kvm eller mindre</option>
<option data-amount="" value="41-60">Mellom 41 og 60 kvm</option>
<option data-amount="" value="61-80">Mellom 61 og 80 kvm</option>
<option data-amount="" value="81-100">Mellom 81 og 100 kvm</option>
<option data-amount="" value="101-120">Mellom 101 og 120 kvm</option>
</select>
</div>
<!-- starter på de små select option -->
<div style="float: left; margin-left: 15px; margin-bottom: 10px">
Fortell oss om hjemmet ditt
</div>
<div style="float: left; width: 100%">
<div style="float: left">
<select name="kitchen" style="float: left; width: 245px; height: 30px; margin-left: 15px; margin-bottom: 10px" onchange="updateAmountFromDropdown()">
<option data-amount="0" disabled selected>Hvor mange kjøkken?</option>
<option data-amount="0" value="Kjøkken og stue">Kjøkken og stue (på samme rom)</option>
<option data-amount="0" value="1">1 kjøkken (hvis det ikke er på samme rom)</option>
<option data-amount="500" value="2">2 kjøkken</option>
</select>
</div>
<div style="float: right">
<select name="livingRoom" style="float: left; width: 245px; height: 30px; margin-right: 65px" onchange="updateAmountFromDropdown()">
<option data-amount="0" disabled selected>Hvor mange stuer?</option>
<option data-amount="0" value="Stue og kjøkken">Stue og kjøkken (på samme rom)</option>
<option data-amount="0" value="1">1 Stue (hvis det ikke er på samme rom)</option>
<option data-amount="500" value="2">2 Stuer</option>
<option data-amount="1000" value="3">3 Stuer</option>
</select>
</div>
</div>
<div style="float: left; width: 100%">
<div style="float: left">
<select name="bed" style="float: left; width: 245px; height: 30px; margin-left: 15px" onchange="updateAmountFromDropdown()">
<option data-amount="0" disabled selected>Hvor mange soverom?</option>
<option data-amount="0" value="0">0 soverom</option>
<option data-amount="0" value="1">1 soverom</option>
<option data-amount="500" value="2">2 soverom</option>
</select>
</div>
<div style="float: right">
<select name="bathroom" style="float: left; width: 245px; height: 30px; margin-right: 65px" onchange="updateAmountFromDropdown()">
<option data-amount="0" disabled selected>Hvor mange bad?</option>
<option data-amount="0" value="1">1 bad</option>
<option data-amount="500" value="2">2 bad</option>
<option data-amount="1000" value="3">3 bad</option>
</select>
</div>
</div>
<?php
/*
// Check if there are missing fields from the previous submission
if (isset($_SESSION['missing_fields'])) {
echo "<div style='float: left; width: 100%; color: #FF0000'><ul>";
foreach ($_SESSION['missing_fields'] as $field) {
echo "<li>$field mangler</li>";
}
echo "</ul></div>";
// Unset the session variable to clear it
unset($_SESSION['missing_fields']);
}*/
?>
<div style="float: left; width: 100%; margin-top: 10px; margin-bottom: 10px">
<hr></hr>
</div>
<div style="float: left; margin-left: 27px">
Fullt navn:
</div>
<div style="float: left; width: 100%; margin-left: 27px; margin-top: 10px">
<input type="text" name="fullName" id="fullName" required style="width: 570px; height: 30px">
</div>
<div style="float: left; margin-left: 27px">
Adresse
</div>
<div style="float: left; width: 100%; margin-left: 27px; margin-top: 10px">
<input type="text" name="address" id="address" required style="width: 430px; height: 30px">
</div>
<div style="float: left; margin-left: 27px">
E-mail
</div>
<div style="float: left; width: 100%; margin-left: 27px; margin-top: 10px">
<input type="email" name="email" id="email" required style="width: 570px; height: 30px">
</div>
<div style="float: left; margin-left: 27px">
Mobilnummer:
</div>
<div style="float: left; width: 100%; margin-left: 27px; margin-top: 10px">
<input type="text" name="phoneNumber" id="phoneNumber" required style="width: 570px; height: 30px">
</div>
<div style="float: left; margin-left: 27px">
Postkode:
</div>
<div style="float: left; width: 100%; margin-left: 27px; margin-top: 10px">
<input type="text" name="zipCode" id="zipCode" required style="width: 570px; height: 30px" onblur="validateZipCode()">
</div>
<div style="float: left; margin-left: 27px">
By:
</div>
<div style="float: left; width: 100%; margin-left: 27px; margin-top: 10px">
<input type="text" name="city" id="city" readonly style="width: 570px; height: 30px">
</div>
<div style="float: left; margin-left: 27px">
Velg dato
</div>
<div style="float: left; width: 100%; margin-left: 27px; margin-top: 10px">
<input type="date" name="selectedDate" id="selectedDate" required style="width: 570px; height: 30px">
</div>
<input type="hidden" name="totalAmount" id="totalAmountInput">
<button type="submit" id="nextOrSubmitButton" onclick="validateForm()" onclick="handleNextStep()" style="margin-top: 15px; margin-left: 250px">Vipps hurtigkasse</button>
</form>
</div>
</div>
</div>
</div>
<script>
// Function to handleFormSubmission
function handleFormSubmission() {
var fullNameInput = document.getElementById("fullName");
var addressInput = document.getElementById("address");
var emailInput = document.getElementById("email");
var phoneNumberInput = document.getElementById("phoneNumber");
var zipCodeInput = document.getElementById("zipCode");
var selectedDateInput = document.getElementById("selectedDate");
var cityInput = document.getElementById("city");
// Check if any of the required fields are empty
if (!fullNameInput.value || !addressInput.value || !emailInput.value || !phoneNumberInput.value || !zipCodeInput.value || !selectedDateInput.value || !cityInput.value) {
alert('Vennligst fyll ut alle obligatoriske felt.'); // Display alert message
return; // Prevent further execution
}
// If all required fields are filled, submit the form
document.getElementById("orderForm").submit();
}
// Function to handleNextStep
function handleNextStep() {
// Check if the form is valid
if (validateForm()) {
// If form is valid, submit it
document.getElementById("orderForm").submit();
} else {
// If form is not valid, move to the next step
moveToNextStep();
}
}
// select option become green when the select are filled with data
document.addEventListener("DOMContentLoaded", function() {
var button = document.getElementById('nextOrSubmitButton');
var dropdowns = document.querySelectorAll('select');
function updateBorderColor(dropdown) {
if (dropdown.selectedIndex !== 0) {
dropdown.style.border = "2px solid #00CC99"; // Change the border to green when a selection is made
} else {
dropdown.style.border = ""; // Reset the border style to its default
}
}
dropdowns.forEach(function(dropdown) {
dropdown.addEventListener('change', function() {
updateBorderColor(dropdown);
});
// Initial border color setup
// Leave the border color unchanged initially
});
button.addEventListener('click', function(event) {
var dropdownEmpty = Array.from(dropdowns).some(function(dropdown) {
return dropdown.selectedIndex === 0;
});
// Check if any select dropdown is empty
if (dropdownEmpty) {
event.preventDefault(); // Prevent the default action of the button (i.e., preventing form submission)
// Change the border color of empty dropdowns to red
dropdowns.forEach(function(dropdown) {
if (dropdown.selectedIndex === 0) {
dropdown.style.border = "2px solid #E87A61"; // Change the border color to red
}
});
} else {
// If all required fields are filled, submit the form
document.getElementById("orderForm").submit();
}
});
});
function validateForm() {
var inputs = document.querySelectorAll('input[required], select[required]');
var isValid = true;
inputs.forEach(function(input) {
if (!input.value) {
if (input.tagName === "SELECT") {
input.style.border = "2px solid #E87A61"; // Change the border color to red for empty required selects
} else {
input.style.border = "2px solid #E87A61"; // Change the border color to red for empty required inputs
}
isValid = false;
} else {
input.style.border = ""; // Reset the border style to its default for filled required fields
}
});
return isValid;
}
function moveToNextStep() {
// Optionally, you can implement additional logic here based on your requirements
}
function handleNextStep() {
// Check if the form is valid
if (validateForm()) {
// If form is valid, submit it
document.getElementById("orderForm").submit();
} else {
// If form is not valid, move to the next step
moveToNextStep();
}
}
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
var button = document.getElementById('nextOrSubmitButton');
var inputs = document.querySelectorAll('input[required]');
var selects = document.querySelectorAll('select[required]');
function validateSelects() {
selects.forEach(function(select) {
select.reportValidity(); // This will trigger validation and apply the red border if the select is empty
});
}
function validateInputs() {
inputs.forEach(function(input) {
if (!input.value.trim()) { // Check if the input value is empty or whitespace
input.style.border = "2px solid #E87A61"; // Change the border color to red for empty required inputs
}
});
}
function resetInputBorder(input) {
if (input.value.trim()) { // Check if the input value is not empty or whitespace
input.style.border = ""; // Reset the border style to its default for filled fields
}
}
button.addEventListener('click', function(event) {
// Validate selects
validateSelects();
// Validate inputs
validateInputs();
var anyEmpty = false; // Flag to track if any required field is empty
// Check if any input field is empty
inputs.forEach(function(input) {
if (!input.value.trim()) { // Check if input value is empty or whitespace
anyEmpty = true;
}
});
// Check if at least one select field is filled
var anySelectFilled = false; // Flag to track if at least one select field is filled
selects.forEach(function(select) {
if (select.value.trim()) { // Check if select value is not empty or whitespace
anySelectFilled = true;
}
});
// Prevent form submission if any required field is empty and at least one select field is filled
if (anyEmpty && anySelectFilled) {
event.preventDefault();
}
});
// Reset border color when input value changes
inputs.forEach(function(input) {
input.addEventListener('input', function() {
resetInputBorder(input);
});
});
});
</script>
<!-- updating booking summary choosen the select and service costs combined -->
<script>
function updateTotalAmount() {
var totalAmount = 1300; // Starting amount
var selectedServices = document.querySelectorAll('select[name="apartmentSize"], select[name="kitchen"], select[name="livingRoom"], select[name="type"], select[name="bed"], select[name="bathroom"]');
selectedServices.forEach(function (select) {
var selectedOption = select.options[select.selectedIndex];
if (selectedOption && selectedOption.dataset.amount) {
totalAmount += parseInt(selectedOption.dataset.amount);
}
});
document.getElementById('totalAmount').textContent = totalAmount; // Update total amount in the UI
document.getElementById('totalAmountInput').value = totalAmount; // Set total amount in the hidden input field
}
document.addEventListener("DOMContentLoaded", function () {
updateTotalAmount(); // Update total amount on page load
var selects = document.querySelectorAll('select');
selects.forEach(function (select) {
select.addEventListener('change', function () {
updateTotalAmount(); // Update total amount when any select option changes
});
});
});
</script>
<script> // Can't order any earlier then previous dates
document.addEventListener("DOMContentLoaded", function() {
var selectedDateInput = document.getElementById("selectedDate");
// Get today's date
var today = new Date();
var yyyy = today.getFullYear();
var mm = String(today.getMonth() + 1).padStart(2, '0'); // January is 0!
var dd = String(today.getDate()).padStart(2, '0');
var currentDate = yyyy + '-' + mm + '-' + dd;
// Set minimum date for selectedDate input
selectedDateInput.setAttribute("min", currentDate);
// Optional: You can also disable the input if you want to prevent manual entry of past dates
// selectedDateInput.addEventListener("keydown", function(event) {
// event.preventDefault();
// });
// Optional: You can display a message to inform users about the minimum date restriction
// var minDateMessage = "Please select a date on or after " + currentDate;
// alert(minDateMessage);
});
</script>
<script> //
document.addEventListener("DOMContentLoaded", function() {
var infoBox = document.querySelector('.info_box');
// Check if infoBox is found and if it's found you can click on it too remove it
if (infoBox) {
infoBox.addEventListener('click', function() {
this.style.display = 'none'; // Hide the info box when clicked
});
}
});
</script>
<script>
function validateZipCode() { // A hell alot of zipcodes that's allowed too order. Only Oslo and nearby Oslo can order services.
var allowedZipCodes = ['1410', '0010', '0015', '0018', '0026', '0037', '0050', '0139', '0150', '0151', '0152', '0153', '0154', '0155', '0157', '0158', '0159', '0160', '0161', '0162', '0164', '0165', '0166', '0167', '0168', '0169', '0170', '0171', '0172', '0173', '0174', '0175', '0176', '0177', '0178', '0179', '0180', '0181', '0182', '0183', '0184', '0185', '0186', '0187', '0188', '0190', '0191', '0192', '0193', '0194', '0195', '0196', '0198', '0250', '0251', '0252', '0253', '0254', '0255', '0256', '0257', '0258', '0259', '0260', '0262', '0263', '0264', '0265', '0266', '0267', '0268', '0270', '0271', '0272', '0273', '0274', '0275', '0276', '0277', '0278', '0279', '0280', '0281', '0282', '0283', '0284', '0286', '0287', '0340', '0349', '0350', '0351', '0352', '0353', '0354', '0355', '0356', '0357', '0358', '0359', '0360', '0361', '0362', '0363', '0364', '0365', '0366', '0367', '0368', '0369', '0370', '0371', '0372', '0373', '0374', '0375', '0376', '0377', '0378', '0379', '0380', '0381', '0382', '0383', '0445', '0450', '0451', '0452', '0454', '0455', '0456', '0457', '0458', '0459', '0460', '0461', '0462', '0463', '0464', '0465', '0467', '0468', '0469', '0470', '0472', '0473', '0474', '0475', '0476', '0477', '0478', '0479', '0480', '0481', '0482', '0483', '0484', '0485', '0486', '0487', '0488', '0489', '0490', '0491', '0492', '0493', '0494', '0495', '0496', '0550', '0551', '0552', '0553', '0554', '0555', '0556', '0557', '0558', '0559', '0560', '0561', '0562', '0563', '0564', '0565', '0566', '0567', '0568', '0569', '0570', '0571', '0572', '0573', '0574', '0575', '0576', '0577', '0578', '0579', '0580', '0581', '0582', '0583', '0584', '0585', '0586', '0587', '0588', '0589', '0590', '0591', '0592', '0593', '0594', '0595', '0596', '0597', '0598', '0650', '0651', '0652', '0653', '0654', '0655', '0656', '0657', '0658', '0659', '0660', '0661', '0662', '0663', '0664', '0665', '0666', '0667', '0668', '0669', '0670', '0671', '0672', '0673', '0674', '0675', '0676', '0677', '0678', '0679', '0680', '0681', '0682', '0683', '0684', '0685', '0686', '0687', '0688', '0689', '0690', '0691', '0692', '0693', '0694', '0750', '0751', '0752', '0753', '0754', '0755', '0756', '0757', '0758', '0760', '0763', '0764', '0765', '0766', '0767', '0768', '0770', '0771', '0772', '0773', '0774', '0775', '0776', '0777', '0778', '0779', '0781', '0782', '0783', '0784', '0785', '0786', '0787', '0788', '0789', '0790', '0791', '0850', '0851', '0852', '0853', '0854', '0855', '0856', '0857', '0858', '0860', '0861', '0862', '0863', '0864', '0870', '0871', '0872', '0873', '0874', '0875', '0876', '0877', '0880', '0881', '0882', '0883', '0884', '0890', '0891', '0950', '0951', '0952', '0953', '0954', '0955', '0956', '0957', '0958', '0959', '0960', '0962', '0963', '0964', '0968', '0969', '0970', '0971', '0972', '0973', '0975', '0976', '0977', '0978', '0979', '0980', '0981', '0982', '0983', '0984', '0985', '0986', '0987', '0988', '1051', '1052', '1053', '1054', '1055', '1056', '1061', '1062', '1063', '1064', '1065', '1067', '1068', '1069', '1071', '1081', '1083', '1084', '1086', '1087', '1088', '1089', '1150', '1151', '1152', '1153', '1154', '1155', '1156', '1157', '1158', '1160', '1161', '1162', '1163', '1164', '1165', '1166', '1167', '1168', '1169', '1170', '1172', '1176', '1177', '1178', '1179', '1181', '1182', '1184', '1185', '1187', '1188', '1189', '1250', '1251', '1252', '1253', '1254', '1255', '1256', '1257', '1258', '1259', '1262', '1263', '1266', '1270', '1271', '1272', '1273', '1274', '1275', '1278', '1279', '1281', '1283', '1284', '1285', '1286', '1290', '1291', '1294', '1295', '1400', '1401', '1402', '1403', '1404', '1405', '1406', '1408', '1409', '1411', '1412', '1413', '1414', '1415', '1416', '1417', '1418', '1419', '1420', '1421', '1422', '1423', '1424', '1425', '1840', '1845'];
var zipCodeInput = document.getElementById("zipCode");
var zipCodeError = document.getElementById("zipCodeError");
var userZipCode = zipCodeInput.value.trim();
if (!allowedZipCodes.includes(userZipCode)) {
// Display error code that's not within the range.
zipCodeError.textContent = "Beklager, men vi tilbyr tjenester kun i Oslo. Vennligst oppgi en gyldig Oslo postnummer.";
zipCodeInput.classList.add("invalid");
} else {
// zipCode is allowed, remove the error message automatically
zipCodeError.textContent = "";
zipCodeInput.classList.remove("invalid");
}
}
</script>
</body>
</html>
`I have tried too put require into the inputs fields without success, email type for the input field that's also been failing.
I mean it's working when all of the input are filled up, but i wan't too make it easier for the users too see empty input are missing so they can see that easily instead of having this problem. This issue would annjoying me as a customer.`