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 data-bs-toggle="ts-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"  selected>CCC</option>
        </select>
      </div>

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




      <div class="mb-3">

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

        <select data-bs-toggle="ts-select" name="crew-select-more" id="crew-select-more" aria-label="Select a Member" data-placeholder="Select a member...">
          <option value=""></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[data-bs-toggle="ts-select"]+.ts-wrapper .ts-control {

  display: flex;
  width: 100%;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  padding: 0.375rem 0.75rem;
  color: var(--bs-body-color);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-clip: padding-box;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.9997 13.1714L16.9495 8.22168L18.3637 9.63589L11.9997 15.9999L5.63574 9.63589L7.04996 8.22168L11.9997 13.1714Z'%3E%3C/path%3E%3C/svg%3E");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 24px;
}

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

.ts-control .item {
  font-size: 1rem;
  font-weight: 400;
}
.has-item .ts-control{
  background-image:none;
}

.focus .ts-control {
    
    cursor: text;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.9997 10.8284L7.04996 15.7782L5.63574 14.364L11.9997 8L18.3637 14.364L16.9495 15.7782L11.9997 10.8284Z'%3E%3C/path%3E%3C/svg%3E");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 24px;
}

JavaScript

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

function initForm() {

  //caching
  const selects = document.querySelectorAll('select[data-bs-toggle="ts-select"]');
  const form = document.querySelector('#form-crew');

  //add tom-select to selecs:
  selects.forEach((el) => {
    let settings = {
      plugins: {
        'clear_button': {
          'title': 'Remove all selected options',
        }
      },
      onClear: () =>{
          
      // we reset te TS to the empty option!
      // Requires an empty option value=""
				el.electedIndex = 0;
      }

    };
    
   let TS =  new TomSelect(el, settings);  
   
    
  });

  form.addEventListener('submit', (event) => handleFormSubmit(event, form));
  form.querySelector('#form-reset').addEventListener('click', (event) => handleFormReset(event, form));

}


// initialise the form
initForm();



function handleFormSubmit(event, form) {

  console.log('process form data...');

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


  let formData = new FormData(form);
  let fields;

  // Iterate through form elements to get multiple select items and conver to array
  for (const element of form.elements) {
    if (element.tagName === 'SELECT' && element.multiple) {
      const values = Array.from(element.selectedOptions).map(option => option.value);

      // Delete the original field before appending the modified value
      formData.delete(element.name);

      formData.append(element.name, values.join(','));
    }
  }


  for (let pair of formData.entries()) {
    console.log(pair[0] + ': ' + pair[1]);
    fields += `Field: ${pair[0]} : ${pair[1]}\n`;
  }

  alert(fields);
}


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

 console.log('resetting...');
 
 // for reset we unclear the cleared items:
selects = form.querySelectorAll('select[data-bs-toggle="ts-select"]')


}