CODEWITHSUNDEEP
htmlformsbuffalo
Dialvive
Dialvive

Reputation: 386

Unable to GET form from embedded html

I have a search engine with a backend in GoLang & Buffalo, I'm new to web programming, and I'm sure this is a stupid problem. I have a nav-bar with a search bar, and another search bar in the body. The nav-bar is an embedded html (plush partial).

The search.html's form works flawlessly, but the nav-bar's submit button doesn't do anything.

have the following code:

<!-- search.plush.html -->
<html>
<body>
    <div>
        <%= partial("header.html") %>
    </div>
    ...
        <div>
            <form action="/results" method="GET">
                <input id="text" for="mainsearch" inputmode="latin" placeholder="Search words or phrases">
                    <div  role="group">
                        <button name="type" value="word" type="submit">Word Search</button>
                        <button name="type" value="phrase" type="submit">Phrase Search</button>
                    </div>
            </form>
        </div>
    ...
</body>
</html>

And

<!-- _header.plush.html -->
<div>
    <form action="/results" method="GET">
        <input id="text" for="mainsearch" inputmode="latin" placeholder="Search words and phrases">
            <div  role="group">
                <button name="type" value="general" type="submit">
                    <i class="ion-search"></i>
                </button>
             </div>
    </form>
</div>

I embed _header.html in every other html, and it doesn't work anywhere. I think it's more of a html's problem rather than plush's, but I can't find information about this..

EDIT: I've found using the developer console on Chrome, that <form> and </form> in _header.plush.html are gone after being rendered.

Upvotes: 1

Views: 148

Answers (2)

Nico Cai
Nico Cai

Reputation: 26

From what I saw, the value in the input is not going to be sent to the server since there isn't a name tag for that input.

The name attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted.

Note: Only form elements with a name attribute will have their values passed when submitting a form.

https://www.w3schools.com/tags/att_input_name.asp

It is a good practice to get your html output validated. https://validator.w3.org/

Upvotes: 1

Don Mayo
Don Mayo

Reputation: 365

I see a few problems which may be contributing to your issue.

id values must be unique on the page

When adding an ID to any element in HTML, it must be the only element in the DOM. Having multiple elements with the same ID will have unexpected behavior depending on the browser you are in. See this link in the docs for more information: https://developer.mozilla.org/en-US/docs/Web/API/Element/id

Use an <input type="image" for an image submit button

This is probably the easiest way to have an image button for your form, though you will probably also want to include an additional (hidden) field to send along the type: general information that was sent by the button originally. Here is a link to the docs for image buttons in forms: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image

Upvotes: 1

Related Questions