I am experiencing issues with the functionality of the Search Button in my code

Question

I am experiencing issues with the functionality of the Search Button in my code

I am experiencing an issue with the Search Button in my Search Form. I created the Search form using only html and pure CSS to test whether JS is necessary for a Search form with Drop Down Filter! Do I need to incorporate some JS code or is it feasible to get it working without? I'm willing to share my findings so anyone can benefit from my Code.

Regards: Xan

 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1>
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <style type="text/css">
    <!--CSS Styles-->

 <!--HTML Structure-->

html css

Answer 1

Answer №1

To ensure that your search button triggers the submission of your form, it is best to avoid using

<button type="button"></button>

, as this assumes that you will handle the click event with Javascript. You can simply remove the type="button" attribute or change it to type="submit", which will automatically submit the containing <form> element (assuming it exists in your actual code).

Answer 2

To ensure that your search button triggers the submission of your form, it is best to avoid using

<button type="button"></button>

, as this assumes that you will handle the click event with Javascript. You can simply remove the type="button" attribute or change it to type="submit", which will automatically submit the containing <form> element (assuming it exists in your actual code).

Answer 3

Answer №2

From my understanding, a select box typically just allows you to choose an item unless you utilize jQuery for added functionality. However, you can create a simple search box using datalist. Make sure to enclose the datalist within a form element like in example 1. Alternatively, you can connect them by utilizing the input list attribute and linking it to the id of the datalist as shown in example 2.

example 1:

<form action="/action_page.php" method="get">
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit" value="Click Me">
</form>

example 2:

<datalist id="languages">
   <option value="HTML">
   <option value="CSS">
   <option value="JavaScript">
   <option value="Java">
   <option value="Ruby">
   <option value="PHP">
   <option value="Go">
   <option value="Erlang">
   <option value="Python">
   <option value="C">
   <option value="C#">
   <option value="C++">
</datalist>
<input type="text" list="languages">
<input type="submit" value="submit" name="languages" id="languages">

Answer 4

From my understanding, a select box typically just allows you to choose an item unless you utilize jQuery for added functionality. However, you can create a simple search box using datalist. Make sure to enclose the datalist within a form element like in example 1. Alternatively, you can connect them by utilizing the input list attribute and linking it to the id of the datalist as shown in example 2.

example 1:

<form action="/action_page.php" method="get">
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit" value="Click Me">
</form>

example 2:

<datalist id="languages">
   <option value="HTML">
   <option value="CSS">
   <option value="JavaScript">
   <option value="Java">
   <option value="Ruby">
   <option value="PHP">
   <option value="Go">
   <option value="Erlang">
   <option value="Python">
   <option value="C">
   <option value="C#">
   <option value="C++">
</datalist>
<input type="text" list="languages">
<input type="submit" value="submit" name="languages" id="languages">

I am experiencing issues with the functionality of the Search Button in my code

Answer №1

Answer №2

Similar questions

Manipulate the lines in an HTML map and showcase the distinctions between them

Having difficulty automatically populating a textarea with the chosen option from a datalist

Press the div using JavaScript and jQuery

Tips for aligning text to match the starting point of other text

Tips for preventing errors in formatting?

When I open my website in the browser, the bootstrap card-deck design is not being displayed correctly

Having trouble with your contact form and not getting it to work properly with Javascript, Ajax, or

Ways to remove the line under a logo in HTML using CSS and Bootstrap

What is the proper way for a browser to handle a srcset attribute containing the same path twice?

Redirecting files from the file system to the emulator is not functioning properly

A guide on grouping an entire CSS file under one class umbrella

Explore the Filter List without being affected by the arrangement of words or the level of search precision

Looking to showcase elements within an array inside an object using ng-repeat

Hover background color not being applied to child elements within Button element in Firefox

Ways to Identify When the Back Button is Clicked

Retrieve hyperlinks from webpage

Jquery scripts seem to have a hit-or-miss success rate

Utilizing Angular 2+ with the [innerHTML] property to incorporate HTML with added style attributes

Searching dynamically using class names with JQuery

When using a CSS background image in ReactJS, a white space may appear at the bottom of the window