Deliver search findings that are determined by matching criteria, rather than by identification numbers

I am seeking to return a JSON match upon form submission, rather than simply searching for a specific ID.

However, I am uncertain about how to structure this. I have the ability to search for the necessary match in a JavaScript document within one of my node modules, but I am unsure of how to implement it.

The following line of code is what I am referencing:

  const ELS_form = document.getElementByID('element');

Below is all the code within a script tag:

 async function onFormSubmit(ev) {ev.preventDefault();
 const EL_form = ev.currentTarget;
                return (await fetch(EL_form.action)).json();
                    }
                                  
 const ELS_form = document.getElementByID('element');
 ELS_form.forEach((el) => el.addEventListener("submit", (ev) => {
 onFormSubmit(ev).then(res => console.log(res));
                    })); 

Answer №1

Remember to use getElementById instead of getElementByID. If you are submitting a form with an id, there is no need for using forEach to add an event listener.

I have made some modifications to your code and included a sample Form Action below that may be helpful to you:

async function onFormSubmit(ev) {
    ev.preventDefault();
    let EL_form = ev.currentTarget;
    return (await fetch(EL_form.action)).json();
}

const ELS_form = document.getElementById('element');
ELS_form.addEventListener("submit", (ev) => {
    onFormSubmit(ev).then(res => console.log(res));
}); 
<form id="element" action="https://fakestoreapi.com/products/1">
    <button type="submit">Submit</button>
</form>

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

Having trouble with vscode [ctrl+click] on 'vue single-file components' and 'go to definition'? It's not working for me

// src/ui/tabbar/Index.vue <template> <div> my-tabbar component here </div> </template> // src/ui/index.js import MyTabbar from './tabbar/Index.vue' export default { install(Vue) { Vue.component(MyTabbar.na ...

Is there a way to use ng-click to switch the ng-src of one image with that of another?

*I made updates to the plunkr and code to reflect my localhost version more accurately. It turned out that the AngularJS version was not the issue even after fixing the previous plunkr.* Let me start by saying that I am facing some challenges with Angular ...

What is the best way to implement filter functionality for individual columns in an Angular material table using ngFor?

I am using ngFor to populate my column names and corresponding data in Angular. How can I implement a separate filter row for each column in an Angular Material table? This filter row should appear below the header row, which displays the different column ...

What is the process for displaying HTML page code received from an AJAX response?

My current project involves implementing JavaScript authentication, and I have a specific requirement where I need to open an HTML file once the user successfully logs in. The process involves sending an AJAX request with the user's username and passw ...

Is there a way for me to modify this carousel so that it only stops when a user hovers over one of the boxes?

I am currently working to modify some existing code to fit my website concept. One aspect I am struggling with is how to make the 'pause' function activate only when a user hovers over one of the li items, preventing the carousel from looping end ...

The first time I tried using React-app, I encountered an error that read "[email protected] postinstall"

I've been struggling to set up create-react-app, encountering the same issue repeatedly. I tried uninstalling and reinstalling node.js, but only the package.json and my-app folder were created. No src or other required folders were generated. Termina ...

Transforming text into numbers from JSON response with *ngFor in Angular 6

I'm currently attempting to convert certain strings from a JSON response into numbers. For instance, I need to change the zipcode value from "92998-3874" to 92998-3874. While doing this, I came across a helpful resource on Stack Overflow. However, I s ...

The verification of form is not done using an if statement

There are two forms in my code named formA and comments that I need to submit via AJAX. However, the current if and else conditions do not correctly identify the form and always trigger the alert message hello3. Here is the JavaScript function: function ...

What is the best way to align columns after adding or deleting columns in an el-table using Element UI in Vue.js?

Is there a way to develop a table/datagrid using Element UI that allows users to choose which columns are displayed? I've already made an attempt, and you can find it here. I'm also looking for a solution that enables users to adjust the width o ...

Exploring the world of React and Material Ui

As I delve into working with Material Ui in React, I am encountering difficulties when trying to customize the components. For instance, let's take a look at an example of the AppBar: import React from 'react'; import AppBar from 'mat ...

What is the best way to transfer specific data from one field within a JSON column to another in PostgreSQL?

Let's say we have a table named users with a JSON column called "foo". The values in that column are structured like this: "{ field1: ['bar', 'bar2', 'bar3'], field2: ['baz', 'baz2', 'baz3&apo ...

Obtain base64 representation of a file using plupload file uploader

I am currently utilizing the Plupload Uploader. My objective is to convert the uploaded file to base64 and transmit it within a SOAP envelope. I have successfully created the envelope and utilized my web-service. However, I am wondering how I can retrieve ...

Best practice for retrieving the $scope object inside the ng-view directive

Check out my plunk. Incorporating ngRoute into my project. I want to increase a value using ng-click, and upon clicking "Show total", the ng-view template should display the updated value. However, it seems like the scope is not being accessed as expecte ...

Leverage the Google Drive API for the storage of app-specific data

I'm currently developing a JavaScript application that runs on the client side and need to store a JSON object containing configuration details in a Google Drive Appdata file. Through the Google Drive API, I can successfully check for the file within ...

Retrieve data from a text file using ajax and then return the string to an HTML document

Just starting out with ajax, I have a text file containing number values For example, in ids.txt, 12345 maps to 54321 12345,54321 23456,65432 34567,76543 45678,87654 56789,98765 Here is the Html code snippet I am using <html><body> < ...

Quickly remove items from a list without any keywords from the given keywords list

This spreadsheet contains two sheets named "RemoveRecords" and "KeywordsList". I need to use app scripts to remove any records that are not included in the "KeywordsList" sheet. This should be done by searching through the "ArticleLink" column. Although ...

I am facing an issue where I am unable to view JSON objects despite utilizing json2html library

Currently, I am facing a minor problem while trying to incorporate json2html into a project. Despite running the transform function successfully, it is not including the JSON objects as expected. In my setup, I execute a call to MongoDB, retrieving the JS ...

The rendering of the Angular 2 D3 tree is not functioning properly

Attempting to transition a tree created with d3 (v3) in vanilla JavaScript into an Angular2 component has been challenging for me. The issue lies in displaying it correctly within the component. Below is the code snippet from tree.component.ts: import { ...

Animation not fluid with ReactCSSTransitionGroup

Currently, I am in the process of developing an image carousel that showcases images moving smoothly from right to left. However, despite its functionality, there seems to be a slight jaggedness in the animation that I can't seem to resolve. Interesti ...

Is it possible to transform a ReadonlyArray<any> into a standard mutable array []?

At times, when working with Angular functions and callbacks, they may return a ReadonlyArray. However, I prefer using arrays in the traditional way and don't want to use immutable structures like those in Redux. So, what is the best way to convert a ...