How could i make a search input for a website where rather than a regular "?search=" it's just text with something appended, in this case ".htm"?
So for example argos works like this and if i type in "weight lifting" the url it makes is -
www.argos.co.uk/static/Search/searchTerm/weight+lifting.htm
I was trying the following however it does not work correctly -
<form name="search" method="get" style="margin-bottom:0%;" action="http://www.argos.co.uk/static/Search/searchTerm/"><input type="text" name="" maxlength="300">
<input type="hidden" name="" value=".htm">
</form>
Is it possible to create a search input that could create the url i needed with a regular html form?
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'm trying to achieve below result using simple HTML form:
{"name": "Abc","email": "abc#abc.org", "message":"msg"}
HTML code:
<form name = "myform" action="URL" method="POST" enctype="application/json">
<input type="hidden" name="name" value="Abc">
<input type="hidden" name="email" value="Abc#abc.org">
<input type="hidden" name="message" value="msg">
<input type ="submit" value="Submit">
</form>
But this doesn't work. Someone suggested to use below and it worked but not sure how it is encoding data into JSON format.
<form name = "myform" action="URL" method="POST" enctype="text/plain">
<input type="hidden" name='{"name":"Abc","email":"abc#abc.org","message":"'value='msg"}'>
<input type="submit" value="Submit">
</form>
Can someone please explain how the above works? Thanks in Advance.
The enctype attribute simply has no option to encode as JSON.
There was a proposal to add support, but it was abandoned.
text/plain encodes the data in a plain text format which is not reliably machine parsable (e.g. you can't distinguish between a new line as data and a new line as a record separator). You should never use it in production. It was designed as a debugging tool but, frankly, having software that can display parsed application/x-www-form-urlencoded data is more useful for that.
The code you have "works" because the plain text format just concatenates the names and values, one per line, and you have half a JSON text in the name and the other half in the value.
It's very fragile, and would be more so if the user was inputting any data themselves.
<form action="/subsite/" method="GET">
<input type="text" name="" placeholder="Your Nick">
<input class="button" type="submit" />
</form>
I want to redirect I mean it should looks like
www/subsite/text
What should I use ? POST ?
The method="get" means that the parameters (and values) will be sent in the query string (the stuff after the question mark in the URL). eg.
/subsite?input_field_name=input_field_value
In your case, the input field doesn't have a name, which will cause problems. You probably want something like this:
<input type="text" name="nickname" placeholder="Your Nick">
So if you submit this form:
<form action="/subsite" method="get">
<input type="text" name="nickname" placeholder="Your Nick">
</form>
Then after submitting, the browser will go to:
/subsite?nickname=value_of_nickname_variable
If you use a method="post", then the form data (variables) will be sent along in the request body, not the query string. There are other differences between get/post, but that's one of them :)
If you just want to do a simple redirect when clicking the button, you could use javascript instead, eg.: window.location.href='/my_url_path_here'
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 having an issue with the URL encoding of a search query, I have this in a Velocity template.
<form method="GET" action="$req.contextPath/plugins/peopledirectory/search.action">
<div class="greyboxfill" style="width: 420px">
<input type="hidden" name="pageId" value="$pageId"/>
<input type="text" name="search" id="search" size="30" value="$search"/>
<input type="submit" name="searchbtn" value="Pesquisar">
</div>
</form>
The problem is that when I click the submit button, the search string is not URL encoded and if I search for something like ME&A, it only searches for ME. Is there any definition needed in Velocity to make that work?
I seen around the web that the form HTML tag has a inner URL encoding, why is it not working in this case?
The best thing to do is explicitly escape the string using EscapeTool from VelocityTools. This is an additional library that you'll need to download and then include in your velocity context.
URL encoding is then as easy as:
$escape.url($search)