I have constructed a drop-down menu that once an item from the list is selected and the submit button clicked, it will send the end user to an external url. However, the form is appending the url which causes issues with a particular external website from recognising the url and returns an error (this is something the website has suggested would happen to stop tracking appending).
Example:
Normal url - https://google.com - is changed to - https://www.google.com/?=http%3A%2F%2Fgoogle.com&gws_rd=ssl
Furthermore, it depends which browser you use. Safari, Fierfox and Chrome are fine. However, IE or Edge cause the error on the website.
Is there anything I can change in the code below to prevent the url from being appended????
<form method="get" action="http://example.com/">
<select name="" onchange= "this.form.action=this.value">
<option value="0">Please Select</option>
<option value="http://google.com">Google</option>
<option value="http://yahoo.com">Yahoo</option>
</select>
<input type="submit" value="Submit" />
</form>
You are using the GET method
<form method="get" action="http://example.com/">
It append value at the end of your URL to send them to your form handler
If you don't want those value to be seen you should use POST method
<form method="post" action="http://example.com/">
Have a look over there https://www.w3schools.com/tags/ref_httpmethods.asp and there https://www.w3schools.com/tags/att_form_method.asp
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 would like to make some field (For example using Form and Select tags)
<form method="GET" action="baseURL">
<select name="agent_id" required>
<option value="1">Agent Homer</option>
<option value="2">Agent Lenny</option>
<option value="3">Agent Carl</option>
</select>
<input type="submit" value="Submit">
</form>
and I would like after clicking on "Submit" to open url in browser which would be made from baseURL and selected option.
The only problem is that I cannot use javascript. (Let's say that I only can do this in pure HTML)
Is there even a way to do this?
While, perhaps, not in the specific format you want the URL to be in (it will be baseURL?agent_id=1), the code you already have will do that.
If you want the URL to be in a different format (such as baseURL/1) then you'll need to involve a programming language (HTML is not a programming language).
You can use any server-side language you like. Specify the URL to a server side program in the action attribute, construct the URL you want, then redirect to it.
You could also use client-side JS, but you've rejected that.
Background of Problem:
I have a search page that allows users to select their search criteria using a <select>. Once the user has selected their desired criterias, the user can then click the search button which will navigate to a new page and return results based on their selected criteria. The submit button is a <input type="submit"> inside <form method="post">.
The problem is I do not want google touching any of the <select> or <input type="submit"> inside <form method="post"> as both elements have ajax get/post attached to them. Furthermore, I also do not want google to index the result pages of the search.
I have specified in robots.txt to block web-crawlers from navigating to the results page but I want to ensure that they are not playing around with any of the menus or submit buttons. After doing some reading, apparently googlebot is capable of selecting options from select menus as well as submitting forms.
Here is a link of where I read this from:
http://googlewebmastercentral.blogspot.ca/2008/04/crawling-through-html-forms.html
http://googlewebmastercentral.blogspot.ca/2011/11/get-post-and-safely-surfacing-more-of.html
Question:
Does googlebot interact with the <select> or <input type="submit"> inside <form method="post">
If yes, is there any way to prevent googlebot from touching any of the <select> or <input type="submit"> inside <form method="post">
I have a dropdown list, where a user's selection determines the inputs to display next.
For example, selecting birds will open a page where a user is asked to enter wingspan, beak type, feather type, or whatever.
Selecting fish will create a completely different page. This is all created dynamically through jsp, getting data from a textfile through Java. (please ignore bad coding)
How do I make this second jsp load in an iFrame on the same page, instead of redirecting to a new page?
I'd (ideally) like to be able to select different options from the dropdown, and see the input form change with each click of the submit button.
The user selects from the dropdown list, and clicks submit, which calls the jsp method / page.
Do this
<form action="demo_form.asp" method="get" target="frame">
<select name="selection">
<option value="fish">Fish</option>
<option value="bird">Bird</option>
</select>
<input type="submit" value="Submit">
</form>
<iframe name="frame"></iframe>
In the target give the name of the iframe as target,and the action will get executed in the iframe
I have a form that takes input from a dropdown list now and onsubmit opens a new tab getting the value from the selector.
Pseudoexample:
<form xmlns="http://www.w3.org/1999/xhtml" action="http://google." method="get" target="_blank">
<select>
<option value="com">com</option>
<option value="co.uk">co.uk</option>
</select>
<input type="submit" value="Go" />
</form>
My question is whether it would be possible to change the select to checkboxes and open n windows for n checkboxes checked. e.g. in this example if both com and co.uk are selected, 2 windows will open instead of google.com.co.uk
I know I can do it in javascript (and I have already) avoiding forms entirely. This is not an option however, as this is to be hosted on google sites, which don't allow window.open()