#JP77 Multilevel Dropdown 10x

Multilevel Dropdown Sampai Level 10

1. Copy Spreadsheet (Klik Disini)

2. Buatlah Folder baru pada Google Drive untuk menyimpan Berkas/Foto.

3. Pada Spreadsheet yang telah di copy di atas terdapat 2 sheet yaitu :

• Sheet Lokasi

Pada sheet Lokasi terdapat beberapa kolom data yang akan muncul pada Dropdown bertingkat sampai dengan 10 tingkatan sesuai baris dari sebalah kiri.

• Sheet Data

Pada sheet Data terdapat beberapa kolom yang akan terisi setelah mengisi pada Form Input.

4. Buatlah lembar kerja Apps Script, dengan cara klik Ektensi lalu klik Apps Script.

5. Pada lembar kerja Apps Script terdapat file default yaitu :

• File Code.gs
• File Page.html
• File visit.html
• Layanan Drive API
• Layanan Sheet API

6. Copy dan pastekan script di bawah ini ke Code.gs

*Untuk Mendapatkan Full Script tanpa password silahkan Klik Disini*

Masukkan Password Untuk Melihat Script (Password ada di dalam video)

// www.javabitpro.com

function doGet() {
  return HtmlService.createTemplateFromFile('Page').evaluate()
   .setTitle('Javabitpro')
  .addMetaTag('viewport', 'width=device-width, initial-scale=1')
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
  .setFaviconUrl('https://i.imgur.com/thmO7Xv.png');
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

function getData(sheetName) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(sheetName);
  var data = sheet.getDataRange().getValues();
  return JSON.stringify(data);
}

function getKabupatenOptions() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Lokasi');
  var data = sheet.getDataRange().getValues();
  var kabupatenOptions = [];

  for (var i = 1; i < data.length; i++) {
    var kabupaten = data[i][0];
    if (!kabupatenOptions.includes(kabupaten)) {
      kabupatenOptions.push(kabupaten);
    }
  }

  return JSON.stringify(kabupatenOptions);
}

function getKecamatanOptions(kabupaten) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Lokasi');
  var data = sheet.getDataRange().getValues();
  var kecamatanOptions = [];

  for (var i = 1; i < data.length; i++) {
    if (data[i][0] === kabupaten && !kecamatanOptions.includes(data[i][1])) {
      kecamatanOptions.push(data[i][1]);
    }
  }

  return JSON.stringify(kecamatanOptions);
}


function getDesaOptions(kabupaten, kecamatan) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Lokasi');
  var data = sheet.getDataRange().getValues();
  var desaOptions = [];

  for (var i = 1; i < data.length; i++) {
    if (data[i][0] === kabupaten && data[i][1] === kecamatan && !desaOptions.includes(data[i][2]) ) {
      desaOptions.push(data[i][2]);
    }
  }

  return JSON.stringify(desaOptions);
}

function getPaslon1Options(kabupaten, kecamatan, desa) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Lokasi');
  var data = sheet.getDataRange().getValues();
  var paslon1Options = [];

  for (var i = 1; i < data.length; i++) {
    if (data[i][0] === kabupaten && data[i][1] === kecamatan && data[i][2] === desa && !paslon1Options.includes(data[i][3])) {
      paslon1Options.push(data[i][3]);
    }
  }

  return JSON.stringify(paslon1Options);
}

function getPaslon2Options(kabupaten, kecamatan, desa, paslon1) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Lokasi');
  var data = sheet.getDataRange().getValues();
  var paslon2Options = [];

  for (var i = 1; i < data.length; i++) {
    if (data[i][0] === kabupaten && data[i][1] === kecamatan && data[i][2] === desa && data[i][3] === paslon1 && !paslon2Options.includes(data[i][4])) {
      paslon2Options.push(data[i][4]);
    }
  }

  return JSON.stringify(paslon2Options);
}

function getPaslon3Options(kabupaten, kecamatan, desa, paslon1, paslon2) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Lokasi');
  var data = sheet.getDataRange().getValues();
  var paslon3Options = [];

  for (var i = 1; i < data.length; i++) {
    if (data[i][0] === kabupaten && data[i][1] === kecamatan && data[i][2] === desa && data[i][3] === paslon1 && data[i][4] === paslon2 && !paslon3Options.includes(data[i][5])) {
      paslon3Options.push(data[i][5]);
    }
  }

  return JSON.stringify(paslon3Options);
}

function getPaslon4Options(kabupaten, kecamatan, desa, paslon1, paslon2, paslon3) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Lokasi');
  var data = sheet.getDataRange().getValues();
  var paslon4Options = [];

  for (var i = 1; i < data.length; i++) {
    if (data[i][0] === kabupaten && data[i][1] === kecamatan && data[i][2] === desa && data[i][3] === paslon1 && data[i][4] === paslon2 && data[i][5] === paslon3 && !paslon4Options.includes(data[i][6])) {
      paslon4Options.push(data[i][6]);
    }
  }

  return JSON.stringify(paslon4Options);
}


function getPaslon5Options(kabupaten, kecamatan, desa, paslon1, paslon2, paslon3, paslon4) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Lokasi');
  var data = sheet.getDataRange().getValues();
  var paslon5Options = [];

  for (var i = 1; i < data.length; i++) {
    if (data[i][0] === kabupaten && data[i][1] === kecamatan && data[i][2] === desa && data[i][3] === paslon1 && data[i][4] === paslon2 && data[i][5] === paslon3 && data[i][6] === paslon4 && !paslon5Options.includes(data[i][7])) {
      paslon5Options.push(data[i][7]);
    }
  }

  return JSON.stringify(paslon5Options);
}

function getPaslon6Options(kabupaten, kecamatan, desa, paslon1, paslon2, paslon3, paslon4, paslon5) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Lokasi');
  var data = sheet.getDataRange().getValues();
  var paslon6Options = [];

  for (var i = 1; i < data.length; i++) {
    if (data[i][0] === kabupaten && data[i][1] === kecamatan && data[i][2] === desa && data[i][3] === paslon1 && data[i][4] === paslon2 && data[i][5] === paslon3 && data[i][6] === paslon4  && data[i][7] === paslon5 && !paslon6Options.includes(data[i][8])) {
      paslon6Options.push(data[i][8]);
    }
  }

  return JSON.stringify(paslon6Options);
}

function getPaslon7Options(kabupaten, kecamatan, desa, paslon1, paslon2, paslon3, paslon4, paslon5, paslon6) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Lokasi');
  var data = sheet.getDataRange().getValues();
  var paslon7Options = [];

  for (var i = 1; i < data.length; i++) {
    if (data[i][0] === kabupaten && data[i][1] === kecamatan && data[i][2] === desa && data[i][3] === paslon1 && data[i][4] === paslon2 && data[i][5] === paslon3 && data[i][6] === paslon4  && data[i][7] === paslon5 && data[i][8] === paslon6 && !paslon7Options.includes(data[i][9])) {
      paslon7Options.push(data[i][9]);
    }
  }

  return JSON.stringify(paslon7Options);
}
// Tambahkan fungsi serupa untuk Paslon 8 dan seterusnya...

function submitForm(formData) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Data');
  var folderId = 'ID_FOLDER'; // Ganti dengan ID folder Google Drive Anda

  var data = JSON.parse(formData);
  var fileBlob = Utilities.newBlob(Utilities.base64Decode(data.file.data), data.file.type, data.file.name);
  var folder = DriveApp.getFolderById(folderId);
  var newFile = folder.createFile(fileBlob);

  var fileUrl = newFile.getUrl();

  sheet.appendRow([data.nama, data.notps, data.kabupaten, data.kecamatan, data.desa, data.paslon1, data.paslon2, data.paslon3,data.paslon4, data.paslon5, data.paslon6, data.paslon7, fileUrl]);
}

Sesuaikan ID_FOLDER dengan ID Folder yang telah di buat tadi.

7. Copy dan pastekan script di bawah ini ke Page.html

Masukkan Password Untuk Melihat Script (Password sama dengan di atas)

<!-- www.javabitpro.com -->

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
     <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
   <!-- font-awesome@6.2.0 icon Visit -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
  <?!= include('visit')?>

    <script>
      function updateKabupatenOptions() {
        google.script.run.withSuccessHandler(populateKabupatenOptions).getKabupatenOptions();
      }

      function populateKabupatenOptions(kabupatenOptions) {
        var kabupatenDropdown = document.getElementById('kabupaten');
        kabupatenDropdown.innerHTML = '';

        JSON.parse(kabupatenOptions).forEach(function(option) {
          var newOption = document.createElement('option');
          newOption.value = option;
          newOption.text = option;
          kabupatenDropdown.add(newOption);
        });

        // Setelah mengisi dropdown Kabupaten, panggil fungsi untuk mengisi dropdown Kecamatan
        updateKecamatanOptions();
      }

      function updateKecamatanOptions() {
        var kabupaten = document.getElementById('kabupaten').value;
        google.script.run.withSuccessHandler(populateKecamatanOptions).getKecamatanOptions(kabupaten);
      }

      function populateKecamatanOptions(kecamatanOptions) {
        var kecamatanDropdown = document.getElementById('kecamatan');
        kecamatanDropdown.innerHTML = '';

        JSON.parse(kecamatanOptions).forEach(function(option) {
          var newOption = document.createElement('option');
          newOption.value = option;
          newOption.text = option;
          kecamatanDropdown.add(newOption);
        });

        // Setelah mengisi dropdown Kecamatan, panggil fungsi untuk mengisi dropdown Desa
        updateDesaOptions();
      }

      function updateDesaOptions() {
        var kabupaten = document.getElementById('kabupaten').value;
        var kecamatan = document.getElementById('kecamatan').value;
        google.script.run.withSuccessHandler(populateDesaOptions).getDesaOptions(kabupaten, kecamatan);
      }

      function populateDesaOptions(desaOptions) {
        var desaDropdown = document.getElementById('desa');
        desaDropdown.innerHTML = '';

        JSON.parse(desaOptions).forEach(function(option) {
          var newOption = document.createElement('option');
          newOption.value = option;
          newOption.text = option;
          desaDropdown.add(newOption);
        });

        // Setelah mengisi dropdown Desa, panggil fungsi untuk mengisi dropdown Paslon1
        updatePaslon1Options();
      }

      function updatePaslon1Options() {
        var kabupaten = document.getElementById('kabupaten').value;
        var kecamatan = document.getElementById('kecamatan').value;
        var desa = document.getElementById('desa').value;
        google.script.run.withSuccessHandler(populatePaslon1Options).getPaslon1Options(kabupaten, kecamatan, desa);
      }

      function populatePaslon1Options(paslon1Options) {
        var paslon1Dropdown = document.getElementById('paslon1');
        paslon1Dropdown.innerHTML = '';

        JSON.parse(paslon1Options).forEach(function(option) {
          var newOption = document.createElement('option');
          newOption.value = option;
          newOption.text = option;
          paslon1Dropdown.add(newOption);
        });

        // Setelah mengisi dropdown Paslon1, panggil fungsi untuk mengisi dropdown Paslon2
        updatePaslon2Options();
      }

      function updatePaslon2Options() {
        var kabupaten = document.getElementById('kabupaten').value;
        var kecamatan = document.getElementById('kecamatan').value;
        var desa = document.getElementById('desa').value;
        var paslon1 = document.getElementById('paslon1').value;
        google.script.run.withSuccessHandler(populatePaslon2Options).getPaslon2Options(kabupaten, kecamatan, desa, paslon1);
      }

      function populatePaslon2Options(paslon2Options) {
        var paslon2Dropdown = document.getElementById('paslon2');
        paslon2Dropdown.innerHTML = '';

        JSON.parse(paslon2Options).forEach(function(option) {
          var newOption = document.createElement('option');
          newOption.value = option;
          newOption.text = option;
          paslon2Dropdown.add(newOption);
        });

        // Setelah mengisi dropdown Paslon2, panggil fungsi untuk mengisi dropdown Paslon3
         updatePaslon3Options();
      }

function updatePaslon3Options() {
        var kabupaten = document.getElementById('kabupaten').value;
        var kecamatan = document.getElementById('kecamatan').value;
        var desa = document.getElementById('desa').value;
        var paslon1 = document.getElementById('paslon1').value;
        var paslon2 = document.getElementById('paslon2').value;
        google.script.run.withSuccessHandler(populatePaslon3Options).getPaslon3Options(kabupaten, kecamatan, desa, paslon1, paslon2);
      }

      function populatePaslon3Options(paslon3Options) {
        var paslon3Dropdown = document.getElementById('paslon3');
        paslon3Dropdown.innerHTML = '';

        JSON.parse(paslon3Options).forEach(function(option) {
          var newOption = document.createElement('option');
          newOption.value = option;
          newOption.text = option;
          paslon3Dropdown.add(newOption);
        });

        // Setelah mengisi dropdown Paslon3, panggil fungsi untuk mengisi dropdown Paslon4
         updatePaslon4Options();
      }

function updatePaslon4Options() {
        var kabupaten = document.getElementById('kabupaten').value;
        var kecamatan = document.getElementById('kecamatan').value;
        var desa = document.getElementById('desa').value;
        var paslon1 = document.getElementById('paslon1').value;
        var paslon2 = document.getElementById('paslon2').value;
        var paslon3 = document.getElementById('paslon3').value;
        google.script.run.withSuccessHandler(populatePaslon4Options).getPaslon4Options(kabupaten, kecamatan, desa, paslon1, paslon2, paslon3);
      }

      function populatePaslon4Options(paslon4Options) {
        var paslon4Dropdown = document.getElementById('paslon4');
        paslon4Dropdown.innerHTML = '';

        JSON.parse(paslon4Options).forEach(function(option) {
          var newOption = document.createElement('option');
          newOption.value = option;
          newOption.text = option;
          paslon4Dropdown.add(newOption);
        });

        // Setelah mengisi dropdown Paslon4, panggil fungsi untuk mengisi dropdown Paslon5, Hapus tanda 
        updatePaslon5Options();
      }

function updatePaslon5Options() {
        var kabupaten = document.getElementById('kabupaten').value;
        var kecamatan = document.getElementById('kecamatan').value;
        var desa = document.getElementById('desa').value;
        var paslon1 = document.getElementById('paslon1').value;
        var paslon2 = document.getElementById('paslon2').value;
        var paslon3 = document.getElementById('paslon3').value;
        var paslon4 = document.getElementById('paslon4').value;
        google.script.run.withSuccessHandler(populatePaslon5Options).getPaslon5Options(kabupaten, kecamatan, desa, paslon1, paslon2, paslon3, paslon4);
      }

      function populatePaslon5Options(paslon5Options) {
        var paslon5Dropdown = document.getElementById('paslon5');
        paslon5Dropdown.innerHTML = '';

        JSON.parse(paslon5Options).forEach(function(option) {
          var newOption = document.createElement('option');
          newOption.value = option;
          newOption.text = option;
          paslon5Dropdown.add(newOption);
        });

        // Setelah mengisi dropdown Paslon5, panggil fungsi untuk mengisi dropdown Paslon6, Hapus tanda // di bawah ini
        updatePaslon6Options();
      }

function updatePaslon6Options() {
        var kabupaten = document.getElementById('kabupaten').value;
        var kecamatan = document.getElementById('kecamatan').value;
        var desa = document.getElementById('desa').value;
        var paslon1 = document.getElementById('paslon1').value;
        var paslon2 = document.getElementById('paslon2').value;
        var paslon3 = document.getElementById('paslon3').value;
        var paslon4 = document.getElementById('paslon4').value;
        var paslon5 = document.getElementById('paslon5').value;
        google.script.run.withSuccessHandler(populatePaslon6Options).getPaslon6Options(kabupaten, kecamatan, desa, paslon1, paslon2, paslon3, paslon4, paslon5);
      }

      function populatePaslon6Options(paslon6Options) {
        var paslon6Dropdown = document.getElementById('paslon6');
        paslon6Dropdown.innerHTML = '';

        JSON.parse(paslon6Options).forEach(function(option) {
          var newOption = document.createElement('option');
          newOption.value = option;
          newOption.text = option;
          paslon6Dropdown.add(newOption);
        });

        // Setelah mengisi dropdown Paslon5, panggil fungsi untuk mengisi dropdown Paslon6, Hapus tanda // di bawah ini
        updatePaslon7Options();
      }

function updatePaslon7Options() {
        var kabupaten = document.getElementById('kabupaten').value;
        var kecamatan = document.getElementById('kecamatan').value;
        var desa = document.getElementById('desa').value;
        var paslon1 = document.getElementById('paslon1').value;
        var paslon2 = document.getElementById('paslon2').value;
        var paslon3 = document.getElementById('paslon3').value;
        var paslon4 = document.getElementById('paslon4').value;
        var paslon5 = document.getElementById('paslon5').value;
        var paslon6 = document.getElementById('paslon6').value;
        google.script.run.withSuccessHandler(populatePaslon7Options).getPaslon7Options(kabupaten, kecamatan, desa, paslon1, paslon2, paslon3, paslon4, paslon5, paslon6);
      }

      function populatePaslon7Options(paslon7Options) {
        var paslon7Dropdown = document.getElementById('paslon7');
        paslon7Dropdown.innerHTML = '';

        JSON.parse(paslon7Options).forEach(function(option) {
          var newOption = document.createElement('option');
          newOption.value = option;
          newOption.text = option;
          paslon7Dropdown.add(newOption);
        });

        // Setelah mengisi dropdown Paslon5, panggil fungsi untuk mengisi dropdown Paslon6, Hapus tanda // di bawah ini
       // updatePaslon8Options();
      }

  document.addEventListener('DOMContentLoaded', function() {
        updateKabupatenOptions();
      });

     function submitForm() {
        var nama = document.getElementById("nama").value;
        var notps = document.getElementById("notps").value;
        var kabupaten = document.getElementById("kabupaten").value;
        var kecamatan = document.getElementById("kecamatan").value;
        var desa = document.getElementById("desa").value;
        var paslon1 = document.getElementById("paslon1").value;
        var paslon2 = document.getElementById("paslon2").value;
        var paslon3 = document.getElementById("paslon3").value;
        var paslon4 = document.getElementById("paslon4").value;
        var paslon5 = document.getElementById("paslon5").value;
        var paslon6 = document.getElementById("paslon6").value;
        var paslon7 = document.getElementById("paslon7").value;
        // Retrieve the file input element
        var fileInput = document.getElementById("fileInput");
        var file = fileInput.files[0];

        // Show loading element
        document.getElementById("loading").style.display = "block";

        // Convert the file to base64
        var reader = new FileReader();
        reader.onloadend = function() {
          var fileData = {
            name: file.name,
            type: file.type,
            data: reader.result.split(',')[1] // Extracting the base64 data
          };

          // Prepare the form data
          var formData = {
            nama: nama,
            notps: notps,
            kabupaten: kabupaten,
            kecamatan: kecamatan,
            desa: desa,
            paslon1: paslon1,
            paslon2: paslon2,
            paslon3: paslon3,
            paslon4: paslon4,
            paslon5: paslon5,
            paslon6: paslon6,
            paslon7: paslon7,
            file: fileData
          };

          // Pass the form data to the server-side script for submission
          google.script.run
            .withSuccessHandler(function() {

              // Hide loading element
              document.getElementById("loading").style.display = "none";
              // Show success popup
              document.getElementById("successPopup").style.display = "block";
              
              // Optionally, clear the file input after successful upload
              fileInput.value = "";
              
              // Clear other form fields after submission (optional)

              document.getElementById("nama").value = "";
              document.getElementById("notps").value = "";
              document.getElementById("kabupaten").value = "";
              document.getElementById("kecamatan").value = "";
              document.getElementById("desa").value = "";
              document.getElementById("paslon1").value = "";
              document.getElementById("paslon2").value = "";
              document.getElementById("paslon3").value = "";
              document.getElementById("paslon4").value = "";
              document.getElementById("paslon5").value = "";
              document.getElementById("paslon6").value = "";
              document.getElementById("paslon7").value = "";


            })
            .submitForm(JSON.stringify(formData));
        };

        reader.readAsDataURL(file);
      }

      function closeSuccessPopup() {
        document.getElementById("successPopup").style.display = "none";
      }
    </script>
        <style>
       #successPopup {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        padding: 20px;
        border: 1px solid #ccc;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      }

      #loading {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        padding: 20px;
        border: 1px solid #ccc;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      }
          .card-img-top {
      width: 256px;
      height: 256px;
      object-fit: cover;
    }

    .center-content {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }
    </style>
  </head>
  <body>
    <form>
      <div class="container mt-4">
  <!-- Card di bagian atas dengan formasi 2x3 -->
  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Multilevel Dropdown 10x</h5>

          <div class="row">
            <div class="col-md-4 mb-3">
              <label for="nama">Nama:</label>
              <input type="text" class="form-control" id="nama" name="nama" required>
            </div>
            <div class="col-md-4 mb-3">
              <label for="notps">No TPS:</label>
              <input type="text" class="form-control" id="notps" name="notps" required>
            </div>
            <div class="col-md-4 mb-3">
              <label for="dpt">Jumlah DPT:</label>
              <input type="text" class="form-control" id="dpt" name="dpt" required>
            </div>
          </div>

          <div class="row">
            <div class="col-md-4 mb-3">
              <label for="kabupaten">Kabupaten <i style="color:Tomato;"> (Dropdown Lv1)</i>:</label>
              <select class="form-control" id="kabupaten" name="kabupaten" onchange="updateKecamatanOptions()"></select>
            </div>
            <div class="col-md-4 mb-3">
               <label for="kecamatan">Kecamatan <i style="color:Tomato;"> (Dropdown Lv2)</i>:</label>
               <select class="form-control" id="kecamatan" name="kecamatan"  onchange="updateDesaOptions()"></select>
            </div>
            <div class="col-md-4 mb-3">
              <label for="desa">Desa  <i style="color:Tomato;"> (Dropdown Lv3)</i>:</label>
              <select class="form-control" id="desa" name="desa" onchange="updatePaslon1Options()"></select>
            </div>
          </div>
          
          <div class="row">
            <div class="col-md-4 mb-3">
              <label for="paslon1">Paslon 1  <i style="color:Tomato;"> (Dropdown Lv4)</i>:</label>
              <select class="form-control" id="paslon1" name="paslon1" onchange="updatePaslon2Options()"></select>
            </div>
            <div class="col-md-4 mb-3">
              <label for="paslon2">Paslon 2  <i style="color:Tomato;"> (Dropdown Lv5)</i>:</label>
              <select class="form-control" id="paslon2" name="paslon2" onchange="updatePaslon3Options()"></select>
            </div>
            <div class="col-md-4 mb-3">
              <label for="paslon3">Paslon 3  <i style="color:Tomato;"> (Dropdown Lv6)</i>:</label>
              <select class="form-control" id="paslon3" name="paslon3" onchange="updatePaslon4Options()"></select>
            </div>
          </div>

          <div class="row">
            <div class="col-md-4 mb-3">
              <label for="paslon4">Paslon 4  <i style="color:Tomato;"> (Dropdown Lv7)</i>:</label>
              <select class="form-control" id="paslon4" name="paslon4" onchange="updatePaslon5Options()"></select>
            </div>
            <div class="col-md-4 mb-3">
              <label for="paslon5">Paslon 5  <i style="color:Tomato;"> (Dropdown Lv8)</i>:</label>
              <select class="form-control" id="paslon5" name="paslon5" onchange="updatePaslon6Options()"></select>
            </div>
            <div class="col-md-4 mb-3">
              <label for="paslon6">Paslon 6  <i style="color:Tomato;"> (Dropdown Lv9)</i>:</label>
              <select class="form-control" id="paslon6" name="paslon6" onchange="updatePaslon7Options()"></select>
            </div>
          </div>

          <div class="row">
            <div class="col-md-4 mb-3">
              <label for="paslon7">Paslon 7  <i style="color:Tomato;"> (Dropdown Lv10)</i>:</label>
              <select class="form-control" id="paslon7" name="paslon7"></select>
            </div>
            <div class="col-md-4 mb-3">
              <label for="photo">Upload Foto:</label>
              <input type="file" class="form-control-file" id="fileInput" accept="image/*">
            </div>
            <div class="col-md-4 mb-3">
              <br>
              <input type="button" value="Submit" onclick="submitForm()">
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>




    </form>
    <div id="loading">
      Loading...
    </div>

    <div id="successPopup">
      <p>Formulir berhasil disubmit!</p>
      <button onclick="closeSuccessPopup()">Tutup</button>
    </div>
  </body>
</html>

8. Copy dan pastekan script di bawah ke visit.html

Masukkan Password Untuk Melihat Script (Password sama dengan di atas)

<link href="https://raw.githack.com/javabitpro/css/main/javabitprocssloginjp70.css" rel="stylesheet">
	<div class="fab-container2">

  </div>
	<div class="fab-container">
		<div class="fab fab-icon-holder">
			
		</div>
		<ul class="fab-options">
			<li>
				<span class="fab-label">Youtube</span>
				<div class="fab-icon-holder">
					<a target="_blank" href="https://www.youtube.com/watch?v=s9jDQXGsnDU&list=PLDeNeiwBHjwYg7_gz2vDA1D6QfBiMgIj6&index=70"><i class="fa-brands fa-youtube"></i></i></a>
				</div>
			</li>
			<li style="margin-bottom: 10px;">
				<span class="fab-label">Website</span>
				<div class="fab-icon-holder">
					<a target="_blank" href="https://s.id/javabitpro"><i class="fa-solid fa-globe"></i></a>
				</div>
			</li>			
		</ul>
	</div>

9. Klik ikon Save.

10. Klik tombol Terapkan/Deploy lalu pilih Deployment baru/New deployment.

11. Pastikan jenisnya adalah Aplikasi web, hak aksesnya Siapa saja lalu pilih Terapkan/Deploy.

12. Klik atau salin URL yang sudah di Deploy.

SELESAI !!!