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>
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 need a simple html code so that a visitor to my website can type in a textfield what website they would like to visit next and click GO and they are taken there.
I can't seem to find how to do this anywhere. Can't even find any websites that have a similar code.
Here is a quick implementation that will set it based on the text field value. I would suggest putting in validation and much more.
function goToUrl(form){
window.location = form.url.value
}
<form onsubmit="goToUrl(this)">
<input type="text" id="url" />
<button type="submit">Go to URL</button>
</form>
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>
Basically I have a form with a LOT of links to other pages in it, mostly to explain some questions or show information on said questions. The problem is the form is now a complete mess to navigate with the keyboard if you just want to fill it because of all these links, which most people will either not, or very rarely click.
I'm limited in modifying the layout as it is a current Excel form I have to adapt to a web app while keeping the same layout.
Is there any easy way to make TAB navigation skip the links? Via an attribute I'm not aware of maybe?
Quick example, being focused on Input A and pressing tab would bring me directly to input B, skipping links 1 and 2:
<form>
<input A />
<a 1></a>
<a 2></a>
<input B />
</form>
A tabindex="-1" value removes the element from the default navigation flow (i.e., a user cannot tab to it).
<input type="text">
<input type="text">
or
<input type="text" tabindex="1">
1
1
<input type="text" tabindex="2">
Long and short, I had a form input button on my site that worked as an access code to redirect to a specific page on the site. Site broke, and now I don't remember the code I had in place. It was done a long time ago and I only had to do it once. But the gist of it looks like this:
For example the address to site is www.brokensite.com. I had a form input field on the page where the value of the input field when submitted redirected to the page www.brokensite.com/inputvalue. So if I input the access code of helpme, it would redirect to www.brokensite.com/helpme
My current code is:
<form action="/after-school-registration/" method="$_GET" name="access">
<input name="code" value="" type="Text">
<input value="Go" type="Submit">
</form>
Please tell me what I am missing. Or what I did wrong this time. Any help is appreciated.
You could use JavaScript and set the location:
<form>
<input id='urlpage' />
<button type="button" onclick="window.location.href='/after-school-registration/' + document.getElementById('urlpage').value">Go</button>
</form>