Is it possible to have html form submit multiple times? - html

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()

Related

How to stop drop-down submit form appending url?

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

Does googlebot interact with the <select> or <input type="submit"> inside <form method="post">?

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">

"Submit" JSP in iFrame

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

How to Create a Dropdown List Hyperlink without the GO button?

I just want to create a dropdown list whenever I choose a new value inside it will take me to a new webpage. I don't want to let user to click "GO" button to go to the page. Just on select and call the action. How can I do such ?
<form>
<p align="center"><b>Select a Site </b>
<select id="setit" style="color: #0000FF" size="1" name="test">
<option value="">Select one</option>
<option value="http://www.altavista.com">AltaVista</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.google.com">Google</option></select>
<input type="button" value="Go"
onclick="window.open(setit.options[setit.selectedIndex].value)">
</p></form>
Here for example, this will have the GO button and need to click the GO in order to go to the new page. I don't want the GO button.
Any ideas?
use onchange event:
<select onchange="window.open(this.value,'','');">
....
</select>
As fas as I understood - you simply have to handle onchange event for select tag.
Just move your onclick handler there.
Put for your onclick
<input type="button" value="Go "onclick="document.location = this.value">
I use this one a lot and should work well
(Everyone else seams to be giving you onchange and say don't use javascript, but if the browser a person is using doesn't support javascript then tough shit because there not using chrome or another leading browser)

How to post the selections of an HTML List Box with multiple selected values

I have a listbox on an HTML form with a Submit button. The listbox has multiple selection enabled. I am able to select multiple values in the listbox, but I don't know how to figure out what values were selected when the form is submitted. Also, I am adding user generated values to the list box dynamically using JavaScript, and I would like to be able to tell two things when the form submits:
What are the options added to the box by the user?
What values are selected in the box by the user?
Is this possible? Thanks.
By naming your select with trailing square brackets, PHP (and likely other server languages) will put the data in an array
ex:
<form action="process.php" method="post">
<select name="multiSelects[]" multiple="multiple" size="5">
<option value="0">Zero</option>
<option value="1">One</option>
</select>
<input type="submit" />
</form>
The selections will be available in the array $_POST['multiSelects']
Below you find an example of a page.
Note that:
the select element (and any form element) needs a name to be included in the post.
only selected options in the select element will be posted.
What values are selected in the box by the user?
When the user submits the form only the selected values will be sent to the server. Depending on what language you are using at the server there are different ways to access them.
What are the options added to the box by the user?
As stated before you only see what options that was selected. But how do you distinguish between your options and the users options? That depends on what data you are sending the user. The universal answer is thats the value you get back that you didn't send. However this can be simplified depending on your data. Since the options have both a value and a text property, one way it to use a numeric value for your pregenerated values. That way your values will be numeric in the reply and the users values will be a text string. This approach assumes that your user will not enter just a numeric value. Another approach is to add a prefix to all user generated values (remember you have both a value and a text field for all options)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test of select box</title>
<script type="text/javascript">
function addOpt(e) {
var o=document.createElement("option");
//o.value= -e.options.length;
o.text = "Test " + e.options.length;
o.selected=true;
e.add(o,null);
}
</script>
</head>
<body>
<form method="post" action="mypage.html">
<input type="button" onclick="addOpt(this.form.myselect)" value="Add option"/>
<br/>
<select id="myselect" name="mydata" multiple="multiple" size="10">
<option value="0">Test 0</option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
</select>
<br/>
<input type="submit"/>
</form>
</body>
</html>