JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tom-select/dist/css/tom-select.css">
<script src="https://cdn.jsdelivr.net/npm/tom-select/dist/js/tom-select.complete.min.js"></script>
<div class="container m-1">
  <div class="row">

    <form id="form-crew">
      <div class="mb-3">
        <label for="exampleInputEmail1" class="form-label">Email address</label>
        <input type="email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="[email protected]">
        <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
      </div>

      <div class="mb-3">
        <label for="crew-select">Crew Selection</label>
        <select class="select" name="crew-select" id="crew-select" aria-label="Select Members" multiple placeholder="Select members...">
          <option value="">Select members...</option>
          <option value="AAA" data-captain="true" data-drivers-license="true">AAA</option>
          <option value="BBB" data-captain="false" data-drivers-license="true">BBB</option>
          <option value="CCC" data-captain="false" data-drivers-license="false">CCC</option>
        </select>
      </div>

      <div class="mb-3 form-check">
        <input type="checkbox" name="checkbox-01" class="form-check-input" id="exampleCheck1">
        <label class="form-check-label" for="exampleCheck1">Check me in</label>
      </div>




      <div class="mb-3">

        <label for="crew-select">More Crews</label>

        <select class="select" name="crew-select-more" id="crew-select-more" aria-label="Select a Member" placeholder="Select a member...">
          <option value="">Select a member...</option>
          <option value="AAA" data-captain="true"...

CSS

.plugin-clear_button.single .clear-button {
  /*fix fault in plugin css should be 0px for calculations */
  --ts-pr-caret: 0px;
}

/* bootstapping */


.select+.ts-wrapper .ts-control {

  display: flex;
  width: 100%;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--bs-body-bg);
  background-clip: padding-box;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

}

.ts-control input {
  color: var(--bs-secondary-color);
  font-size: 1rem;
  opacity: 1;
}

.ts-control .item {
  font-size: 1rem;
  font-weight: 400;
}

JavaScript

// testing tom-select https://tom-select.js.org/

function initForm() {

  //caching
  const selects = document.querySelectorAll('.select');
  const form = document.querySelector('#form-crew');

  //add tom-select to selecs:
  document.querySelectorAll('.select').forEach((el) => {
    let settings = {
      plugins: {
        'clear_button': {
          'title': 'Remove all selected options',
        }
      },

    };
    new TomSelect(el, settings);
  });


  form.addEventListener('submit', handleFormSubmit);
  form.addEventListener('reset', (event) => handleFormReset(event, form));

}


// initialise the form
initForm();



function handleFormSubmit(event) {
  console.log('process form data...');

  event.preventDefault(); // Prevents the default form submission


  var formData = new FormData(document.querySelector('form'))

  // Now, you can do something with formData
  // For example, log it to the console
  for (let pair of formData.entries()) {
    console.log(pair[0] + ': ' + pair[1]);
  }


}


// reset form elements using the clear button plugin
function handleFormReset(event, form) {

  console.log('resetting...');

  // Select .select elements within the form
  const selects = form.querySelectorAll('.select');

  // Trigger clear
  selects.forEach(select => {

    if (select.tomselect) {
      select.tomselect.clear();
    }

  });



}