I am creating a website on github pages so i want user to be directed on fixed page after he choose the final option. I am getting data from JSON file. I also tried to insert tag to JSON but it is not directing when you click on option edited. The page is here vaidicbooks.cf/test.html
You should add onchange handler for city like -
$(document).on('change', '#state', function(){
var state_id = $(this).val();
if(state_id != '')
{
load_json_data('city', state_id);
}
else
{
$('#city').html('<option value="">Select city</option>');
}
});
$(document).on('change', '#city', () => {
var country = $("#country").val();
var state = $("#state").val();
var city = $("#city").val();
window.location.href = `${country}/${state}/${city}.html`;
});
and remove HTML onchange handler like -
<select name="city" id="city" class="form-control input-lg">
<option value="">Select city</option>
</select>
Related
I'm making a chart based on a drop down selection in code igniter, but I'm getting problems with refreshing the value after I select a drop down list.
I'm using onchange but it seems not to be working.
<form>
<select class="form-control btn-primary" id="sel1" onchange="window.setTimeout(function(){ document.location.reload(true); }, this.options[this.selectedIndex].value);">
<option value = "1">Layanan</option>
<option value = "2">Hasil</option>
<option value = "3">Waktu</option>
<option value = "4">Biaya</option>
</select>
</form>
var temp = document.getElementById("sel1").value;
The refresh page is working, but the value is not changing. It keeps getting back to the first selection. Any ideas?
As a solution (may not suit for your case): You need to pass parameter query along with window location string, but you should set an event listener for window load event:
HTML:
<select class="form-control btn-primary" id="sel1" onchange="reloader();">
<option value = "1">Layanan</option>
<option value = "2">Hasil</option>
<option value = "3">Waktu</option>
<option value = "4">Biaya</option>
</select>
Javascript:
function reloader(){
var param = document.getElementById('sel1').value;
var ref = window.location.href.split('?')[0];
if (param)
window.location.href = ref + "?sel1="+param;
}
window.addEventListener('load', function() {
var query = window.location.href.split('?')[1];
if (query) {
var qval = query.split('=')[1];
document.getElementById('sel1').value = qval;
} else {
document.getElementById('sel1').value = 1;
}
});
Try to use the https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Property/selectedIndex
It will help you select the desired option.
Something like this
document.getElementById("sel1").selectedIndex = 2;
Why is this list not working?
I need to combine three things: input box + select list + links.
This is my attempt:
<input type="text" name="example" list="lemmas">
<datalist onChange="window.location.href=this.value" id="lemmas">
<option value="http://pastebin.com/embed_iframe/37CVfR9Z">A</option>
<option value="http://pastebin.com/embed_iframe/1kJWwbnz">a day</option>
</datalist>
Please help me to get a combo of this three things. After using the input box to select an option of the list and pressing ENTER the list has to open the link.
Thanks.
The following select works. I only need to add an input box to it:
<select onChange="window.location.href=this.value">
<option value="http://pastebin.com/embed_iframe/37CVfR9Z">A</option>
<option value="http://pastebin.com/embed_iframe/1kJWwbnz">a day</option>
</select>
This is my first time reading about <datalist/> tag. It doesn't seem to have good browser support.
Anyways... you can attach an oninput event handler to your <input/> field. I don't like using event attributes, so I am attaching the event in the JavaScript.
example.oninput = function () {
window.location.href = this.value;
}
<input type="text" name="example" id="example" list="lemmas">
<datalist id="lemmas">
<option value="http://pastebin.com/embed_iframe/37CVfR9Z">A</option>
<option value="http://pastebin.com/embed_iframe/1kJWwbnz">a day</option>
</datalist>
Side-remark - you should probably add logic to verify that the value is a URL though...
The code below should work accurately. Check the jsFiddle. I added an id="autocomplete" to the input field, jQuery checks when ENTER key is pressed in the field and based on that it redirects the page.
Revised answer with ENTER key press event:
$(function(){
// check for key press event
$('#autocomplete').keypress(function (e) {
var key = e.which;
var url = $(this).val();
// the enter key code
if(key == 13) {
if (url) { window.location = url; }
}
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="autocomplete" name="example" list="lemmas">
<datalist id="lemmas">
<option value="http://pastebin.com/embed_iframe/37CVfR9Z">A</option>
<option value="http://pastebin.com/embed_iframe/1kJWwbnz">a day</option>
</datalist>
Alternately you could also use on input change (without ENTER key press):
$('#autocomplete').on('input', function(e) {
var url = $(this).val();
if (url) { window.location = url; }
return false;
});
I have a basic GET form in my project that is used to filter through posts created by users. When I submit the form the values from the multiple select input are appended to the url like so:
project.dev/?maps[]=1&maps[]=2&maps[]=3
As you can see, the values are passed to the url via three separate key value pairs... However, I would like to know how to append the values to the url in the following format:
project.dev/?maps=1,2,3
Thanks in advance.
Assuming you're trying to send an array, how about Array.prototype.join?
var arr = [1, 2, 3];
console.log(arr.join(','));
// result: 1,2,3
I found a solution to this and thought I'd share it in hopes to help others overcome the same problem in the future.
HTML
<select id="region" name="region" multiple>
<option value="1">Region 1</option>
<option value="2">Region 2</option>
<option value="3">Region 3</option>
</select>
<select id="maps" name="maps[]" multiple>
<option value="1">Map 1</option>
<option value="2">Map 2</option>
<option value="3">Map 3</option>
</select>
<button id="search">Search</button>
JavaScript
<script>
$(function() {
$("#search").click(function() {
var params = {};
var getSelect = ['region', 'maps'];
$.each(getSelect, function(index, value) {
var select = $('#' + value);
if (select.val() != '') {
var selected = select.val();
if (select.attr('multiple'))
selected = selected.join(',');
params[value] = selected;
}
});
if (!$.isEmptyObject(params)) {
var url = [location.protocol, '//', location.host, location.pathname].join('');
window.location.href = url + '?' + $.param(params);
}
});
});
</script>
I have 3 select dropdown fields Country,State,City.Onload of the page only country field is enabled (city and state fields are disabled)then if user select country then state field is enabled(with all the states mapped on that country stored in my database) then if user select state then city field is enabled(with all the city mapped on the on that state stored in my database).My dropdowns code are
<select class="form-login" id="country_id" onchange="setDropdownState();">
<option value="select" >Select country</option>
#for(country <- countryList) {
<option value="#country.getId" >#country.getName</option>
}
</select>
<select class="form-login" id="state_id" onchange="setDropdownCity();">
<option value="select" >Select country</option>
#for(state<- Country.findStateByCountryId(get value of cid from setDropdownState function)) {
<option value="#state.getId" >#state.getName</option>
}
</select>
<select class="form-login" id="city_id" >
<option value="select" >Select country</option>
#for(city<- State.findCityByStateId(get value of sid from setDropdownCity function)) {
<option value="#state.getId" >#state.getName</option>
}
</select>
scripts
$(document).ready(function() {
$("#state_id").attr("disabled", true);
$("#city_id").attr("disabled", true);
});
function setDropdownState() {
var cid = $("#country_id").val();
if (cid != "select") {
//pass value to state dropdown
$("#state_id").attr("disabled", false);
} else {
$("#state_id").attr("disabled", true);
$("#city_id").attr("disabled", true);
}
}
function setDropdownCity() {
var sid = $("#state_id").val();
if (sid != "select") {
//pass value to citydropdown
$("#city_id").attr("disabled", false);
} else {
$("#city_id").attr("disabled", true);
}
}
So I have to pass country_id value onchange of country select box to get state field for loop value Country.findStateByCountryId(get value of cid from setDropdownState function) and in the same way pass state_id on change of state field to city field for loop to get the desired city on that particular state State.findCityByStateId(get value of sid from setDropdownCity function).
So how can I pass javascript value to model??
Is It possible??
Or is there any other way to do this??
Thanks
I think this link will help you out. http://jsfiddle.net/bdhacker/eRv2W/ It's a very similar situation that comes from this site https://bdhacker.wordpress.com/2009/11/21/adding-dropdown-country-state-list-dynamically-into-your-html-form-by-javascript/
Basically they create an event listener that listens for a change in the first dropdown menu, and then calls a function that passes that information into the second dropdown. It looks like this
countryElement.onchange = function () {
populateStates(countryElementId, stateElementId);
};
I have a select with loads of options. (Code below shortened for sake of example).
I want it to set the value of the input textfield "hoh" to "10" when you click/select all dropdown options, except one, that should set it to 50.
I imagined something like this would work, but its not. What am I doing wrong here?
<select>
<option onselect="document.getElementById('hoh').value = '50'">Hey</option>
<option onselect="document.getElementById('hoh').value = '10'">Ho</option>
<option onselect="document.getElementById('hoh').value = '10'">Lo</option>
....
</select>
<input type="text" id="hoh" value="10">
Something like this should work:
<script>
function myFunc(val) {
if (val == '50') {
document.getElementById('hoh').value = val;
} else {
document.getElementById('hoh').value = '10';
}
}
</script>
<select onchange="myFunc(this.value)">
<option value="1">one</option>
<option value="2">two</option>
<option value="50">fifty</option>
</select>
http://jsfiddle.net/isherwood/LH57d/3
The onselect event refers to selecting (or highlighting) text. To trigger an action when a dropbox selection changes, use the onchange event trigger for the <select> element.
E.g. Since you didn't already set the value attribute of your option tags.
<select id="myselect" onchange="myFunction()">
<option value="50">Hey</option>
<option value="10">Ho</option>
<option value="10">Lo</option>
....
</select>
and somewhere inside of a <script> tag (presumably in your HTML header) you define your javascript function.
<script type="text/javascript>
function myFunction() {
var dropbox = document.getElementById('myselect');
document.getElementById('hoh').value = dropbox[dropbox.selectedIndex].value;
}
</script>
I'm not sure it's wise to repeat the same value among different options in a droplist, but you could expand on this to implement the result other ways, such as if the sole option which will have value 50 is in a certain position, you could compare the selectedIndex to that position.
you could add an onchange event trigger to the select, and use the value of an option to show in the textbox
see http://jsfiddle.net/Icepickle/5g5pg/ here
<select onchange="setValue(this, 'hoh')">
<option>-- select --</option>
<option value="10">Test</option>
<option value="50">Test 2</option>
</select>
<input type="text" id="hoh" />
with function setValue as
function setValue(source, target) {
var tg = document.getElementById(target);
if (!tg) {
alert('No target element found');
return;
}
if (source.selectedIndex <= 0) {
tg.value = '';
return;
}
var opt = source.options[source.selectedIndex];
tg.value = opt.value;
}
Try this code
var inp = document.getElementById('hoh');
sel.onchange = function(){
var v = this.value;
if( v !== '50'){
v = '10';
}
inp.value = v;
};