Use drop-down menus to change what appears in the table
I'm trying to create a simple repair form using HTML, using a dropdown I want to be able to select a model and then display all compatible parts in two tables, one for new parts and one for scrap. Currently, I'm hardcoding the data into JavaScript when I'm doing a demo. The problem I'm having is that the parts list doesn't show anything except a title. What did I miss?
<!DOCTYPE html>
<html>
<head>
<title>Repair Form</title>
<style>
.table {
border-collapse: collapse;
}
.table th, .table td {
border: 1px solid black;
padding: 5px;
}
.green-button {
background-color: green;
color: white;
padding: 10px 20px;
font-size: 16px;
border: none;
cursor: pointer;
}
.red-button {
background-color: red;
color: white;
padding: 10px 20px;
font-size: 16px;
border: none;
cursor: pointer;
}
</style>
<script>
// SKU data
var skuData = [
["SKU1", "Description 1", "Value 1"],
["SKU2", "Description 2", "Value 2"],
["SKU3", "Description 3", "Value 3"]
];
// Model data
var modelData = [
["Brand 1", "Gen 1", "Model 1"],
["Brand 2", "Gen 2", "Model 2"],
["Brand 3", "Gen 3", "Model 3"]
];
// New parts data
var newPartsData = [
["Part 1", "10", "5", "Model 1,Model 2"],
["Part 2", "20", "3", "Model 1,Model 3"],
["Part 3", "30", "2", "Model 2,Model 3"]
];
// Salvaged parts data
var salvagePartsData = [
["Part 4", "15", "4", "Model 1,Model 3"],
["Part 5", "25", "6", "Model 2,Model 3"],
["Part 6", "35", "2", "Model 1,Model 2"]
];
function populateDropdowns() {
var skuDropdown = document.getElementById('sku');
var modelDropdown = document.getElementById('model');
// Populate SKU dropdown
skuData.forEach(function (item) {
var option = document.createElement('option');
option.value = item[0];
option.text = item[1] + " - " + item[2];
skuDropdown.appendChild(option);
});
// Populate Model dropdown
modelData.forEach(function (item) {
var option = document.createElement('option');
option.value = item[0];
option.text = item[0] + " - " + item[1] + " - " + item[2];
modelDropdown.appendChild(option);
});
// Initial population of tables
populateTables();
}
function populateTables() {
var modelSelection = document.getElementById('model').value;
// Populate New Parts table
var newPartsTable = document.getElementById('new-parts-table');
newPartsTable.innerHTML = "<thead><tr><th>Part</th><th>Quantity</th><th>Select</th></tr></thead><tbody>";
newPartsData.forEach(function (item) {
if (item[3].includes(modelSelection)) {
var row = document.createElement('tr');
var partCell = document.createElement('td');
partCell.textContent = item[0];
row.appendChild(partCell);
var quantityCell = document.createElement('td');
quantityCell.textContent = item[2];
row.appendChild(quantityCell);
var selectCell = document.createElement('td');
var checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.name = 'new_parts[]';
checkbox.value = item[0];
selectCell.appendChild(checkbox);
row.appendChild(selectCell);
newPartsTable.appendChild(row);
}
});
// Populate Salvaged Parts table
var salvagePartsTable = document.getElementById('salvaged-parts-table');
salvagePartsTable.innerHTML = "<thead><tr><th>Part</th><th>Quantity</th><th>Select</th></tr></thead><tbody>";
salvagePartsData.forEach(function (item) {
if (item[3].includes(modelSelection)) {
var row = document.createElement('tr');
var partCell = document.createElement('td');
partCell.textContent = item[0];
row.appendChild(partCell);
var quantityCell = document.createElement('td');
quantityCell.textContent = item[2];
row.appendChild(quantityCell);
var selectCell = document.createElement('td');
var checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.name = 'salvaged_parts[]';
checkbox.value = item[0];
selectCell.appendChild(checkbox);
row.appendChild(selectCell);
salvagePartsTable.appendChild(row);
}
});
}
function checkValue() {
var skuValue = parseInt(document.getElementById('sku').value);
var newParts = document.getElementsByName('new_parts[]');
var salvagedParts = document.getElementsByName('salvaged_parts[]');
var totalValue = 0;
for (var i = 0; i < newParts.length; i++) {
if (newParts[i].checked) {
var partName = newParts[i].value;
var partIndex = newPartsData.findIndex(function (item) {
return item[0] === partName;
});
totalValue += parseInt(newPartsData[partIndex][1]);
}
}
for (var i = 0; i < salvagedParts.length; i++) {
if (salvagedParts[i].checked) {
var partName = salvagedParts[i].value;
var partIndex = salvagePartsData.findIndex(function (item) {
return item[0] === partName;
});
totalValue += parseInt(salvagePartsData[partIndex][1]);
}
}
var submitButton = document.getElementById('submit-button');
if (totalValue < skuValue) {
submitButton.classList.remove('red-button');
submitButton.classList.add('green-button');
submitButton.textContent = 'Pass';
} else {
submitButton.classList.remove('green-button');
submitButton.classList.add('red-button');
submitButton.textContent = 'Nix';
}
}
</script>
</head>
<body onload="populateDropdowns()">
<h1>Repair Form</h1>
<form>
<label for="technician">Technician:</label>
<input type="text" id="technician" name="technician" required><br><br>
<label for="sku">SKU:</label>
<select id="sku" name="sku" required></select><br><br>
<label for="serial">Serial:</label>
<input type="text" id="serial" name="serial" required><br><br>
<label for="model">Model:</label>
<select id="model" name="model" required onchange="populateTables()"></select><br><br>
<h2>New Parts</h2>
<table class="table" id="new-parts-table"></table>
<h2>Salvaged Parts</h2>
<table class="table" id="salvaged-parts-table"></table>
<br>
<input type="submit" value="Submit" id="submit-button" onclick="checkValue()"><br><br>
</form>
</body>
</html>
Initially I tried creating a CSV file to control the data without success. I also need it to work locally, not on a web server.
