Skip to content

Commit

Permalink
Updated! form with image option
Browse files Browse the repository at this point in the history
  • Loading branch information
CH-RAFAY committed Jun 20, 2024
1 parent 73150aa commit 2c885eb
Show file tree
Hide file tree
Showing 4 changed files with 856 additions and 0 deletions.
280 changes: 280 additions & 0 deletions F3.html
View file
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>
0 file.txt → File/file.txt
View file
File renamed without changes.
Loading

0 comments on commit 2c885eb

Please sign in to comment.