Create a log table specifically for tracking changes made to the drop-down menu

I need to create a Change log table that will track any changes made in the drop-down menu. For instance, I am working on a worksheet with a select menu called Results which includes options like Positive, Negative, Unknown. I want the system to log any changes from Positive to Negative or any other option with a timestamp.

Currently, I have a version of the code that works with input fields but it doesn't capture changes in the select field (drop-down menu).

Here is the code I am using for input fields, which is functioning properly:

$(document).on('focusin', 'input', function()
  {
    console.log("Saving value " + $(this).val());
    $(this).data('val', $(this).val());
   }
   ).on('change','input', function(){
    var prev = $(this).data('val');
    var current = $(this).val();
    var date1 = Date();
     if (prev !== current) {
         $(this).css("color", $currentDayColor);
         $specimenInfo = "";

    if((prev != current) && (prev!= null) && (prev != " ")){
    document.getElementById("demo").innerHTML = document.getElementById("demo").innerHTML + $specimenInfo + 'The Prev Value is :' + prev +' Which was changed on :'+ date1+'<br>';
    document.getElementById("demo2").innerHTML = document.getElementById("demo2").innerHTML + $specimenInfo + ' The Current Value is :' + current +' Which was changed on :'+ date1 + '<br>';
    console.log("Prev value " + prev);
    console.log("New value " + current);
    }
     };
});

Answer №1

If your form fields are functioning properly, you can easily switch from using 'input' to 'select' in your jQuery selector. Here is an example:

$(document).on('focusin', 'select', function()
  {
    console.log("Saving value " + $(this).val());
    $(this).data('val', $(this).val());
   }
   ).on('change','select', function(){
    var prev = $(this).data('val');
    var current = $(this).val();
    var date1 = Date();
     if (prev !== current) {
         $(this).css("color", $currentDayColor);
         $specimenInfo = "";

    if((prev != current) && (prev!= null) && (prev != " ")){
    document.getElementById("demo").innerHTML = document.getElementById("demo").innerHTML + $specimenInfo + 'The Prev Value is :' + prev +' Which was changed on :'+ date1+'<br>';
    document.getElementById("demo2").innerHTML = document.getElementById("demo2").innerHTML + $specimenInfo + ' The Current Value is :' + current +' Which was changed on :'+ date1 + '<br>';
    console.log("Prev value " + prev);
    console.log("New value " + current);
    }
     };
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

utilize a modal button in Angular to showcase images

I am working on a project where I want to display images upon clicking a button. How can I set up the openModal() method to achieve this functionality? The images will be fetched from the assets directory and will change depending on the choice made (B1, ...

Comparing jQuery's min-width and width properties: A guide on eliminating pixels

Exploring some basic jQuery and JavaScript here. When I use the .width() method, I get an integer value. However, when I use .css('min-width'), it returns a value in pixels which makes it challenging to perform calculations. What would be the be ...

Tips on extracting information from an AJAX call using JQuery

My current project involves utilizing a webapi in asp.net that outputs JSON data. I am looking to integrate this webapi with JQuery within a php-created website. The following is the JQuery code I am using to retrieve information from the webapi: $.ajax( ...

Booting up the node.js environment with the help of a C++ application

Is it possible to start Node.js from a C++ application? The reason I ask is because I have a C++ console application that launches a JavaScript application which uses require('os'). However, it is failing with the error "Uncaught ReferenceError: ...

Rotating elements with timed jQuery

I'm having trouble getting the selector to rotate at different intervals. I attempted using an if/else statement to make the first rotation occur after 3 seconds and subsequent rotations occur after 30 seconds. Unfortunately, it's rotating every ...

Tips on adjusting the dimensions of a switch in kendo UI angular with CSS

Currently, I am utilizing angular in combination with Kendo ui. Is there a way to modify the dimensions of the switch button in Kendo UI Angular using CSS? ...

I'm experiencing an issue when trying to align TextPath to the center in an SVG file - a certain character

When using the startOffset or text-anchor attributes, I noticed that some characters are missing. How can I fix this issue? Thank you. It appears that in this scenario, the characters `1234` are missing. <svg xmlns="http://www.w3.org/2000/svg" versi ...

Embracing the Quirks of JSON: A Call for a

Currently, I am in the process of developing a webpage that involves incorporating four distinct JSON entities (objects, arrays). Excuse my lack of appropriate jargon. Upon receiving the JSON data, it is structured as an object with numerous sub-objects, ...

Obtaining User's Geolocation without the need for an index.html file

Greetings! I am in the process of developing a web application that needs to track user location upon button click. My choice for this project is the M.E.R.N stack, and based on the tutorials I have watched so far, there seems to be no need for an index.ht ...

Updating an iframe's content URL

I am currently working on building a website using Google Web Design and everything is going well so far. I have added an iFrame to the site and now I am trying to figure out how to change its source when a button is pressed. Most of the information I fo ...

Node.js Application with Role-Based Login

I am currently working on implementing role-based administration. When a user is created, the database stores a "1" for Admin or a "2" for a normal user. I want to retrieve this information from the database and display the corresponding start page based o ...

Expanding the text box in PHP to incorporate new lines

So I have an HTML form where users enter addresses in a text box. The PHP code that processes this input looks like this: $address = $_POST["address"]; echo $address; The output currently comes out as one long line, for example: The Manager, Scotia b ...

Envelop the phrases onto a fresh line

I'm having trouble getting the text inside a div to display correctly. When the text is too long, it just keeps stretching instead of breaking into new lines. How can I make sure that the content displays as a block within the div? Thank you. .box ...

Stop changes to CSS during drag and drop operations

Is there a way to prevent the CSS of a dropped element from being updated and keep its original look when I set disabled on a drop? $( "myDiv" ).droppable( { drop: function( event, ui ) { $(this).droppable('disable'); } }); Cur ...

Instructions for passing the chosen value to Django

I am struggling to set up a search button using Ajax and Django. I need to send the selected value to the server, but I can't seem to retrieve the value from the select HTML tag. The variable value always ends up empty ({"obj":""}). Any ideas? HTML : ...

Deleting a row from a table in AngularJS can be accomplished by following these steps

I am having trouble with deleting rows from a table using angularjs. When I try to delete a row, it ends up deleting the previous row instead of the correct one. How can I fix this issue? Please check out the working DEMO Here is the code snippet: < ...

How can I smoothly navigate to the top of a page using AngularJS?

After receiving an ajax call response using angularjs, I am looking to automatically scroll to the top of the page. The purpose is to bring focus to alert messages displayed at the top of the page upon receiving the ajax response. Appreciate any guidance ...

Tips for designing a customizable color scheme for your website

Are you looking to implement a changeable color scheme for your website? Getting started can be daunting, especially if you're unfamiliar with sass. Would appreciate it if anyone could share some helpful tutorials or links? For example: example ...

Vue.js - when it comes to rounding off digits, I keep getting unexpected results

Currently, I am in the process of calculating my totals and I need to ensure that they are fixed to 2 decimal places. Here is a snippet of my code: this.selectedCompaniesDetails.forEach((company) => { if(company.id == p.compa ...

What causes the shift in the position of the div element?

I have been struggling with a problem in my code. Whenever I hover over this element, it rotates as intended but it also changes its position. I can't figure out why this is happening. Can someone please help me debug this? I would greatly appreciate ...