Problem with Submitting Form using Search Bar

I've tried everything, but I can't seem to get this search form to submit.

<div id="search_bar_container" style="z-index:99999">
  <div class="container">
    <form action="tour-list-search-results.php" method="post" name="search_2" id="search_2">
      <div class="search_bar">

        <div class="nav-searchfield-outer">
          <input type="text" autocomplete="off" name="field-keywords" placeholder="Enter your search terms ...." id="twotabsearchtextbox">
        </div>
        <div class="nav-submit-button">
          <input type="submit" onclick="this.form.submit();" name="button" id="button" class="nav-submit-input" value="Submit">
        </div>
      </div>

      <!-- End of the search bar-->
  </div>
</div>
<!-- This is the end of the search bar-->
</form>
</div>

javascripthtmlcss

Answer №1

It appears to be functioning properly, although your HTML structure is incorrect. The form is not properly nested and there is an additional

Answer №2

It seems that all you need to do is clean up your HTML a bit, and the form will successfully submit when you click the button.

$("form").submit(function( event ) {
   alert( "Form submitted" );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="search_bar_container" style="z-index:99999">
    <div class="container">
        <form action="tour-list-search-results.php" method="post" name="search_2" id="search_2">
            <div class="search_bar">
                <div class="nav-searchfield-outer">
                    <input type="text" autocomplete="off" name="field-keywords" placeholder="Type your search terms ...." id="twotabsearchtextbox" />
                </div>
                <div class="nav-submit-button">
                    <input type="submit" onclick="this.form.submit();" name="button" id="button" class="nav-submit-input" value="Submit" />
                </div>
            </div>
            <!-- End search bar-->
        </form>
    </div>
    <!-- /search_bar-->
</div>

I have structured your HTML properly, and now the form should submit when you press the button.

Fiddle

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

What could be causing React to throw an invalid hook error when using useRoutes?

I encountered an error while attempting to add a new route to my project. import React from "react"; import News from "./NewsComponents/News"; import Photos from "./PhotosComponents/Photos"; import Contact from "./Contact"; import Home from "./Home"; ...

javascriptreactjsreact-hooks

Looking for a solution to organize the dynamically generated list items in an HTML page

I am currently working on a movie listing website where all the movies are displayed in sequence based on their #TITLE#. The webpage is generated automatically by the software using a template file. Here is the section of code in the template file that sho ...

javascripthtmlcss

Using .after() in AngularJS for nested ng-repeat recursive iteration

I have a straightforward layout function adjustLinks($scope) { $scope.links = [ { text: 'Menu Item 1', url: '#', },{ text: 'Menu Item 2', url: '#' ...

javascriptangularjs

Are specific names set aside for JQuery Selectors?

One time, I made a mistake with my selector: $("#cut") Unfortunately, this was not pulling the object correctly even though I had defined an object with that id in the HTML. After changing the object's id (and updating the selector), everything work ...

javascriptjqueryjquery-selectors

Is it possible to utilize mathematical operators such as multiplication, division, addition, subtraction, and exponentiation to transform a non-zero numerical value into

I am currently working with Oracle Siebel software which supports JavaScript expressions using only specific operators such as multiply, divide, subtract, add, and XOR (*, /, -, +, ^). Unfortunately, other operators like ! or ? : are not available for use. ...

javascriptsiebel

I am currently exploring React Router, but I am struggling to grasp this particular behavior

My Express server serves the Create-React-App build. When I access http://localhost:8000/ while the server is listening, my page loads correctly. However, if I reload the page or navigate directly to it from the navigation bar, instead of seeing the UI, pl ...

javascriptnode.jsexpresscreate-react-appreact-router-dom

Having trouble sending correct true/false values for selected radio buttons on an Angular5 table, often requiring users to click them twice to submit the appropriate values

My goal is to assign true or false values to selected radio buttons in each row and then form an object for submission. To distinguish between the radio button values in each row, I have used {{k}}+{{sizeobj.rbSelected}} as the value which is causing issue ...

htmltypescriptangular5

Struggling to understand why I'm having trouble connecting my AJAX handler within WordPress

Following the instructions here as a guide seems to be leading me astray. After submitting the form below, a POST request to http://thesite/wp-admin/member-update results in a 404 error. I believed that this request should trigger my function member_update ...

javascriptphpjqueryajaxwordpress

the ultimate guide to leveraging a single slot to edit various columns within data tables

Utilizing vuetify, I have successfully created a reusable data table. The headers and items are passed as props to allow for the data table to be used in various components. While employing slots, I have taken a unique approach by implementing a column-ba ...

javascriptvue.jsvuejs2vuetify.js

The key to creating efficient routers in Express: Don't Repeat Yourself!

Currently, I am in the process of developing a web application in the form of a network structure that involves basic CRUD operations. However, I am facing the issue of having overly large router files, prompting me to consider splitting them up. One of t ...

javascriptnode.jsexpressroutes

Angular: Selecting all checkboxes outside of an ng-repeat loop

Project Overview In my project, there is a system for managing small product orders. Users have the ability to add order lines and attach one or more products to each order line. While it may be uncommon to have multiple products on the same order line, t ...

javascriptangularjsangularjs-ng-repeat

To begin utilizing Node.js modules, you must use the `#` symbol as the starting point

Quoting the Nodejs documentation, available at this link require(X) from module at path Y 1. If X is a core module, a. return the core module b. STOP 2. If X begins with '/' a. set Y to be the filesystem root 3. If X begins with './ ...

javascriptnode.jsv8

Sending a variable using the onchange function in jQuery

I have written a script to toggle the visibility of different divs based on selection var folder; $(function() { $('#teamleag').change(function() { if ($('#teamleag').val() == 'footballal') { $('# ...

javascriptjquery

The jquery selector fails to retrieve all elements

On the upcoming web page, I am attempting to use Jquery to select all <li> elements. Specifically, I want to target all the products contained within <ul class=search-result-gridview-items">. You can find the products here: I have made attempt ...

javascriptjqueryhtmlcss

I keep encountering the issue where I receive the message "Unable to access property 'innerText' of an undefined element" when running the Array forEach function. This problem seems to be happening within the HTMLInputElement section of the code

I am facing an issue where the error occurs because "cardTxt" is not recognized as a string. I verified this using typeof syntax, but I'm unable to understand why it can't be a string. This code snippet includes the use of bootstrap for styling. ...

javascriptarraysjsontypeerror

Retrieve a specific item from a JSON response using Node.js

When I receive a message from a WebSocket, the code snippet is triggered like this: ws.onmessage = (e) => { debugger if (e.data.startsWith('MESSAGE')) alert(JSON.stringify(e.data)) ImageReceived(e.data) c ...

javascriptnode.jsjsonwebsocket

Interactive section for user input

I am looking to add a commenting feature to my website that allows for dynamic editing. Essentially, I want users to be able to click on an "Edit" span next to a comment and have it transform into an editable textarea. Once the user makes their changes and ...

javascriptjqueryhtml

Creating a Grid layout with an abundance of visual elements and minimal text content

I am working with a grid component from Material UI: Item element const Item = styled(Paper)(({theme}) => ({ ...theme.typography.body2, padding: theme.spacing(2), textAlign: 'center', color: "black", })); Structure ...

cssreactjsmaterial-ui

Is there a way for my box to avoid reaching the bottom of the page?

Is there a way to prevent my box from reaching the bottom of the page? I am currently using Bootstrap 4 and have tried the spacing utilities, but they don't seem to be effective. https://i.sstatic.net/YRqb4.png Attached is a picture showing that the ...

htmlcsstwitter-bootstrapbootstrap-4

Refreshing a page occurs every 30 seconds or upon the user submitting a form

My PHP page consists of various includes for different sections of a video website. One of these sections is a comments area where users can submit their feedback to a database successfully. However, I want to ensure that only the specific included page/di ...

javascriptphpjquery