-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
CH-RAFAY
committed
Jun 20, 2024
1 parent
73150aa
commit 2c885eb
Showing
4 changed files
with
856 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,280 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Dependent Dropdown Form</title> | ||
<style> | ||
body { | ||
font-family: Arial, sans-serif; | ||
} | ||
.form-container { | ||
max-width: 400px; | ||
margin: 50px auto; | ||
padding: 20px; | ||
border: 1px solid #ccc; | ||
border-radius: 5px; | ||
} | ||
.form-group { | ||
margin-bottom: 15px; | ||
} | ||
.form-group label { | ||
display: block; | ||
margin-bottom: 5px; | ||
} | ||
.form-group select, | ||
.form-group input { | ||
width: 100%; | ||
padding: 8px; | ||
border: 1px solid #ccc; | ||
border-radius: 4px; | ||
} | ||
.option-box { | ||
display: inline-block; | ||
padding: 10px; | ||
border: 1px solid #ccc; | ||
border-radius: 5px; | ||
margin: 5px; | ||
cursor: pointer; | ||
} | ||
.option-box.selected { | ||
border-color: #ff7f00; | ||
background-color: #ff7f00; | ||
color: white; | ||
} | ||
.hidden { | ||
display: none; | ||
} | ||
.submit-btn { | ||
display: block; | ||
width: 100%; | ||
padding: 10px; | ||
background-color: #ff7f00; | ||
border: none; | ||
border-radius: 5px; | ||
color: white; | ||
font-size: 16px; | ||
cursor: pointer; | ||
} | ||
.submit-btn:disabled { | ||
background-color: #ccc; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
|
||
<div class="form-container"> | ||
<form id="car-review-form"> | ||
<div class="form-group"> | ||
<label for="brand">What brand is your car?</label> | ||
<select id="brand"> | ||
<option value="">Select brand</option> | ||
<option value="Smart">Smart</option> | ||
<option value="Toyota">Toyota</option> | ||
<option value="Ford">Ford</option> | ||
</select> | ||
</div> | ||
<div class="form-group"> | ||
<label for="model">Which model?</label> | ||
<select id="model" disabled> | ||
<option value="">Select model</option> | ||
</select> | ||
</div> | ||
<div class="form-group"> | ||
<label for="year">In which year was it registered?</label> | ||
<select id="year" disabled> | ||
<option value="">Select first registration</option> | ||
</select> | ||
</div> | ||
|
||
<div class="form-group hidden" id="shape-group"> | ||
<label for="shape">What shape does it have?</label> | ||
<div class="option-box" data-value="Roadster">Roadster</div> | ||
<div class="option-box" data-value="Coupe">Coupe</div> | ||
<div class="option-box" data-value="SUV">SUV</div> | ||
<div class="option-box" data-value="Other">Other</div> | ||
<input type="text" id="shape-other" class="hidden" placeholder="Enter shape"> | ||
</div> | ||
|
||
<div class="form-group hidden" id="fuel-group"> | ||
<label for="fuel">What fuel does it use?</label> | ||
<div class="option-box" data-value="Petrol">Petrol</div> | ||
<div class="option-box" data-value="Diesel">Diesel</div> | ||
<div class="option-box" data-value="Hybrid">Electric</div> | ||
<div class="option-box" data-value="Hybrid">Hybrid</div> | ||
<input type="text" id="fuel-other" class="hidden" placeholder="Enter fuel type"> | ||
</div> | ||
|
||
<div class="form-group hidden" id="variant-group"> | ||
<label for="variant">Which model variant is it?</label> | ||
<div class="option-box" data-value="1.6">1.6 L</div> | ||
<div class="option-box" data-value="1.8">1.8 L</div> | ||
<div class="option-box" data-value="Other">Other</div> | ||
<input type="text" id="variant-other" class="hidden" placeholder="Enter model variant"> | ||
</div> | ||
|
||
<div class="form-group hidden" id="horsepower-group"> | ||
<label for="horsepower">How many horsepower does it have?</label> | ||
<div class="option-box" data-value="85 kW / 115 hp">85 kW / 115 hp</div> | ||
<div class="option-box" data-value="55 kW">55 kW</div> | ||
<div class="option-box" data-value="57 kW">57 kW</div> | ||
<div class="option-box" data-value="61 kW">61 kW</div> | ||
<div class="option-box" data-value="Other">Other</div> | ||
<input type="text" id="horsepower-other" class="hidden" placeholder="Enter horsepower"> | ||
</div> | ||
|
||
<div class="form-group hidden" id="transmission-group"> | ||
<label for="transmission">What transmission does it have?</label> | ||
<div class="option-box" data-value="Automatic">Automatic</div> | ||
<div class="option-box" data-value="Manual">Manual</div> | ||
<div class="option-box" data-value="Other">Other</div> | ||
<input type="text" id="transmission-other" class="hidden" placeholder="Enter transmission type"> | ||
</div> | ||
|
||
<div class="form-group hidden" id="doors-group"> | ||
<label for="doors">How many doors does it have?</label> | ||
<div class="option-box" data-value="2 doors">2 doors</div> | ||
<div class="option-box" data-value="4 doors">4 doors</div> | ||
<div class="option-box" data-value="Other">Other</div> | ||
<input type="text" id="doors-other" class="hidden" placeholder="Enter number of doors"> | ||
</div> | ||
|
||
<div class="form-group hidden" id="mileage-group"> | ||
<label for="mileage">What is the mileage?</label> | ||
<input type="text" id="mileage" placeholder="Enter mileage"> | ||
</div> | ||
|
||
<div class="form-group hidden" id="additional-options-group"> | ||
<div class="form-group"> | ||
<label for="sell-plan">When do you plan to sell?</label> | ||
<select id="sell-plan"> | ||
<option value="">Select timeframe</option> | ||
<option value="next-4-weeks">Over the next 4 weeks</option> | ||
<option value="next-3-months">Over the next 3 months</option> | ||
<option value="next-6-months">Over the next 6 months</option> | ||
</select> | ||
</div> | ||
<div class="form-group"> | ||
<label for="prefer-to-sell">Who do you prefer to sell to?</label> | ||
<select id="prefer-to-sell"> | ||
<option value="">Select option</option> | ||
<option value="private">To Private</option> | ||
<option value="dealer">To Dealer</option> | ||
</select> | ||
</div> | ||
<div class="form-group"> | ||
<label for="email">Where can we send the sales offer?</label> | ||
<input type="email" id="email" placeholder="Please enter email address"> | ||
</div> | ||
</div> | ||
|
||
<button type="submit" class="submit-btn" disabled>View review now</button> | ||
</form> | ||
</div> | ||
|
||
<script> | ||
document.getElementById('brand').addEventListener('change', function() { | ||
var brand = this.value; | ||
var modelSelect = document.getElementById('model'); | ||
var yearSelect = document.getElementById('year'); | ||
var submitButton = document.querySelector('.submit-btn'); | ||
|
||
if (brand) { | ||
modelSelect.removeAttribute('disabled'); | ||
modelSelect.innerHTML = '<option value="">Select model</option>'; | ||
if (brand === 'Smart') { | ||
modelSelect.innerHTML += '<option value="Fortwo">Fortwo</option>'; | ||
modelSelect.innerHTML += '<option value="Forfour">Forfour</option>'; | ||
} else if (brand === 'Toyota') { | ||
modelSelect.innerHTML += '<option value="Corolla">Corolla</option>'; | ||
modelSelect.innerHTML += '<option value="Camry">Camry</option>'; | ||
} else if (brand === 'Ford') { | ||
modelSelect.innerHTML += '<option value="Focus">Focus</option>'; | ||
modelSelect.innerHTML += '<option value="Fiesta">Fiesta</option>'; | ||
} | ||
} else { | ||
modelSelect.setAttribute('disabled', 'true'); | ||
yearSelect.setAttribute('disabled', 'true'); | ||
submitButton.setAttribute('disabled', 'true'); | ||
} | ||
}); | ||
|
||
document.getElementById('model').addEventListener('change', function() { | ||
var model = this.value; | ||
var yearSelect = document.getElementById('year'); | ||
var submitButton = document.querySelector('.submit-btn'); | ||
|
||
if (model) { | ||
yearSelect.removeAttribute('disabled'); | ||
yearSelect.innerHTML = '<option value="">Select first registration</option>'; | ||
for (var year = 2000; year <= 2024; year++) { | ||
yearSelect.innerHTML += '<option value="' + year + '">' + year + '</option>'; | ||
} | ||
} else { | ||
yearSelect.setAttribute('disabled', 'true'); | ||
submitButton.setAttribute('disabled', 'true'); | ||
} | ||
}); | ||
|
||
document.getElementById('year').addEventListener('change', function() { | ||
var year = this.value; | ||
var submitButton = document.querySelector('.submit-btn'); | ||
|
||
if (year) { | ||
document.getElementById('shape-group').classList.remove('hidden'); | ||
} else { | ||
document.getElementById('shape-group').classList.add('hidden'); | ||
submitButton.setAttribute('disabled', 'true'); | ||
} | ||
}); | ||
|
||
document.querySelectorAll('.option-box').forEach(function(box) { | ||
box.addEventListener('click', function() { | ||
var parentGroup = this.parentElement; | ||
parentGroup.querySelectorAll('.option-box').forEach(function(option) { | ||
option.classList.remove('selected'); | ||
}); | ||
this.classList.add('selected'); | ||
|
||
var otherInput = parentGroup.querySelector('input[type="text"]'); | ||
if (this.getAttribute('data-value') === 'Other') { | ||
otherInput.classList.remove('hidden'); | ||
} else { | ||
otherInput.classList.add('hidden'); | ||
} | ||
|
||
// Show next group based on the current group ID | ||
var currentGroup = parentGroup.id; | ||
if (currentGroup === 'shape-group') { | ||
document.getElementById('fuel-group').classList.remove('hidden'); | ||
} else if (currentGroup === 'fuel-group') { | ||
document.getElementById('variant-group').classList.remove('hidden'); | ||
} else if (currentGroup === 'variant-group') { | ||
document.getElementById('horsepower-group').classList.remove('hidden'); | ||
} else if (currentGroup === 'horsepower-group') { | ||
document.getElementById('transmission-group').classList.remove('hidden'); | ||
} else if (currentGroup === 'transmission-group') { | ||
document.getElementById('doors-group').classList.remove('hidden'); | ||
} else if (currentGroup === 'doors-group') { | ||
document.getElementById('mileage-group').classList.remove('hidden'); | ||
} | ||
}); | ||
}); | ||
|
||
document.getElementById('mileage').addEventListener('input', function() { | ||
var mileage = this.value; | ||
var additionalOptionsGroup = document.getElementById('additional-options-group'); | ||
var submitButton = document.querySelector('.submit-btn'); | ||
|
||
if (mileage) { | ||
additionalOptionsGroup.classList.remove('hidden'); | ||
submitButton.removeAttribute('disabled'); | ||
} else { | ||
additionalOptionsGroup.classList.add('hidden'); | ||
submitButton.setAttribute('disabled', 'true'); | ||
} | ||
}); | ||
</script> | ||
|
||
</body> | ||
</html> |
File renamed without changes.
Oops, something went wrong.