I'm creating an offline HTML document to set as my browser homepage for work. I'd like to include a Google search bar at the top of the page that will allow me to search Google directly.
Google seems to make it easy to embed a Google Custom Search Engine into the page which will let me use Google to search the local page, but I need it to redirect to Google and search there.
Their code:
<!-- Use of this code assumes agreement with the Google Custom Search Terms of Service. -->
<!-- The terms of service are available at http://www.google.com//cse/docs/tos.html -->
<form name="cse" id="searchbox_demo" action="https://www.google.com/cse">
<input type="hidden" name="cref" value="" />
<input type="hidden" name="ie" value="utf-8" />
<input type="hidden" name="hl" value="" />
<input name="q" type="text" size="40" />
<input type="submit" name="sa" value="Search" />
</form>
<script type="text/javascript" src="https%3A%2F%2Fcse.google.com%2Fcse/tools/onthefly?form=searchbox_demo&lang="></script>
Testing this form returns a Google results page with no results that changes the url to: google.com/cse?cref=&ie=utf-8&hl=&q=test&sa=Search#gsc.tab=0&gsc.q=test&gsc.page=1
Surprisingly, I couldn't find any answers on SO or various search engines. I tried to create a form, use GET, and redirect to https://www.google.com/search? and https://www.google.com/search?q= with no luck. It keeps changing the url search parameter following the ?
I know I'm overlooking something simple but can't find the answer anywhere.
Simply put, is Google preventing any search queries from offline documents in an effort to fight scripts/robots?
There is a good explanation of how to use Google Search for your own site or the entire web here.
Make sure that your <form> action is
<form method="get" action="http://www.google.com/search">
Set the variable sitesearch to null. (In the link example it is a radio button. Here you can just make it a hidden input.)
<input type="hidden" name="sitesearch" value="" />
Submit the form. (When you say "offline HTML document" realize that to redirect to the Google search results page you will need an internet connection.
I do a similar thing for my projects. I create simple pages with all the links and data that I need regularly. Easy links to hand when I open the browser.
This worked for me:
<script>
function SearchQuery(val) {
document.getElementById("searchButton").href = "https://www.google.com/search?q=" + val;
}
function buttonClick(){
document.getElementById("searchBox").value = "";
}
</script>
<section>
<input id="searchBox" type="text" name="searchBox" value="" onchange="SearchQuery(this.value)">
<a id="searchButton" href="https://www.google.co.uk/" target="_blank" onclick="buttonClick()">Search with Google</p>
<section>
Related
I am trying to create a search box on my site. However when someone clicks "search" or presses "enter/return". I want a separate tab to open with the search results from a different site to be displayed.
Example:
My site: www.example.com
# using another answer on stackoverflow
# I have tried a lot of different action urls.
# the website url to which I want to send the search:
<form method="get" action="website.com/?searchTerm">
<input type="text" name="searchTerm"/>
</form>
When I try to demo it using the above and press enter, I simply go to the website i.e. website.com/?searchTerm not the results page.
Another approach I thought might work is to replace the searchTerm in the url of the results page of the website when Enter or button is clicked on www.example.com using a tags.
You can use the target attribute on the form tag.
Don’t forget to inform your users, including screen reader users, that the action will open a new tab.
If you use the GET method, input names and values are going to be passed as query parameters. So <input name="searchTerm" value="test"> will become ?searchTerm=test in the requested URL.
get: The GET method; form data appended to the action URL with a ? separator. Use this method when the form has no side-effects.
<form method="get" target="_blank" action="https://example.com/SearchDisplay">
<label>Search Term
<input type="search" name="searchTerm">
</label>
<button type="submit">Search (opens in new tab)</button>
</form>
The above code would not work in an interactive stack snippet, because it would be inside an iframe.
For your search to actually work with the target site
If you inspect the search form on your target website, you’ll notice they use SearchDisplay as the action. Additionally, they include a bunch of hidden fields in their form. You will need to figure out which ones to include in your form as well, for your query to not get blocked.
Beware, though, that this are implementation details of the target shop, not a stable search API like OpenSearch. So it might change at any time, and your search form will no longer work.
The form code from the target website:
<form accept-charset="UTF-8" name="CatalogSearchForm" action="SearchDisplay" method="get" id="searchForm" class="searchForm">
<div class="search-input-wrapper" role="group" aria-label="...">
<div class="search-input-field">
<input type="hidden" name="storeId" value="5451206" id="WC_CachedHeaderDisplay_FormInput_storeId_In_CatalogSearchForm_1">
<input type="hidden" name="catalogId" value="10002" id="WC_CachedHeaderDisplay_FormInput_catalogId_In_CatalogSearchForm_1">
<input type="hidden" name="langId" value="-3" id="WC_CachedHeaderDisplay_FormInput_langId_In_CatalogSearchForm_1">
<input type="hidden" name="pageSize" value="10" id="WC_CachedHeaderDisplay_FormInput_pageSize_In_CatalogSearchForm_1">
<input type="hidden" name="beginIndex" value="0" id="WC_CachedHeaderDisplay_FormInput_beginIndex_In_CatalogSearchForm_1">
<input type="hidden" name="sType" value="SimpleSearch" id="WC_CachedHeaderDisplay_FormInput_sType_In_CatalogSearchForm_1">
…
I managed to make a youtube search bar using HTML which, when clicked, links user to the youtube page for whatever he typed in the bar.
However, for another part of the assignment, I needed to make a code that does the same thing using only HTML and CSS but the results should be within the year 2010-2019 (custom range). The website in question is https://www.worldscientific.com/search/advanced. I have tried searching for similar cases online but the solutions were either too complicated (involving PHP/bootstrap etc) or had no relevance at all. I have a feeling the solution is very simple but I am just stumped. Please try and explain in simple terms if possible and I have left the snippet of the youtube search bar code for an clearer idea of the level of 'complicatedness'.
<form id="vb_yt_search-form" action="http://www.youtube.com/results" method="get" target="_blank">
<input id="vb_yt_search-term" name="search_query" type="text" maxlength="128" placeholder="search"/>
<input type="submit" value="Search" />
</form>
Is not really what you asked, but is doing the job.The code is searching on google rathen than youtube between a custom range 2010-2019. When you press the submit button, the href will update with text box value. (I know when you will press the submit open it will open an useless tab but I don't bother to fix it, just close and try to press on text)
<a id="test" href="https://www.google.com/search?safe=active&tbs=cdr%3A1%2Ccd_min%3A1%2F1%2F2010%2Ccd_max%3A1%2F1%2F2019&ei=5zBDXPf8Dof_swGM4bKADw&q=site%3Ayoutube.com+"> test </a>
<form id="vb_yt_search-form" action="return myFunction()" target="_blank">
<input id="vb_yt_search-term" type="text" maxlength="128"/>
<input type="submit" onclick="myFunction()" />
</form>
<script>
function myFunction(){
var value = document.getElementById('vb_yt_search-term').value;
document.getElementById("test").href="https://www.google.com/search?safe=active&tbs=cdr%3A1%2Ccd_min%3A1%2F1%2F2010%2Ccd_max%3A1%2F1%2F2019&ei=5zBDXPf8Dof_swGM4bKADw&q=site%3Ayoutube.com+"+value;
}
</script>
So, HTML newbie here and am having an issue where I have a website that just hosts files. I have a working search function on the site in two places. One on the homepage where the search works perfectly fine. Once a search is inputed (searching 'pop' for instance), the url states:
http://website.com/?op=catalogue&k=pop&ftype=
But, on the second page, when I input a search term, it seems to add to the url and doesnt go anywhere. For example:
http://website.com/e2aqev6btnnv/head.jpg?op=catalogue&k=pop&ftype=
Instead of erasing the head.jpg file in the URL and accepting the new search term, it just adds it and the page doesn't go anywhere. Please help
Here is the code I have for the search:
<br>
<Form method="GET" action="">
<input type="hidden" name="op" value="catalogue">
<input type="search" onfocus="fieldReceivedFocus()" name="k" id="search" value="">
try this:
<Form method="GET" action="http://website.com">
what will tell it what page to send the form data to, in your case it is the main page, otherwise it sends it to the current page.
You MAY need to change
<input type="hidden" name="op" value="catalogue">
to
<input type="hidden" name="op" value="search">
I don't know how the backend of your site is coded but based on what I see in the urls i think you will need to.
I'm not an expert in php. What I am trying to do is add a UPS tracking feature to my site. In order to check tracking info for UPS all that is needed is the tracking number at the end of their tracking url like the following.
http://wwwapps.ups.com/WebTracking/track?track=yes&trackNums=1ZXXXXXXXXXXXXXXXX
How can I add a field on my site so that a user can enter the tracking number: 1ZXXXXXXXXXXXXXXXX and then click a button which will open a new window or tab with the entire url?
Any help is appreciated. Thanks in advance.
trackNums is a GET variable. You can use a GET form.
<form method="get" action="http://wwwapps.ups.com/WebTracking/track" target="_blank">
<input type="hidden" name="track" value="yes" />
<label for="trackNums">Tracking #</label><input type="text" id="trackNums" name="trackNums" value="" />
<input type="submit" value="Track" />
</form>
To keep the user on your website, but open this website in a new tab or window set the target attribute to _blank.
You can do this completely client-side:
<form action="http://wwwapps.ups.com/WebTracking/track" method="GET" target="_blank">
<input type="hidden" name="track" value="yes"/>
<input name="trackNums" />
<input type="submit" />
</form>
The target="_blank" has it open in a new window/tab.
You tagged this with PHP, but there is no need to use PHP. This can be done in JavaScript. The JavaScript function is:
window.location.href = "http://wwwapps.ups.com/WebTracking/track?track=yes&trackNums="+trackingnumber;
Now, the key is to get the tracking number. That will be in a field on the database. Let's assume this is the field:
<input type='text' id='trnum'>
You get the value with:
var trackingnumber=document.getElementById('trnum').value;
That's all you need. Just call a function that changes the window.location.href using the value from the tracking number input field.
I want visitors to my website to be able to search for airport lounges offered by a company called Priority Pass. I have created the following form:
<form action="http://prioritypass.com/lounges/lounge-print.cfm" method="post">
<input type="text" id="print_airport_code" name="print_airport_code" value="MAN" />
<input type="submit" value="Submit" />
</form>
Which mirrors the form they have on their own mobile search site (here). But when I submit my form it doesnt seem like the parameters are being posted properly.
Any help would be great. Thanks.
The form on their website doesnt appear to contain any fields which I have missed?
You're pointing to the wrong URL; POSTing to /lounges/lounge-print.cfm is producing an HTTP redirect header, which is corrupting your output.
Additionally, the name of your input field is incorrect. Using someone else's form results often requires you to maintain all field names consistently as they appear on the remote site.
Change the form to:
<form action="http://www.prioritypass.com/mobile/lounges.cfm" method="post">
<input id="Airport_Code" name="Airport_Code" type="text" size="10" value="MAN" />
<input type="submit" value="Submit" />
</form>