What steps should I follow to design a unique select element using divs?

Question

What steps should I follow to design a unique select element using divs?

In my process of creating a unique custom design, I opted not to utilize a select element. Instead, I attempted to retrieve the value in handleSubmit(), but it kept displaying as undefined in the console.

https://i.sstatic.net/xZLuo.png

const handleSubmit = (event) => {
  event.preventDefault();
  var timing = document.getElementById("timings-id");
  console.log(timing.value);
}

<form>
  <div class="timings" id="timings-id">
    <div value="01:00">01:00</div>
    <div value="02:00">02:00</div>
    <div value="03:00">03:00</div>
    <div value="04:00">04:00</div>
    <div value="05:00">05:00</div>
    <div value="06:00">06:00</div>
    <div value="07:00">07:00</div>
    <div value="08:00">08:00</div>
    <div value="09:00">09:00</div>
    <div value="10:00">10:00</div>
    <div value="11:00">11:00</div>
    <div value="12:00">12:00</div>
  </div>
  <button type="submit" onclick="handleSubmit()">BOOK<button>
</form>

javascript html css forms select

Answer 1

Answer №1

If you need a module to calculate the chosen hours, consider using the code snippet provided below:

function SelectTime(node) {
  var selectedHours = {};
  
  function getChosenTimes() {
    return Object.keys(selectedHours).filter(function(hour) {
      return selectedHours[hour];
    });
  }
  
  function toggleTimeSelection(ev) {
    var timeKey = ev.target.dataset.value;
    var isSelected = ev.target.classList.contains('selected');
    
    selectedHours[timeKey] = !isSelected;
    ev.target.classList.toggle('selected');
  }
  
  node.addEventListener('click', toggleTimeSelection);
  
  return {
    getChosenTimes: getChosenTimes
  };
}

const form = document.querySelector('form');
const timeSelector = SelectTime(document.querySelector('#timings-id'));

form.addEventListener('submit', function(ev) {
  ev.preventDefault();
  console.log(timeSelector.getChosenTimes());
})

.timings div {
  padding: .25rem .5rem;
  cursor: pointer;
}

.selected {
  background: skyblue;
}

<form>
   <div class="timings" id="timings-id">
     <div data-value="01:00">01:00</div>
     <div data-value="02:00">02:00</div>
     <div data-value="03:00">03:00</div>
     <div data-value="04:00">04:00</div>
     <div data-value="05:00">05:00</div>
     <div data-value="06:00">06:00</div>
     <div data-value="07:00">07:00</div>
     <div data-value="08:00">08:00</div>
     <div data-value="09:00">09:00</div>
     <div data-value="10:00">10:00</div>
     <div data-value="11:00">11:00</div>
     <div data-value="12:00">12:00</div>
   </div>
  <button type="submit">CONFIRM</button>
</form>

Answer 2

If you need a module to calculate the chosen hours, consider using the code snippet provided below:

function SelectTime(node) {
  var selectedHours = {};
  
  function getChosenTimes() {
    return Object.keys(selectedHours).filter(function(hour) {
      return selectedHours[hour];
    });
  }
  
  function toggleTimeSelection(ev) {
    var timeKey = ev.target.dataset.value;
    var isSelected = ev.target.classList.contains('selected');
    
    selectedHours[timeKey] = !isSelected;
    ev.target.classList.toggle('selected');
  }
  
  node.addEventListener('click', toggleTimeSelection);
  
  return {
    getChosenTimes: getChosenTimes
  };
}

const form = document.querySelector('form');
const timeSelector = SelectTime(document.querySelector('#timings-id'));

form.addEventListener('submit', function(ev) {
  ev.preventDefault();
  console.log(timeSelector.getChosenTimes());
})

.timings div {
  padding: .25rem .5rem;
  cursor: pointer;
}

.selected {
  background: skyblue;
}

<form>
   <div class="timings" id="timings-id">
     <div data-value="01:00">01:00</div>
     <div data-value="02:00">02:00</div>
     <div data-value="03:00">03:00</div>
     <div data-value="04:00">04:00</div>
     <div data-value="05:00">05:00</div>
     <div data-value="06:00">06:00</div>
     <div data-value="07:00">07:00</div>
     <div data-value="08:00">08:00</div>
     <div data-value="09:00">09:00</div>
     <div data-value="10:00">10:00</div>
     <div data-value="11:00">11:00</div>
     <div data-value="12:00">12:00</div>
   </div>
  <button type="submit">CONFIRM</button>
</form>

Answer 3

Answer №2

To achieve this, one method is to set click event handlers on your inner divs and then utilize the onclick function to add a data-value attribute to the parent container.

const timeDiv = document.getElementById("time-container");
const valueContainers = timeDiv.querySelectorAll("div");
const confirmButton = document.getElementById("confirm-button");

valueContainers.forEach((container) => {
  container.addEventListener("click", (e) => {
    timeDiv.dataset.value = e.target.dataset.value;
  });
});

const handleConfirm = (event) => {
  event.preventDefault();
  var selectedTime = document.getElementById("time-container");
  console.log(selectedTime.dataset.value);
}

confirmButton.addEventListener("click", handleConfirm);

Answer 4

To achieve this, one method is to set click event handlers on your inner divs and then utilize the onclick function to add a data-value attribute to the parent container.

const timeDiv = document.getElementById("time-container");
const valueContainers = timeDiv.querySelectorAll("div");
const confirmButton = document.getElementById("confirm-button");

valueContainers.forEach((container) => {
  container.addEventListener("click", (e) => {
    timeDiv.dataset.value = e.target.dataset.value;
  });
});

const handleConfirm = (event) => {
  event.preventDefault();
  var selectedTime = document.getElementById("time-container");
  console.log(selectedTime.dataset.value);
}

confirmButton.addEventListener("click", handleConfirm);

What steps should I follow to design a unique select element using divs?

Answer №1

Answer №2

Similar questions

Ways to mandate adjusting an option in <select> tag

Exploring the combination of Babel and Next.js: Integrating custom scripts into a project

Issue with Swiper js "autoheight" not resizing correctly for the height of the first slide upon page initialization

Start a timer in CodeIgniter when a button is clicked and show the time elapsed

The `introJs()` API encounters issues when connected to an element within a jQuery modal dialog box

Error in hook order occurs when rendering various components

Tips for stopping the current webpage from redirecting to a different page upon refreshing

Develop a DIV element that remains constant throughout different web pages without having to reload

The image upload failed: the server could not locate the requested URL

When trying to add the @babel/transform-runtime plugin, an error occurs stating "Cannot access the property 'Reactstrap' as it is

using outlines for FontAwesome icons in React Native

execute a function when an image is clicked using jQuery

Encountered an issue while trying to access the length property of an undefined value within an aside

Issue with displaying multiple checkboxes using Materialize CSS in combination with Leaflet for web-mapping overlays

Trouble with controlling the speed of ajax requests while using vue-multiselect and lodash

Angular's two-way binding feature allows the use of a variable as a string without directly assigning it to

Keep an ongoing execution of a node.js file by sending an HTTP request repeatedly

Using JavaScript to halt the playback of HTML5 video in 'injected' HTML code

sticky position is functional in Chrome, however it does not work in Firefox

What steps should I take to either combine my two functions in my script or ensure they are executed in a specific sequence?