Web Development using HTML and JavaScript

Here is the code for a search bar engine that I am working on.

<form id="frmSearch"  class="search1" method="get" action="default.html" /> <input class="search" id="txtSearch" type="text" name="search_bar" size="31" maxlength="255"        value="" 
 <style="left: 396px; top: 20000px; width: 293px; height: 60px;" />  

<input class="search2" type="submit" name="submition" value="Search" style=" padding-   bottom:20px; left: 300px; top: 0px; height: 50px" />
 <input class="search2" type="hidden" name="sitesearch" value="default.html" />  

<script type="text/javascript">
     document.getElementById('frmSearch').onsubmit = function() {
         window.location = 'http://www.google.ro/search?q=' + document.getElementById('txtSearch').value;
         return false;
     }         
</script>

  1. I would like the search button to be able to search through a local text file when clicked by the user.

  2. Once the search has been initiated, I want it to continuously refresh with results containing the same keyword.

  3. I also need the found keywords from the text file to be displayed in small frames on my graphical interface.

Thank you for any assistance you can provide.

javascriptjqueryhtmlcss

Answer №1

Before anything else, I suggest taking a look at the Quick Tour on StackOverflow to familiarize yourself with how the website functions.

Let's address your HTML code:

<form id="frmSearch"  class="search1" method="get" action="default.html">
    <input class="search" id="txtSearch" type="text" name="search_bar" size="31" maxlength="255" />
    <input class="search2" type="hidden" name="sitesearch" value="default.html/>
    <input class="search2" type="submit" name="submition" placeholder="Search" style="padding-bottom:20px; left: 300px; top: 0px; height: 50px" />
</form>

The <form> tag is not self-closing. For more information on this tag, refer to this official documentation.

For detailed information on HTML specifications, check out this resource.

Regarding your JavaScript:

<script type="text/javascript>
    document.getElementById('frmSearch').onsubmit = function() {
        window.location = 'http://www.google.ro/search?q=' + document.getElementById('txtSearch').value;
    }
</script>

Your HTML syntax appears correct now, but it may not align with your intended functionality.

If you want your JavaScript to verify if the 'txtSearch' element is empty, consider diving into AJAX. Take a look at this resource for more information.

You can create a search bar and load specific parts of your page without using the <form> tag and reloading the entire page for results such as images. This approach doesn't require JQuery.

While you added the 'JQuery' tag, note that you are currently only using JavaScript. If you decide to incorporate JQuery, explore creating Ajax requests by referring to this resource.

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

Bypass the Array.reduce method in JavaScript

I'm currently working on finding an elegant solution to a toy example pattern. The goal is to stop the reduce algorithm immediately and return 0 when an element with a value of 0 is encountered, without processing the rest of the elements. let factor ...

javascriptfunctional-programmingshort-circuiting

Show various information on chart.js

Currently, I am working on generating a Chart.js from a JSON file by utilizing a "checkbox" element. The basic idea behind this is that clicking on the desired element will result in displaying different data within the same canvas. While I have made sign ...

jqueryarraysjsonchart.js

What is the best way to center a CSS arrow vertically within a table cell?

I'm having trouble with aligning a CSS arrow next to some text inside a table cell... <td><div class="arrow-up"></div> + 1492.46</td> My goal is to have the arrow positioned to the left of the text and centered vertically wit ...

htmlcsshtml-tablealignmentvertical-alignment

What is the best way to display each value from the array arr, containing strings, on separate lines?

Can you complete the function below to display each value in the array 'arr' on separate lines? <!DOCTYPE html> <html> <head> <title> ...

javascripthtml

Activate code coverage for Jest tests within jest-html-reporter/Istanbul

Utilizing the jest-html-reporter package has proven useful in generating an HTML report for my tests. However, while this report displays information on test results (passing and failing), it lacks details regarding code coverage statistics such as lines c ...

javascriptreactjsunit-testingjestjsistanbul

Sending response error codes in nodejs can be achieved using a variety of methods

I am looking for a way to properly send an error code as a response in a promise within a Node.js application. It seems that errors in promises are not being sent correctly in the response object in NodeJS/Express. module.exports.providerData = function ( ...

javascriptnode.jsexpress

Initiate playing HTML video upon user click

My current situation is quite straightforward. I have an HTML video that plays when I click a div with the class ".play". $('.play').click(function() { $('.video').get(0).paused ? $('.video').get(0).play() : $('.vide ...

htmlvideoclickmp4playback

Spinning Circle with css hover effect

I have recently developed a simple website: Within this website, there is an interesting feature where a circle rotates above an image on hover. However, despite my best efforts, I couldn't make it work as intended. Here's the code snippet I use ...

htmlcss

Can studying Titanium Appcelerator enhance my comprehension of NodeJS?

As I dive into the world of building mobile JavaScript Applications in Titanium Appcelerator, I've come across documentation that mentions the use of the V8 Engine as their JS interpreter for Android. Additionally, some of the approaches seem to be in ...

javascriptnode.jstitaniumappcelerator

Implement functionality in JS to track the number of clicks on an element

I am dealing with a ul-list containing an unpredictable number of li-elements, ranging from 2 to 8. My goal is to capture votes using these li-elements and display the vote count on the specific element that was clicked. I have attempted to catch the click ...

javascriptjquery

How can SQL data be loaded following the selection from a dropdown menu?

I have a pressing query that I need assistance with. I am aiming to achieve a certain task, but due to lack of prior experience in this area, I am unsure about how to proceed. My current situation involves populating a dropdown menu with names retrieved f ...

javascriptphphtmlmysqlsql

Unable to identify the element ID for the jQuery append operation

After attempting to dynamically append a textarea to a div using jQuery, I encountered an issue. Despite the code appearing to work fine, there seems to be a problem when trying to retrieve the width of the textarea using its id, as it returns null. This s ...

javascriptjqueryappend

Utilizing Grunt to streamline a personalized project

I have set up Grunt as my "JS Task Runner". Node.js is installed in the directory "C:/Program Files". NPM has been installed in C:/users/Peterson/appdata/roaming/npm. Inside the npm folder, I have Grunt, Bower, and Grunt-cli. I am working on a pro ...

javascriptjsonnode.jsgruntjsnpm

“Can you confirm if this syntax is correct for defining methods in Vue.js?”

When defining methods in my Vue app, I have chosen to use the following format: methods: { myMethod(arg) { // do something here } } Although it is more common to see it written like this: methods: { myMethod: function (arg) { // do somethi ...

javascriptvue.js

Activate the display by utilizing the getElementsByClassName method

In my design, I'd like to have the "Don't have an account?" line trigger the display of the .registrybox class when clicked. However, the script I've written doesn't seem to be working as intended. The script is meant to hide the .login ...

javascripthtmlcss

Guide to initializing the state in pinia with Typescript

I am encountering an issue while trying to add typescript to a pinia store. Any suggestions on how to resolve this problem would be appreciated. The project currently utilizes pinia:^2.0.16 and Vue:3.2.37 The error message is as follows: Type '{}&a ...

javascripttypescriptvue.jsvuejs3pinia

Ways to Manage modals responses as services in AngularJS

I am a beginner in the world of JavaScript and AngularJS. I am fascinated by some of the concepts within JS, like trying to create a modal service using the example I found online. I am eager to delve deeper into what exactly is happening under the hood, e ...

javascriptangularjsbootstrap-modalangular-services

Cloudflare Pages causing issues with HTML hyperlinks

Whenever I run the HTML file directly or host it locally, the links redirect to the correct website that I specified. However, when I host the code using CF Pages, the link ends up displaying as "https://example.com/google.com/". Below is the code in ques ...

html

Struggling to make a basic JavaScript prompt function as expected

<html> <title>UniqueTitle</title> <head> <link rel="stylesheet" type="text/css" href="style.css" > <script type="text/javascript"> function modifyDates() { var dates = pr ...

javascripthtmlprompt

What is the best way to center-align elements?

I have a couple of inquiries. First off, I'm facing an issue with centering everything within a form while aligning the text to the left side of the fields. I've attempted using justify-center and align-items within the "container" class and th ...

htmlformscssflexbox