search

Home  >  Q&A  >  body text

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.

P粉252423906P粉252423906468 days ago596

reply all(1)I'll reply

  • P粉476883986

    P粉4768839862023-09-14 00:40:46

    You passed brand-1 as a value in the model dropdown list to item[0], change it to item[2] which it represents Model. I suggest you add a blank option at the top like "Select Model" so that no option is selected by default when the page loads. Do not use
    outside of a paragraph. Please stop using var and use const or let. If the data will be changed, use let, for fixed data, use const. 

    // SKU data
let skuData = [
  ["SKU1", "Description 1", "Value 1"],
  ["SKU2", "Description 2", "Value 2"],
  ["SKU3", "Description 3", "Value 3"]
];

// Model data
let modelData = [
  ["Brand 1", "Gen 1", "Model 1"],
  ["Brand 2", "Gen 2", "Model 2"],
  ["Brand 3", "Gen 3", "Model 3"]
];

// New parts data
let 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
let 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[2];
    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';
  }
}
    form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 250px;
}

.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;
}
    <body onload="populateDropdowns()">
  <h1>Repair Form</h1>
  <form>
    <label for="technician">Technician:</label>
    <input type="text" id="technician" name="technician" required>

    <label for="sku">SKU:</label>
    <select id="sku" name="sku" required></select>

    <label for="serial">Serial:</label>
    <input type="text" id="serial" name="serial" required>

    <label for="model">Model:</label>
    <select id="model" name="model" required onchange="populateTables()">
      <option>Select Model</option>
    </select>

    <h2>New Parts</h2>
    <table class="table" id="new-parts-table"></table>

    <h2>Salvaged Parts</h2>
    <table class="table" id="salvaged-parts-table"></table>

    <input type="submit" value="Submit" id="submit-button" onclick="checkValue()">
  </form>
</body>

    reply
    0
  • Cancelreply