Unable to GET form from embedded html
Question
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.
2 answers
solution1
1 2020-09-02 01:59:55
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
solution2
1 ACCPTED 2020-09-06 18:25:48
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.
It is a good practice to get your html output validated. https://validator.w3.org/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.