JavaScript Error: value.toUpperCase is not a valid method

I am attempting to implement a script that allows users to filter rows in a table based on the value they input. After updating a row, the page refreshes and all rows are displayed again. I am looking for a way to maintain the filtered rows after the refresh so it appears as if the page never refreshed.

I encountered an error: Uncaught TypeError: value.toUpperCase is not a function
    at filterTable (accounts.php:1270)
    at HTMLInputElement.<anonymous> (accounts.php:1291)
    at HTMLInputElement.<anonymous>

Here's the code snippet;

<table class="userprof" align='left'>
    <tr>
      <td class="footer">Filter:
        <input type="text" id="myInput" name="filter" style="color:black !important;" placeholder="Filter table" />
      </td>
    </tr>
  </table>

  
<script type="text/javascript">
// Store the input in a variable for reference.
var myInput = document.getElementById("myInput");
var savedValue = getSavedValue("myInput");

// Immediately filter the table and set the input value.
filterTable(savedValue);
myInput.value = savedValue;

//Save the value function - save it to localStorage as (ID, VALUE)
function saveValue(e) {
  var id = e.id; // get the sender's id to save it . 
  var val = e.value; // get the value. 
  localStorage.setItem(id, val); // Every time user writing something, the localStorage's value will override . 
}

//get the saved value function - return the value of "v" from localStorage. 
function getSavedValue(v) {
  if (!localStorage.getItem(v)) {
    return ""; // You can change this to your default value. 
  }
  return localStorage.getItem(v);
}

function filterTable(value) {
  console.log(value);
  var filter = value.toUpperCase();
  var rows = document.querySelector("#myTable tbody").rows;

  for (var i = 0; i < rows.length; i++) {
    var nameCol = rows[i].cells[1].textContent.toUpperCase();
    var rankCol = rows[i].cells[2].textContent.toUpperCase();
    var rankerCol = rows[i].cells[5].textContent.toUpperCase();
    var typeCol = rows[i].cells[6].textContent.toUpperCase();
    var emailCol = rows[i].cells[3].textContent.toUpperCase();
    if (nameCol.indexOf(filter) > -1 || rankCol.indexOf(filter) > -1 || rankerCol.indexOf(filter) > -1 || typeCol.indexOf(filter) > -1 || emailCol.indexOf(filter) > -1) {
      rows[i].style.display = "";
    } else {
      rows[i].style.display = "none";
    }
  }
}

myInput.addEventListener('keyup', function(event) {
  console.log(event); // Check if the event is fired.
  var value = event.target;
  saveValue(event);
  filterTable(value);
});

</script>

Answer №1

myInput.on('input', function(event) {
 console.log(event); // Verify if the event is triggered.
 var val = event.target.value;
 saveValue(event);
 filterItems(val);
});

The correct syntax is event.target.value. Please ensure to include the value property.

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

Execute Yarn commands from the main directory

In the midst of my project, I have various sub projects - one of which is dedicated to JavaScript. My intention is to employ this JavaScript project as a task runner for the entire endeavor using gulp. However, I've hit a snag in the process. The lay ...

Utilizing Gulp for optimizing JavaScript files for web browsers, including import statements

Creating Isomorphic React Components I am looking to transpile my React components server-side into a single bundle.min.js file. However, I am encountering an issue where the import statements are not being resolved in the resulting file. The specific fi ...

How to disable a specific array of dates in Ant Design range picker

Is there a way to block dates prior to the current date and specify certain dates that should also be disabled on the calendar? For example, I need to prevent selection of: Today: 2018-07-30 Dates to disable: [2018-08-10, 2018-08-12, 2018-08-20] When t ...

Steps for removing routing in Angular 2 after setting the folder as a dependency for another project

In my testing Angular project (referred to as project1), I am developing components and utilizing routing for organizational and aesthetic purposes. There is another Angular project (referred to as project2) which includes the component project-project1 i ...

Troubleshooting issues with JSON compatibility within the OnChange event

Initially, I wrote this code to retrieve a single data point. However, I realized that I needed more fields returned when the drop-down select menu triggered an onchange event. So, I switched to using JSON, but now it's not returning any data. The dro ...

Title remains consistent | Angular 4

Struggling to change the document title on a specific route. The route is initially set with a default title. { path: 'artikel/:id/:slug', component: ArticleComponent, data: {title: 'Article', routeType: RouteType.ARTICLE, des ...

Can we verify the state of a value in an object and simply get back the corresponding key?

In a function, I have an object that contains a mix of letters and numbers. The function is designed to take in an array of numbers, and then run a for-in loop that checks if any of the values in the array match the numbers stored in the object. If a match ...

Customize which days are enabled in the DatePicker

I'm in the process of developing a website with Office Fabric UI, but I haven't been able to figure out how to selectively enable specific days on the DatePicker component while disabling all others. My technology stack includes Nodejs and React ...

Is there a more efficient approach to configuring properties in AngularJS while maintaining a binding?

When trying to set a property in a service equal to data returned from a network call, the conventional method goes like this: //SERVICE// thisService.property = data; //SERVICE// The corresponding controller code usually looks something like this: //CO ...

What is the best way to incorporate my Switch component into my Table component as a distinct column, while also maintaining separate states for each component?

My journey into learning React.js has been exciting so far. However, I am facing some confusion when it comes to stateful components. Currently, I am utilizing Bootstrap tables for creating a table and successfully fetching data using GET requests. Additio ...

What methods can I use to ensure this car rotates smoothly, whether or not I combine meshes in Three.js?

My current challenge involves creating a car game here. The issue is that although the wheels are rotating, they are not moving in sync with the car itself. Here is the code snippet from my car.js file: export function createCar(x, y, z, color) { const ...

Encountering the error message "require is not defined" while running tests in AngularJS with Karma

I have implemented AngularJS with Browserify for my app development. To conduct testing, I have decided to utilize Karma. The configuration file I have set up is as follows: module.exports = function(config) { config.set({ basePath: '', ...

Ensure that both Vue methods are executed synchronously

I am working with two Vue methods: (1) this.retrieveSavedSearches() (2) this.updateDefaultSelectOption() Is there a way to ensure that method (2) only executes after method(1) has completed its execution? ...

Stop the default behavior of a link based on the Ajax response

A controller has been created in Magento to check if there are any products in a list. If products exist in the list, it will return true; otherwise, it will return false. The front-end below triggers an ajax call. It must remain a link and cannot be chan ...

Saving a JSON array into separate JS variables using AJAX

I need to extract multiple values from a mySQL Query and store them in different JS Variables. Below is the AJAX code in my JS file: $.ajax({ async:false, url: "get_data.php", type: "POST", data: { d1: 'd ...

Adding a mute/unmute button to your web browser's audio player: A quick guide

My code is functioning perfectly, but I am facing an issue with the lack of mute/unmute buttons. Can someone please help me figure out how to add them? <audio src="MUSIC URL" autoplay loop> <p>Your browser does not support the audio elem ...

Submitting a JSPX form to interact with PHP backend

Can a JSP/JSPX form be used to submit data to a PHP file? The PHP file will handle validation and database updates, then send a response back to the same JSP/JSPX form. The process should be done using AJAX with jQuery. What steps are involved in achievi ...

The Vue.js router is malfunctioning

After searching through several posts on Stackoverflow about issues with routes not functioning properly, I have yet to find a solution for why my routes are not working. This is how my router looks: import Vue from 'vue' import Router from &ap ...

Steps to successfully set up a React application without encountering any installation errors

Hey everyone, I've been trying to install React on my system for the past two days but keep encountering errors. Initially, I used the commands below to install the React app and it worked smoothly: 1. npm install -g create-react-app 2. create-react- ...

Is it possible to use square brackets in conjunction with the "this" keyword to access a class property using an expression?

export class AppComponent implements OnInit { userSubmitted = false; accountSubmitted = false; userForm!: FormGroup; ngOnInit(): void {} onSubmit(type: string): void { this[type + 'Submitted'] = true; if(this[type + 'For ...