Select items displayed next to each other with varying number of columns in HTML

Question

Select items displayed next to each other with varying number of columns in HTML

Users can select a medicine for each day of their plan, with the option to choose up to 7 days. I want to dynamically show a corresponding number of Select dropdowns based on the user's selection.

body {
    width: 500px;
    margin: 0 auto;
    padding: 50px;
  }
  
  div.elem-group {
    margin: 20px 0;
  }
  
  div.elem-group.inlined {
    width: 49%;
    display: inline-block;
    float: left;
    margin-left: 1%;
  }
  
  label {
    display: block;
    font-family: 'Nanum Gothic';
    padding-bottom: 10px;
    font-size: 1.25em;
  }
  
  input, select, textarea {
    border-radius: 2px;
    border: 2px solid #777;
    box-sizing: border-box;
    font-size: 1.25em;
    font-family: 'Nanum Gothic';
    width: 100%;
    padding: 10px;
  }
  
  div.elem-group.inlined input {
    width: 95%;
    display: inline-block;
  }
  
  textarea {
    height: 250px;
  }
  
  hr {
    border: 1px dotted #ccc;
  }
  
  button {
    height: 50px;
    background: orange;
    border: none;
    color: white;
    font-size: 1.25em;
    font-family: 'Nanum Gothic';
    border-radius: 4px;
    cursor: pointer;
  }
  
  button:hover {
    border: 2px solid black;
  }

  .btn-fetch{
    width: 120%;
    padding: 14px 20px;
    margin: 8px 5px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-color: #3498DB;
    color: white;
  
  }

    <form #datesForm = "ngForm" (ngSubmit)="checkDates(datesForm.value)">
    <div class="elem-group inlined">
      <label>First Day Of Your Plan</label>
      <input type="date" name="firstDate" required>
    </div>
    <div class="elem-group inlined">
      <label>Last Day Of Your Plan</label>
      <input type="date" name="lastDate" required>
    </div>
    <button class="btn-fetch" (click)="checkDates(datesForm.value)">Confirm Dates</button>
    <div class="elem-group" >
      <label>Select A Plan Number </label>
      <select  name="planId"  id="deviceoption" (click)="fetchPlans()" required>
          <option type=placeholder>Choose a number from the List</option>
      </select>
      <br><br>
      <select name="meds" required>
        <option value="">Choose a Medicine</option>
        <option value="medsName"></option>
    </select>
    </div>
    <button type="submit">Save the Plan</button>
</form>

If a user selects 5 days, there will be 5 instances of the "Choose Medicine" option, and if they select 7 days, there will be 7 instances. Any advice on how to achieve this dynamic functionality?

html css angular

Answer 1

Answer №1

To achieve your desired outcome, JavaScript is required. Initially, you must determine the number of days between the two specified dates. Following this calculation, you simply need to provide options in accordance with the calculated number of days.

// Function definition to validate a date
function isValidDate(date) {
    let d = new Date(date);
    return !isNaN(d.getTime());
}

function onDateChange() {
  // Obtain input elements
  let firstDate = document.getElementById("first-date");
  let lastDate = document.getElementById("last-date");

  // Get the select element
  let medsOption = document.getElementById("meds-options");
  
  // Validate both input values as dates
  if (!isValidDate(firstDate.value) || !isValidDate(lastDate.value)) {
      return;
  }

  // Convert input values into Date objects
  let date1Object = new Date(firstDate.value);
  let date2Object = new Date(lastDate.value);

  // Calculate time difference in milliseconds
  let difference = date2Object - date1Object;

  // Convert milliseconds to days
  let days = difference / (1000 * 60 * 60 * 24);

  // Clear any existing options
  medsOption.innerHTML = "";

  // Iterate through the range of days
  for (let i = 0; i < days; i++) {
      // Create a new option element
      let option = document.createElement("option");

      // Assign value and text to the option
      option.value = i + 1;
      option.text = "Choose a Medicine";

      // Append the option to the select element
      medsOption.appendChild(option);
  }
}

let firstDate = document.getElementById("first-date");
let lastDate = document.getElementById("last-date");

// Add event listeners to the input elements
firstDate.addEventListener("change", onDateChange);
lastDate.addEventListener("change", onDateChange);

body {
    width: 500px;
    margin: 0 auto;
    padding: 50px;
  }
  
  div.elem-group {
    margin: 20px 0;
  }
  
  div.elem-group.inlined {
    width: 49%;
    display: inline-block;
    float: left;
    margin-left: 1%;
  }
  
  label {
    display: block;
    font-family: 'Nanum Gothic';
    padding-bottom: 10px;
    font-size: 1.25em;
  }
  
  input, select, textarea {
    border-radius: 2px;
    border: 2px solid #777;
    box-sizing: border-box;
    font-size: 1.25em;
    font-family: 'Nanum Gothic';
    width: 100%;
    padding: 10px;
  }
  
  div.elem-group.inlined input {
    width: 95%;
    display: inline-block;
  }
  
  textarea {
    height: 250px;
  }
  
  hr {
    border: 1px dotted #ccc;
  }
  
  button {
    height: 50px;
    background: orange;
    border: none;
    color: white;
    font-size: 1.25em;
    font-family: 'Nanum Gothic';
    border-radius: 4px;
    cursor: pointer;
  }
  
  button:hover {
    border: 2px solid black;
  }

  .btn-fetch{
    width: 120%;
    padding: 14px 20px;
    margin: 8px 5px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-color: #3498DB;
    color: white;
  
  }

<form #datesForm = "ngForm" (ngSubmit)="checkDates(datesForm.value)">
    <div class="elem-group inlined">
      <label>First Day Of Your Plan</label>
      <input id="first-date" type="date" name="firstDate" required>
    </div>
    <div class="elem-group inlined">
      <label>Last Day Of Your Plan</label>
      <input id="last-date" type="date" name="lastDate" required>
    </div>
    <button id="confirm-dates-button" class="btn-fetch" (click)="checkDates(datesForm.value)">Confirm Dates</button>
    <div class="elem-group" >
      <label>Select A Plan Number </label>
      <select  name="planId"  id="deviceoption" (click)="fetchPlans()" required>
          <option type=placeholder>Choose a number from the List</option>
      </select>
      <br><br>
      <select id="meds-options" name="meds" required>
        <option value="">Choose a Medicine</option>
        <option value="medsName"></option>
    </select>
    </div>
    <button type="submit">Save the Plan</button>
</form>

Answer 2

To achieve your desired outcome, JavaScript is required. Initially, you must determine the number of days between the two specified dates. Following this calculation, you simply need to provide options in accordance with the calculated number of days.

// Function definition to validate a date
function isValidDate(date) {
    let d = new Date(date);
    return !isNaN(d.getTime());
}

function onDateChange() {
  // Obtain input elements
  let firstDate = document.getElementById("first-date");
  let lastDate = document.getElementById("last-date");

  // Get the select element
  let medsOption = document.getElementById("meds-options");
  
  // Validate both input values as dates
  if (!isValidDate(firstDate.value) || !isValidDate(lastDate.value)) {
      return;
  }

  // Convert input values into Date objects
  let date1Object = new Date(firstDate.value);
  let date2Object = new Date(lastDate.value);

  // Calculate time difference in milliseconds
  let difference = date2Object - date1Object;

  // Convert milliseconds to days
  let days = difference / (1000 * 60 * 60 * 24);

  // Clear any existing options
  medsOption.innerHTML = "";

  // Iterate through the range of days
  for (let i = 0; i < days; i++) {
      // Create a new option element
      let option = document.createElement("option");

      // Assign value and text to the option
      option.value = i + 1;
      option.text = "Choose a Medicine";

      // Append the option to the select element
      medsOption.appendChild(option);
  }
}

let firstDate = document.getElementById("first-date");
let lastDate = document.getElementById("last-date");

// Add event listeners to the input elements
firstDate.addEventListener("change", onDateChange);
lastDate.addEventListener("change", onDateChange);

body {
    width: 500px;
    margin: 0 auto;
    padding: 50px;
  }
  
  div.elem-group {
    margin: 20px 0;
  }
  
  div.elem-group.inlined {
    width: 49%;
    display: inline-block;
    float: left;
    margin-left: 1%;
  }
  
  label {
    display: block;
    font-family: 'Nanum Gothic';
    padding-bottom: 10px;
    font-size: 1.25em;
  }
  
  input, select, textarea {
    border-radius: 2px;
    border: 2px solid #777;
    box-sizing: border-box;
    font-size: 1.25em;
    font-family: 'Nanum Gothic';
    width: 100%;
    padding: 10px;
  }
  
  div.elem-group.inlined input {
    width: 95%;
    display: inline-block;
  }
  
  textarea {
    height: 250px;
  }
  
  hr {
    border: 1px dotted #ccc;
  }
  
  button {
    height: 50px;
    background: orange;
    border: none;
    color: white;
    font-size: 1.25em;
    font-family: 'Nanum Gothic';
    border-radius: 4px;
    cursor: pointer;
  }
  
  button:hover {
    border: 2px solid black;
  }

  .btn-fetch{
    width: 120%;
    padding: 14px 20px;
    margin: 8px 5px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-color: #3498DB;
    color: white;
  
  }

<form #datesForm = "ngForm" (ngSubmit)="checkDates(datesForm.value)">
    <div class="elem-group inlined">
      <label>First Day Of Your Plan</label>
      <input id="first-date" type="date" name="firstDate" required>
    </div>
    <div class="elem-group inlined">
      <label>Last Day Of Your Plan</label>
      <input id="last-date" type="date" name="lastDate" required>
    </div>
    <button id="confirm-dates-button" class="btn-fetch" (click)="checkDates(datesForm.value)">Confirm Dates</button>
    <div class="elem-group" >
      <label>Select A Plan Number </label>
      <select  name="planId"  id="deviceoption" (click)="fetchPlans()" required>
          <option type=placeholder>Choose a number from the List</option>
      </select>
      <br><br>
      <select id="meds-options" name="meds" required>
        <option value="">Choose a Medicine</option>
        <option value="medsName"></option>
    </select>
    </div>
    <button type="submit">Save the Plan</button>
</form>

Select items displayed next to each other with varying number of columns in HTML

Answer №1

Similar questions

The issue of importing images in Angular2 using TypeScript with Express is causing problems for Webpack

How to retrieve a stored value using Ionic 3 native storage

I am facing difficulties in installing the necessary node modules for my Angular project

Unable to locate the Bootstrap CSS file when deploying on PythonAnywhere

What is the procedure for assigning an element's background-color to match its class name?

Incorporate JavaScript to enable the transfer of text from one textarea to another upon clicking a button, while simultaneously clearing the original textarea

I'm having trouble getting the gutter padding to show up in one specific content block on my Bootstrap webpage. How can I troubleshoot and resolve this

Create a moving background gradient with styled-components

image in the background following the header

The assignment of Type Observable<Observable<any[]>> to Observable<any[]> is not valid

Using a video as a background in HTML

Stable placement in browsers using webkit technology

Ways to stop the click event from being triggered in JQuery

Creating Unique Spacing in Bootstrap Using Concise Text

Creating Instances of Variables Within a Class

How to retrieve information from a pre-populated <textarea> using Google Maps script in AngularJS

Angular - Implementing service worker to extract dynamic ID from route in "Notificationclick" event?

Adding to a webpage's URL with PHP prior to rendering the content

Is it beneficial to consolidate masterdata calls into a single call?

Angular2: AuthGuard malfunctioning with browser navigation controls