How to open a web page consisting of values submitted to the selection manu, please?
For instance, Saab, Volvo, and Audi are chosen. After clicking OK, I want to open another HTML page with the chosen words. Thank you
<!DOCTYPE html>
<html>
<body>
<h1>CAR</h1>
<label for="cars">Choose a car:</label>
<select id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select><br><br>
<label for="cars">Choose a car:</label>
<select id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select><br><br>
<label for="cars">Choose a car:</label>
<select id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select><br><br>
<input type='submit' value='OK'>
// After clicking OK, href consisted of choosen values is open
<p>Open</p>
</body>
</html>
I think if you wrap your html in a Form element it should work.
And also make sure you add a target parameter to the form element:
target="_blank"
An example:
<h1>CAR</h1>
<form
target="_blank"
action="https://www.lipsum.com"
method="get"
>
<label for="car1">Choose a car 1:</label>
<select id="car1" name="car1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select><br><br>
<label for="car2">Choose a car 2:</label>
<select id="car2" name="car2">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select><br><br>
<label for="car3">Choose a car 3:</label>
<select id="car3" name="car3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select><br><br>
<input type='submit' value='OK'>
</form>
How do you get the values
To get the values back from the URL, use window.location.search.
An example:
const searchQuery = window.location.search;
/* '?car1=Volvo&car2=Audi' */
const values = searchQuery.split('?').pop().split('&').map(query => query.split('=').pop());
/* ['Volvo', 'Audi'] */
Related
I was learning how to use the select tag in HTML to create dropdowns. And then I found out that dropdown selections could be sent as an email. After some experimenting with the tag, I figured out that I couldn't 'not include' the 'None' keyword in my email if the user hadn't made a dropdown selection. This was very frustrating.
<html>
<body>
<form action="mailto:test#gmail.com">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value="None">None</None>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<label for="bike">Choose a bike:</label>
<select name="cars" id="cars">
<option value="None">None</None>
<option value="bike1">Volvo</option>
<option value="bike2">Saab</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
(Code Credits: W3 Schools)
Basically, when I make 1 out of the 2 dropdown selections and leave the other as none when I click submit the label with the value None is included
For example, If I choose Audi for Car dropdown selection and none for Bike selection, in the mail it's displayed as:
cars=volvo
bike=None
or something like that. How do I not include 'none' in the email if the user doesn't make a selection for that particular label?
Apologies for not framing the question clearly
required the select tag and empty the first element to set as a placeholder
<select name="cars" id="cars" required>
<option value="">None</option>
complete code will be like follows:
<html>
<body>
<form action="mailto:test#gmail.com">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars" required>
<option value="">None</None>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<label for="bike">Choose a bike:</label>
<select name="cars" id="cars" required>
<option value="">None</None>
<option value="bike1">Volvo</option>
<option value="bike2">Saab</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
i hope this will be helpful for you
I've 3 dropdowns. The options are coming well for the first dropdowns but the options for the last dropdown is kind of messy.
Here is my css
select option {
background: #E6EABF;
color: #000000;
overflow-y: scroll;
z-index: 100;
}
Please the last one is a multi-select dropdown.
Any kind of help is appreciated!
Give the select an size would have worked: size="8"
Since its not hard coded use js:
var select = document.getElementById('select');
select.size = select.length;
select option {
background: #E6EABF;
color: #000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select" multiple size="return this.length();">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
Im trying to figure out why my Drop Down menu is not working. It does appear but when i click on it, it doesn't drop down. Any help would be highly appreciated,
Thanks!
Im trying to figure out why my Drop Down menu is not working. It does appear but when i click on it, it doesn't drop down. Any help would be highly appreciated,
Thanks!
<div class="form-group row">
<label for="location" class="col-sm-3 control-label">Job Location</label>
<div class="col-sm-9">
<select id="location" name="job_location" multiple="" data-placeholder="Enter city and country or leave it blank" class="form-control form-control-chosen jform-chosen-validate" style="display: none;">
<option value="aichach">Aichach</option>
<option value="allende">Allende</option>
<option value="atlanta">Atlanta</option>
<option value="bangalore">bangalore</option>
<option value="berlin">Berlin</option>
<option value="bristol">bristol</option>
<option value="calgary">Calgary</option>
<option value="california">California</option>
<option value="campuchia">Campuchia</option>
<option value="carapicuiba-sao-paulo">Carapicuíba - São Paulo</option>
<option value="conakry">Conakry</option>
<option value="dallas">Dallas</option>
<option value="dubai">Dubai</option>
<option value="fortaleza">Fortaleza</option>
<option value="guinea">Guinea</option>
<option value="ha-noi">Ha Noi</option>
<option value="hamburg">Hamburg</option>
<option value="india">india</option>
<option value="istanbul">istanbul</option>
<option value="jacksonville">Jacksonville</option>
<option value="kathmandu">Kathmandu</option>
<option value="kk">kk</option>
<option value="latur">latur</option>
<option value="lll">lll</option>
<option value="london">London</option>
<option value="manila">Manila</option>
<option value="melbourne">Melbourne</option>
<option value="montreal">montreal</option>
<option value="new-york">New York</option>
<option value="newcastle">Newcastle</option>
<option value="nigeria">Nigeria</option>
<option value="noordwijk">Noordwijk</option>
<option value="philippines">Philippines</option>
<option value="san-gwann">San Gwann</option>
<option value="scotland">Scotland</option>
<option value="sydney">Sydney</option>
<option value="tourcoin">Tourcoin</option>
<option value="vienna-austria">Vienna, Austria</option>
<option value="wroclaw">Wrocław</option>
<option value="zxczxc">zxczxc</option>
<option value="zxczxvzxv">zxczxvzxv</option>
</select>
<div class="chosen-container chosen-container-multi" style="width: 795px;" title="" id="location_chosen"><ul class="chosen-choices"><li class="search-field">
<input type="text" value="Enter a city and country or leave it blank" class="default" autocomplete="off" style="width: 279px;"></li></ul><div class="chosen-drop"><ul class="chosen-results"></ul></div></div>
</div>
</div>
removing the display:none
according to your code you are using bootstrap after removing it if it not working check the jquery and javascript links pattern
like
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
you have style display:none on it change it to block
or you could opt for a (small bit of js) option and go for this
Here is a fiddle
var mytextbox = document.getElementById('country');
var mydropdown = document.getElementById('dropdown');
mydropdown.onchange = function(){
mytextbox.value= " ";
mytextbox.value = mytextbox.value + this.value;
}
textarea, select{display:block; vertical-align:top; height:27px;}
<select id="dropdown">
<option value="aichach">Aichach</option>
<option value="allende">Allende</option>
<option value="atlanta">Atlanta</option>
<option value="bangalore">bangalore</option>
<option value="berlin">Berlin</option>
<option value="bristol">bristol</option>
<option value="calgary">Calgary</option>
<option value="california">California</option>
<option value="campuchia">Campuchia</option>
<option value="carapicuiba-sao-paulo">Carapicuíba - São Paulo</option>
<option value="conakry">Conakry</option>
<option value="dallas">Dallas</option>
<option value="dubai">Dubai</option>
<option value="fortaleza">Fortaleza</option>
<option value="guinea">Guinea</option>
<option value="ha-noi">Ha Noi</option>
<option value="hamburg">Hamburg</option>
<option value="india">india</option>
<option value="istanbul">istanbul</option>
<option value="jacksonville">Jacksonville</option>
<option value="kathmandu">Kathmandu</option>
<option value="kk">kk</option>
<option value="latur">latur</option>
<option value="lll">lll</option>
<option value="london">London</option>
<option value="manila">Manila</option>
<option value="melbourne">Melbourne</option>
<option value="montreal">montreal</option>
<option value="new-york">New York</option>
<option value="newcastle">Newcastle</option>
<option value="nigeria">Nigeria</option>
<option value="noordwijk">Noordwijk</option>
<option value="philippines">Philippines</option>
<option value="san-gwann">San Gwann</option>
<option value="scotland">Scotland</option>
<option value="sydney">Sydney</option>
<option value="tourcoin">Tourcoin</option>
<option value="vienna-austria">Vienna, Austria</option>
<option value="wroclaw">Wrocław</option>
<option value="zxczxc">zxczxc</option>
<option value="zxczxvzxv">zxczxvzxv</option>
</select>
<textarea id="country"></textarea>
Ref
I have a standard type of select list:
<select>
<option value="cars1">Cars 1</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="cars2">Cars 2</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
This is just an example but what I would like to do is to make Cars 1 and Cars 2 in the list as headings that cannot be selected.
Is there some way that I can do this?
Sure, it's called an <optgroup>: fiddle
<select>
<optgroup label="Cars 1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="Cars 2">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
Another way is to use disabled attribute:
<select>
<option value="cars1" disabled>Cars 1</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="cars2" disabled>Cars 2</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Live demo: Tinkerbin
Use optgroup tag
<select>
<optgroup label="Cars 1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="Cars 2">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
I'm guessing you are looking for optgroup:
<select>
<optgroup label="Cars 1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="Cars 2">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
FIDDLE
This is my code.
<form name="publish">
<?php include 'location.selector.html'; ?>
<input type="submit" value="submit"/> </form>
When displayed, there is a newline preceding the
submit
button, how to eliminate this newline/line break?
The HTML content of location.selector.html is
<table><tr><td>都道府県を選択してください</td>
<td>市区町村を選択してください</td></tr>
<tr><td align="center">
<SELECT name="pref" onChange="changePref(true)">
<OPTION VALUE="99">全国
<OPTION VALUE="0">北海道
<OPTION VALUE="1">青森県
<OPTION VALUE="2">岩手県
<OPTION VALUE="3">宮城県
<OPTION VALUE="4">秋田県
<OPTION VALUE="5">山形県
<OPTION VALUE="6">福島県
<OPTION VALUE="7">茨城県
<OPTION VALUE="8">栃木県
<OPTION VALUE="9">群馬県
<OPTION VALUE="10">埼玉県
<OPTION VALUE="11">千葉県
<OPTION VALUE="12">東京都
<OPTION VALUE="13">神奈川県
<OPTION VALUE="14">新潟県
<OPTION VALUE="15">富山県
<OPTION VALUE="16">石川県
<OPTION VALUE="17">福井県
<OPTION VALUE="18">山梨県
<OPTION VALUE="19">長野県
<OPTION VALUE="20">岐阜県
<OPTION VALUE="21">静岡県
<OPTION VALUE="22">愛知県
<OPTION VALUE="23">三重県
<OPTION VALUE="24">滋賀県
<OPTION VALUE="25">京都府
<OPTION VALUE="26">大阪府
<OPTION VALUE="27">兵庫県
<OPTION VALUE="28">奈良県
<OPTION VALUE="29">和歌山県
<OPTION VALUE="30">鳥取県
<OPTION VALUE="31">島根県
<OPTION VALUE="32">岡山県
<OPTION VALUE="33">広島県
<OPTION VALUE="34">山口県
<OPTION VALUE="35">徳島県
<OPTION VALUE="36">香川県
<OPTION VALUE="37">愛媛県
<OPTION VALUE="38">高知県
<OPTION VALUE="39">福岡県
<OPTION VALUE="40">佐賀県
<OPTION VALUE="41">長崎県
<OPTION VALUE="42">熊本県
<OPTION VALUE="43">大分県
<OPTION VALUE="44">宮崎県
<OPTION VALUE="45">鹿児島県
<OPTION VALUE="46">沖縄県
</SELECT></td><td align="center">
<SELECT NAME="city">
<OPTION VALUE="99" SELECTED>全地区
<OPTION VALUE="">
<OPTION VALUE="">
<OPTION VALUE="">
<OPTION VALUE="">
<OPTION VALUE="">
<OPTION VALUE="">
<OPTION VALUE="">
</SELECT></td></tr></table>
Include the table before your form tag or use try using below CSS:
<style type="text/css">
form, table {
display:inline;
margin:0px;
padding:0px;
}
</style>
It's been awhile since I did CSS but try the
display:inline
style.