JavaScript: encountering difficulties fetching data from dynamic table during click event

Question

JavaScript: encountering difficulties fetching data from dynamic table during click event

I am currently developing a lightweight web application tailored for the admissions team of a healthcare organization. The goal is to have potential customers (patients) fill out forms on our website, with my app allowing the admissions staff to view a list of these forms and assign each patient submission to a specific member of the admissions team. To achieve this, I have integrated a select element in every row of the search results, enabling users to associate each form entry with a team member through a dropdown selection. Additionally, I've included another select element to track the status of each patient (whether they have been contacted, require follow-up, etc.). The patient form submissions are displayed as search results based on the following HTML template.

<template id="rowtemplate">
      <tr scope="row">
       <th class="col1" id="patient">1</th><!--PROBLEM - NO IDs in Template...-->
       <th class="col2">1</th>
       <th class="col3">1</th>
       <th class="col4">1</th>
       <th class="col5"><select class="form-select staff" id="staffDD"> <!--PROBLEM - NO IDs in Template...-->
          <option>Assign To</option>
          <option>Kristen</option>
          <option>Heather</option>
          <option>Tammy</option>
          </select> </th>
      <th class="col6"><select class="form-select status" id="newStatus">
        <option selected>New Status</option>
        <option value="Needs Contact">Needs Contact</option>
        <option value="Needs Follow-up">Needs Follow-up</option>
        <option value="Contacted">Contacted</option>
        <option value="Not Interested">Not Interested</option>
        <option value = "Enrolled">Enrolled</option>
        <option value="Alumni">Alumni</option>
        </select> </th>
      <th class="col7"><button class="btn-primary-light add" id="detailbutton">DETAILS</button></th>
        </tr>
      </template>

My primary question revolves around capturing the selected item from the dropdown menu and passing it to the server side. While combining the chosen selection with the patient name or ID appears plausible for sending to the server, extracting data from the staff assignment select poses challenges. One method could involve including a submit choices button on each row to append the selected data as a data attribute on that particular button. Subsequently, JavaScript could be utilized to acquire the patient's name and staff selection via click events on the submit button. Are there alternative methods to retrieve information from the search result row without relying on a submit button?

The linked image excludes the first column of patient names due to privacy reasons, though such data is present. My aim is to efficiently obtain the selected data within the dropdowns using JavaScript...

Any insights or suggestions regarding techniques would be greatly appreciated.

javascript html css bootstrap-4

Answer 1

Answer №1

I'm not exactly sure what you're referring to with PROBLEM - NO IDs in Template.

However, I believe you can easily resolve this issue by making some adjustments to your HTML code. You don't necessarily need to use an id in this case; <select><option> only requires a value to function properly. To identify the element, you can utilize the class attribute instead of an ID if one is not provided.

Here's the revised code:

<th class="col5"><select class="form-select staff">
          <option value="">Assign To</option>
          <option value="Kristen">Kristen</option>
          <option value="Heather">Heather</option>
          <option value="Tammy">Tammy</option>
</select> 
</th>

This way, you can monitor the selected value using

document.querySelector(".staff").addEventListener("change", function (event) {
     const value = event.target.value; 
     // implement necessary code
});

Alternatively, if you prefer handling it only upon submission

const value = document.querySelector(".staff").value;
// implement necessary code

Answer 2

I'm not exactly sure what you're referring to with PROBLEM - NO IDs in Template.

However, I believe you can easily resolve this issue by making some adjustments to your HTML code. You don't necessarily need to use an id in this case; <select><option> only requires a value to function properly. To identify the element, you can utilize the class attribute instead of an ID if one is not provided.

Here's the revised code:

<th class="col5"><select class="form-select staff">
          <option value="">Assign To</option>
          <option value="Kristen">Kristen</option>
          <option value="Heather">Heather</option>
          <option value="Tammy">Tammy</option>
</select> 
</th>

This way, you can monitor the selected value using

document.querySelector(".staff").addEventListener("change", function (event) {
     const value = event.target.value; 
     // implement necessary code
});

Alternatively, if you prefer handling it only upon submission

const value = document.querySelector(".staff").value;
// implement necessary code

JavaScript: encountering difficulties fetching data from dynamic table during click event

Answer №1

Similar questions

When utilizing the HTML5 range input type, the value of 'this.value' may not be defined

Use an if-else statement in jQuery with selectors to determine if a specific div element has been added to it

Utilizing the onclick attribute in combination with a partial HTML button

What could be causing the lack of functionality in my nested CSS transition?

Concealing a hyperlink depending on the value chosen in a dropdown menu

Question about sending multiple Axios POST requests with parameters

Execute a JavaScript function when a form is submitted

activate the bootstrap popover by double-clicking instead of a single click

The implement of the filter function in JavaScript is a powerful tool

Issue with .html causing .hover to malfunction

Creating an array dynamically in response to an AJAX call

There is no method 'btnLoginTest_Click' that can be overloaded with 0 arguments

Elegant transition effects for revealing and hiding content on hover

Asynchronously retrieving data in .NET using Angular

Another method to verify an input using HTML5 regex and JavaScript

What is the reason behind V8's perplexing error notification?

Check each field in a loop and if validation for any field fails, then return false using jQuery

Handling uninitialized reactive objects in Typescript Vue components

Troubleshooting: Missing MapState in Vuex4 for Vue3 within an MVC project

Is it possible to utilize a variable as a column name in MySQL when working with Express?