Member Avatar for mcoliver88

Hi All
This has probally been asked a thousnad times, but here it goes.
I have built a search bar into my website, and i want the user the be able to enter any text and be able to search google in a new window/tab. This is the code i have so far:

<div id="search">
                <form method="get" target="_new"  action="https://www.google.com/search?q"+document>
                    <input type="text" id="searchtxt" />
                    <input type="submit" name="q" id="searchbtn"/>
                </form>
            </div>

The issue i am having is when i type say "test" into the search box and clikc search, i go to google but the word it has searched is submit.

Any help would be great
Thanks

  • 4 Contributors
  • 3 Replies
  • 278 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by mikerock

Dani AI

Generated

Short diagnosis and the quick fix (as suggested): the form was sending the submit button value instead of the typed text because the control named q was the submit control. Browsers include a clicked submit button's name/value in the serialized data, so if the submit input has name="q" the search engine receives something like q=Submit. The action attribute in the original post also tried an in-HTML string concatenation that does not work; the form action should be the plain Google search URL when using a standard GET submission.

Practical checklist to correct and harden the form:

  • Use method="get" and set the form action to the base search URL (no manual ?q= in the action). Give the text field the name expected by Google (q) and do not give that name to the submit control.
  • Prefer target="_blank" instead of target="_new"; _new is a named target and will reuse the same tab/window. Be aware that opening a new tab from a form does not allow a rel="noopener" attribute (that works for anchors), so consider opening in the same tab or use a JS window.open pattern that supplies noopener if tabnabbing protection is required.
  • Add a visible or off-screen label and use type="search" for better semantics and mobile UX.

Debug tips and alternatives:

  • Verify what is actually sent with the browser devtools Network tab (inspect the query string). If building the search URL with JavaScript, always encode the query with encodeURIComponent so spaces and special characters are safe.
  • For an integrated on-site experience (results embedded on the site), follow the Custom Search / site-search options noted by and rather than redirecting users to google.com.

Recommended Answers

All 3 Replies

Member Avatar for minitauros

Move the name parameter to the input with type="text", then it should probably work!

<input type="text" name="q"id="searchtxt" />
<input type="submit" id="searchbtn"/>
Member Avatar for JorgeM

Just to provide you with an additional option that you may have not considered, google has a product called CSE (custom search engine) that you can use to integrate a search feature in your site. If you want to see how it works, use the search feature on DaniWeb. I use it as well on sites that i work on.

https://www.google.com/cse/

Member Avatar for mikerock

Try this link, Hopefully this will gives your better idea for creating customize search bar for your website or blogs.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.