Pass information from an HTML input field to the backend using JavaScript

Question

Pass information from an HTML input field to the backend using JavaScript

Currently, I am utilizing Bootstrap within my HTML to develop a search page that will allow users to input a SQL query. Once the user enters their SQL query, it will be sent to a backend system that will execute the query in a database. The backend code is kept separate from the front-end code, which has made it challenging for me to figure out how to transfer the query text to the backend.

I am struggling with coming up with the right kind of function to handle this task. My idea is to create an onclick=function that would be responsible for sending the text to the backend. However, despite searching, I have not been able to find any packages or functions that specifically cater to this functionality. While AJAX appeared to be a potential solution, I did not find anything that fit my requirements precisely.

javascript bootstrap-4

Answer 1

Answer №1

You can achieve this without the use of any external libraries

// Accessing the search bar element
const input = document.querySelector('input')

// Accessing the button element
const button = document.querySelector('button')

// Adding an event listener to the button
button.addEventListener('click', () => {
  // Initiating an AJAX request
  fetch('http://yoururlhere?query=' + input.value)
})

<input>
<button>Search</button>

Answer 2

You can achieve this without the use of any external libraries

// Accessing the search bar element
const input = document.querySelector('input')

// Accessing the button element
const button = document.querySelector('button')

// Adding an event listener to the button
button.addEventListener('click', () => {
  // Initiating an AJAX request
  fetch('http://yoururlhere?query=' + input.value)
})

<input>
<button>Search</button>

Pass information from an HTML input field to the backend using JavaScript

Answer №1

Similar questions

Issues with Bootstrap 4.3 navbar dropdown feature and hamburger icon functionality

Guide to Embedding StencilJS components in a Storybook React Application

Choose JSON information and modify it utilizing NODE.js with identical data

Incorrect script enqueue order in child theme of WordPress

Retrieve a text and save it into a variable

Issues with ASP.NET arise when losing the selection in a dropdownlist that was populated using javascript

Creating various functions for Joomla's AJAX component development

Update the table that includes a php script

Combining platform-express and platform-fastify for optimal performance

Attempting to showcase information on the Angular frontend

Quirky rendering problem in AngularJS

The directives applied within ng-include are not functioning correctly

In order to dismiss the popup message in the component.ts file within Angular 4, I must figure

consistent character spacing for a custom font upload

What is the best way to remove double quotes surrounding "name" and "count" when displayed in the JavaScript console output?

Tips for improving the speed of loading infinite scroll pages

Unable to detect backspace events in an Ionic/Cordova application

What is the process for invoking an External Javascript Firestore function within a Typescript file?

Distinguishing between client side rendering and server side rendering is the backbone of web development

How to integrate a While loop within an RXJS subscription