good day. See the code below. I have 4 languages. I want to add a link to each languages, so as to access a new page every time I choose the language from the combo. How can I do this?
<!-- FLAGS -->
<div class="language-picker js-language-picker" data-trigger-class="btn btn--subtle js-tab-focus">
<form action="" class="language-picker__form">
<label for="language-picker-select">Select your language </label>
<select name="language-picker-select" id="language-picker-select">
<option lang="de" value="deutsch">Deutsch</option>
<option lang="en" value="english" selected>English</option>
<option lang="fr" value="francais">Français</option>
<option lang="it" value="italiano">Italiano</option>
</select>
</form>
</div>
<!-- FLAGS -->
For example, I change this line, add a link. But is not working.
<option lang="de" value="deutsch" Deutsch </option>
You can do this with onchange event that will be trigred with each change
<select onchange="if (this.value) window.location.href=this.value">
<option value="">Pick one:</option>
<option value="/de">Deutsch</option>
<option value="/fr">Français</option>
</select>
Related
I want the submit button to act on the combined values in the two didferent dropwdown menu's in the form.Which will be a html page name.
For example... west and winter is a different option which will creat "westwinter.html" then west and summer is a different option which will make "westsummer.html" . and clicking submit button the created page will load.I have already created such types of html page named (ex. westwinter.html).
I'm struggeling for days to make this work. I feel some how this must be possible. Please help!
This is the code I use. When I replace the value to a page name (ex. westsummer.html) . The page will be loaded on submit (go). I want the values of the first dropdown and second dropdown to be counted and the result should be a page name on submit. Finaly there should be 16 different html page name.
Iwant this solution with jQuery or javascript.
<div class="selCont">
<h2>pick an option</h2>
<select id="selection" name="selection">
<option value="1">West</option>
<option value="2">East</option>
<option value="3">North</option>
<option value="4">South</option>
</select>
<select id="selection" name="selection">
<option value="1">Winter</option>
<option value="2">Spring</option>
<option value="3">Summer</option>
<option value="4">Fall</option>
</select>
<button class="go-btn" type="submit">Go</button>
</div>
Firstly, let's set unique IDs for the select tags, and lets set the values to the actual strings (we could keep them numeric and perform a switch on them later to determine their value, but it's easier this way):
<select id="direction" name="selection">
<option value="west">West</option>
<option value="east">East</option>
<option value="north">North</option>
<option value="south">South</option>
</select>
<select id="season" name="selection">
<option value="winter">Winter</option>
<option value="spring">Spring</option>
<option value="summer">Summer</option>
<option value="fall">Fall</option>
</select>
Next, let's write a function to compose a link using the values from those select tags. I've used document.querySelector here, but you can easily change it out for jQuery if you'd like:
function getLink() {
var direction = document.querySelector("#direction").value;
var season = document.querySelector("#season").value;
//Assuming that the html files are in the same folder as the current page
return "./" + direction + season + ".html";
}
Finally, let's update our button to change the page location to the new link when clicked:
<button class="go-btn" type="submit" onClick="window.location.href = getLink()">Go</button>
Here's everything altogether:
<!DOCTYPE html>
<html lang="en">
<body>
<div class="selCont">
<h2>pick an option</h2>
<select id="direction" name="selection">
<option value="west">West</option>
<option value="east">East</option>
<option value="north">North</option>
<option value="south">South</option>
</select>
<select id="season" name="selection">
<option value="winter">Winter</option>
<option value="spring">Spring</option>
<option value="summer">Summer</option>
<option value="fall">Fall</option>
</select>
<button class="go-btn" type="submit" onClick="window.location.href = getLink()" >Go</button>
</div>
</body>
<script>
function getLink() {
var direction = document.querySelector("#direction").value;
var season = document.querySelector("#season").value;
return "./" + direction + season + ".html";
}
</script>
</html>
I have two dropdown menus. The first is to choose your location. The second is to choose what type of pictures you want to upload. (i.e. Option 1 - Akron, Option 2 - Skyline). I've setup a file request (DropBox generated upload link) in my DropBox account for these options (Akron, Skyline). If they choose (Akron, Houses), it'd be a different upload link. Similarly, (Cleveland, Streets) would be yet another upload link. Using JQuery, I have the link sent to my submit button HTML. Everything I've tried sends to that link no matter what options I choose. (i.e. everything goes to (Akron, Skyline) link even if I choose (Akron, Houses). There is something wrong in my if statement and I can't figure it out. Here is a sample of my code. The if statement is for the (Akron, Skyline) combination. Additional code will be written for other options once I get this one to work. I've replaced the upload link with a generic URL.
<!DOCTYPE html>
<html>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<p> Choose Your Location </p>
<select id="Location Select">
<option value="Choose Location">Choose Location</option>
<option value="Akron">Akron</option>
<option value="Alliance">Alliance</option>
<option value="Ashland">Ashland</option>
<option value="Barberton">Barberton</option>
<option value="Bellaire">Bellaire</option>
</select>
<br>
<br>
<p> What Pictures or Videos are You Uploading? </p>
<select id="Type Select">
<option value="Choose Type">Choose Type</option>
<option value="Skyline">Skyline</option>
<option value="Streets">Streets</option>
<option value="Houses">Houses</option>
</select>
<br>
<br>
<a href='URL'>
<input type="button" value="Upload" />
<script>
if("#Location Select").val("Akron") && ("#Type Select").val("Skyline"){
$("a").attr("href",'https://www.google.com');
}
</script>
</body>
</html>
Note
http://api.jquery.com/val/
.val() does not accept any arguments.
Also note that you first have to identify the selected element, and then get its value.
HTML IDs should not have spaces, and there should only be one ID of a particular string in any given document. If you want to describe a type of element, use class instead. For example:
<p> Choose Your Location </p>
<select class="Select" id="Location">
<option value="Choose Location">Choose Location</option>
<option value="Akron">Akron</option>
<option value="Alliance">Alliance</option>
<option value="Ashland">Ashland</option>
<option value="Barberton">Barberton</option>
<option value="Bellaire">Bellaire</option>
</select>
<br>
<br>
<p> What Pictures or Videos are You Uploading? </p>
<select class="Select" id="Type">
<option value="Choose Type">Choose Type</option>
<option value="Skyline">Skyline</option>
<option value="Streets">Streets</option>
<option value="Houses">Houses</option>
</select>
<br>
<br>
<a href='URL'>
<input type="button" value="Upload" />
<script>
$('input').click((e) => {
e.preventDefault();
const location = $('#Location')[0];
const type = $('#Type')[0];
const locationVal = location.options[location.selectedIndex].value;
const typeVal = type.options[type.selectedIndex].value;
if (locationVal === 'Akron' && typeVal === 'Skyline') {
console.log('Akron/Skyline');
} else {
console.log(`Other, ${locationVal} ${typeVal}`);
}
});
</script>
(you don't actually need the class="Select" here at all, based on the code so far)
This this code. It was missing $ as well as brackets.
if($("#Location Select").val("Akron") && $("#Type Select").val("Skyline")){
$("a").attr("href",'https://www.google.com');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<p> Choose Your Location </p>
<select id="Location Select">
<option value="Choose Location">Choose Location</option>
<option value="Akron">Akron</option>
<option value="Alliance">Alliance</option>
<option value="Ashland">Ashland</option>
<option value="Barberton">Barberton</option>
<option value="Bellaire">Bellaire</option>
</select>
<br>
<br>
<p> What Pictures or Videos are You Uploading? </p>
<select id="Type Select">
<option value="Choose Type">Choose Type</option>
<option value="Skyline">Skyline</option>
<option value="Streets">Streets</option>
<option value="Houses">Houses</option>
</select>
<br>
<br>
<a href='URL'>
<input type="button" value="Upload" />
</body>
</html>
Here is a link of js fiddle
[https://jsfiddle.net/7Lcf533c/1/][1]
i make select dropdown read only but when i click on it it shows me the drop down option which should not show and it is changeable
Can you suggest a solution and update that in jsfiddle
You can do it like this:
$("#id_messageKindId option").prop('disabled',true);
use disabled attribute
<div class="col-sm-8"><select class="form-control" id="id_messageKindId" name="messageKindId" disabled="disabled" required="required" readonly="">
<option value="1">Appointment Reminder</option>
<option value="2">Eyeware or Contact Arrival</option>
<option value="3">Appt Delay / Move Up</option>
<option value="4">Appt Cancellation</option>
<option value="5">Recall</option>
<option value="7">After Appointment</option>
<option value="10" selected="selected">Pre Appointment</option>
<option value="11">Lab Results</option>
<option value="12">Collection Message</option>
<option value="13">Custom Message</option>
</select></div>
fiddle at https://jsfiddle.net/7Lcf533c/5/
I'm new posting here, have visited several times over the years to read every ones ideas.
My issue is I have a form with 2 select boxes, second one populated with values upon selection in the first. The second holds a url value which you got to upon submit.
This function works perfectly using the onchange but on submit only the first of the second select list urls work. I can swap them but only the first works, all the others only pass the primary url followed by a crosshatch '#'.
<script>
$(document).ready(function($){
$("#category").change(function() {
$('select[name="product"]').removeAttr("name").hide();
$("#" + $(this).val()).show().attr("name", "product");
});
/* ' This works on all
$(".product").change(function() {
document.location = $(this).val();
});
*/
/* this only passes url on first product option list else passes opening url + #*/
$('#discover').submit(function() {
document.location = $(".product").val();
return false;
});
});
</script>
<div id="discover-box">
<form id="discover" method="post">
<fieldset>
<p class="category">
<label class="title">Category:</label>
<select id="category" name="category">
<option value="#" selected="selected">Choose category</option>
<option value="accommodation">Accommodation</option>
<option value="food">Food</option>
<option value="explore">Explore</option>
</select>
<p><label>Sub-Category:</label>
<select id="accommodation" name="product" class="product">
<option value="#" selected="selected">Choose sub-category</option>
<option value="accommodation_category.asp?o=1&c=1">Motels</option>
<option value="accommodation_category.asp?o=2&c=2">Camping, Caravan & Holiday Parks</option>
<option value="accommodation_category.asp?o=3&c=3">B&B, Self-Contained Houses & Cottages</option>
<option value="accommodation_category.asp?o=4&c=4">Hotels</option>
<option value="accommodation_category.asp?o=5&c=5">Backpackers & Group Accommodation</option>
<option value="accommodation_category.asp?o=6&c=6">National Parks</option>
</select>
<select id="food" style="display:none" name="product" class="product">
<option value="#" selected="selected">Choose sub-category</option>
<option value="food_wine_category.asp?o=1&t=1&c=1">Restaurants & Cafes</option>
<option value="food_wine_category.asp?o=2&t=1&c=2">Pubs</option>
<option value="food_wine_category.asp?o=3&t=1&c=3">Bakeries & Takeaway</option>
<option value="food_wine_category.asp?o=4&t=1&c=4">Local Produce</option>
<option value="food_wine_category.asp?o=5&t=2&c=1">Mount Gambier Wine Region</option>
<option value="food_wine_category.asp?o=5&t=2&c=2">Other Limestone Coast Wine Regions</option>
</select>
<select id="explore" style="display:none" name="product" class="product">
<option value="#" selected="selected">Choose sub-category</option>
<option value="explore_category.asp?o=1">Top 10</option>
<option value="explore_category.asp?o=2">Arts, Crafts, Galleries & Museums</option>
<option value="explore_category.asp?o=3">Heritage, Antiques & Collectables</option>
<option value="explore_category.asp?o=4">Family Fun</option>
<option value="explore_category.asp?o=5">Caves & Sinkholes</option>
<option value="explore_category.asp?o=6">Parks & Gardens</option>
<option value="explore_category.asp?o=7">Walks & Drives</option>
<option value="explore_category.asp?o=8">Kanawinka Geotrail</option>
<option value="explore_category.asp?o=9">Retail</option>
<option value="explore_category.asp?o=10">Recreation, Leisure & Adventure</option>
</select>
</p>
<p class="buttons">
<input type="image" src="images/submit-red.png" Value="submit">
</p>
</fieldset>
</form>
</div>
because $(".product").val(); will find first occurrence of DOM having class product so in any case it will fetch first one... u can do this using
$('#discover').submit(function() {
document.location = $('select[name="product"]').val();
return false;
});
Open Fiddler (fiddler2.com) and watch the post go past. I find that generally when more than one control on a page uses the same name, the browser actually passes all of them, but the server-side framework expecting each post parameter to be unique, ignores all but the last one.
when you submit , you have only one select box with attribute name ,so you can select the selected value by that attribute
$('#discover').submit(function() {
document.location = $('select[name="product"]').val();
return false;
});
EDIT: Ok, I really want to get this so I've decided to simplify what I need. I have one textbox that onclick updates a textfield. Now, what I need it to do is when they click on a second dropdown it will update a portion of text in the same textfield. Hope this helps.
<script type="text/javascript"><!--
function OnSelectionChanged(listBox) {
var textInput = document.getElementById("dn");
textInput.value = listBox.value;
}
//--></script>
</head>
<body>
<ul id="menu">
</ul>
<div id="main" class="view">
<h1>Text</h1>
<div id="intro"><h5>Text</h5>
<div id="content"><h2>Text:</h2>
<p>Text</p>
</div>
<form method="POST" action="submit" name="myForm"><fieldset>
<legend>Text</legend>
<label>[?]
Disposition Code<br />
<select size="1" name="disposition" id="drp_dwn" onchange="OnSelectionChanged (this)">
<option value="-1" selected>——Select one——</option>
<option value="Text ">190</option>
<option value="191">191</option>
<option value="192">192</option>
<option value="195">195</option>
<option value="270">270</option>
<option value="300">300</option>
<option value="340">340</option>
<option value="350">350</option>
<option value="370">370</option>
<option value="380">380</option>
<option value="381">381</option>
<option value="382">382</option>
<option value="383">383</option>
<option value="384">384</option>
<option value="400">400</option>
<option value="401">401</option>
<option value="402">402</option>
<option value="403">403</option>
</select>
</label>
<label>[?]
Cause Code<br />
<select size="1" name="cause">
<option value="-1" selected>——Select one——</option>
<option value="">Cause - 190</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
</select>
</label><br /><br />
<label><!--[?] -->
Disposition Narrative
<textarea id="dn" rows="8" cols="30" name="dn"></textarea>
</label>
Im still getting used to how stack overflow wants us to format the code but hopefully you guys can read it well enough to help find a solution. Thanks again.
All I can really give you at this point is
Attach onchange handlers to your drop downs. Your handlers will
add/replace the text.
Use regular expressions to replace text when dd2 and dd3 change.
If you can provide more details about the text you want to replace then someone will be able to help you with your regular expressions.