Upon using bootstrap, when I try to disable the drop down list on my page, it does get disabled, however, does not greyed out. Commenting out the bootstrap dependency gets it to work fine.
How can I use bootstrap, and the still have my drop down greyed out upon disabling. Please see my jsbin here.
There is no Error in Your Code, it is working fine in your jsbin.
Just click on Run with JS click on Disable then click on Select element. it is disabled, The center box is for jsbin setting. you can not apply your code on it. don't click on CSS select.
Just remove
<script>
window.onload = init;
</script>
Because it is not defined and generate error.
Just see this simple code working Here
<script>
function disable() {
document.getElementById("mySelect").disabled=true;
}
function enable() {
document.getElementById("mySelect").disabled=false;
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
<br><br>
<input type="button" onclick="disable()" value="Disable list">
<input type="button" onclick="enable()" value="Enable list">
</form>
Related
Using the chosen lib I run into the following issue, you can reproduce it yourself by going to their show-and-tell-page:
https://harvesthq.github.io/chosen/
Steps to reproduce:
In their standard select section, select -any country you want- in both the standard dropdown and the chosen dropdown
Click 'fork on github'(or any link) to leave the page
Navigate back by hitting the back button in chrome
The standard dropdown shows you the previously selected country
The chosen dropdown is empty (but under the hood the value is selected, according to what I'm seeing with my form. It just is not showing)
So this leads to confusion. When the user would back and then go forward again by submitting the form(in my case) it would use another value than what is shown.
My form basically looks like:
<form id="myForm" action="${home}mySite/foo/bar" method="GET">
<select id="bar" name="barName" class="chosen-select">
<option value="a">foo 1</option>
<option value="b">foo 2</option>
<option value="c">foo 3</option>
<option value="d">foo 4</option>
</select>
<input type="submit" value="Continue"/>
</form>
If I remove the class="chosen-select" it works as I expect, but I lose chosen's nice search feature which I want. I've tried messing around with
<option value="a" selected="selected">Foo 1</option>
in the dropdown, but that doesn't help.
I've also tried changing the method="GET" to POST but there is no difference in behaviour. It still works as in the example link I provided.
The chosen lib generates the following in on the page:
<div class="chosen-container chosen-container-single" title="" id="parkingZoneOwner_chosen" style="width: 40%;"><a class="chosen-single">
<span>Foo 1</span>
<div><b></b></div>
</a>
<div class="chosen-drop">
<div class="chosen-search">
<input class="chosen-search-input" type="text" autocomplete="off">
</div>
<ul class="chosen-results"></ul>
</div></div>
But nothing about the generated html looks wrong to me, even after backing to the page.
I tried this in the js (events):
<script type="text/javascript">
$(function () {
$(document).ready(function () {
$(".chosen-select").chosen({
width: "40%",
search_contains: true
});
$('.chosen-select').on('chosen:ready', function(evt, params) {
$(".chosen-select").val("a");
});
});
});
$('.chosen-select').on('chosen:ready', function(evt, params) {
// alert("reached")
// I had really high hopes for this one:
$('.chosen-select').trigger('chosen:updated');
//Also tried this one:
$('#myForm')[0].reset();
});
Anyone know a way to fix this? Either the chosen dropdown needs to show what actually will be submitted in the form or the entire form maybe could be reset to default values somehow.
This solved it in the end, turning off autocomplete on the form.
<form id="myForm" action="${home}mySite/foo/bar" autocomplete="off" method="GET">
I don't know why this works.
I have made a dropdown in my site and added background image to it. I can see it fine in Firefox, but not able to see it using Chrome or IE.
Here is:
my site
On the very top you can see a search icon. Upon hovering that you can see a pop out. Inside that I am using a dropdown.
You can see the images showing fine in Firefox but not using any other browser.
:
Here is the select dropdown code I used:
My JS
function goToNewPage(dropdownlist){
var url = dropdownlist.options[dropdownlist.selectedIndex].value;
if (url != ""){
window.open(url);
}
}
My HTML
<form name="dropdown">
<label>I am Looking for</label>
<img src="http://test.techkalph.com/wp-content/uploads/2015/10/Bee-searching1.png">
<select accesskey="E" name="list">
<option selected="">Please select one</option>
<option style="background-image:url(http://test.techkalph.com/wp-content/uploads/2015/10/flowers271.png); background-repeat:no-repeat;" value="http://www.google.com/">Japanese Companies</option>
<option style="background-image:url(http://test.techkalph.com/wp-content/uploads/2015/10/social16.png); background-repeat:no-repeat;" value="http://www.google.com/">Service Provider (Non-Japanese)</option>
</select>
<input type="button" onclick="goToNewPage(document.dropdown.list)" value="Go">
</form>
You can't do it in webkit (Google) browsers. You will need an alternative solution with ul and li elements.
http://getbootstrap.com/components/#dropdowns
Sorry Got your Problem. The code you are using only works with Firefox and Webkit browsers. You either have to use JQuery UI for yuor need, or you can also some code at this link
here's my code below. On page load, all multiselect are disabled but once the user click the enable button, all multiselect should be enable. Here's my code below. I'm not able to make this work, I wonder why. But if I add "$('#multidiv option').prop('disabled', false);" on first load, it works, but all my multiselect will be enabled on first load. I want to disabled all on first load but enable all by clicking a button. Thanks.
<div id="multidiv">
<label style="float:left; margin-right:-2px;">Target Android Device</label>
<div class="span5" style="display:inline-block; float:left;">
<select id="android" disabled="disabled" multiple="multiple" name="android[]">
<option value="Nexus">Nexus</option>
<option value="HTC">HTC One</option>
<option value="Sony">Sony Xperia</option>
</select>
</div>
</div>
My javascript code below:
$('#enable_button').on("click",function(){
$('#multidiv option').prop('disabled', false);
});
$('#android').multiSelect(); //using "http://loudev.com/" plugin
I've found the solution to my problem.
This $('#multidiv option').removeAttr('disabled'); code actually works. It's the plugin problem.
By adding $('#android').multiSelect('refresh'); it works fine now. The plugin needs to be refreshed after this code $('#multidiv option').removeAttr('disabled');
Thanks for all for trying to help btw.
Why not use the id of the <select> itself:
$('#enable_button').on("click",function(){
$('#android option').removeAttr('disabled');
});
you can use this script;
$('#android').multiselect('disable');
and
$("#android").multiselect('enable');
its work for agungpanduan.com
I'm trying to do a very simple thing: with the jQuery Mobile 1.1.1 framework, I'd like to disable a field when a toggle flip is on "manual".
Here is the HTML:
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="toggleswitch">
</label>
<select name="toggleswitch" id="toggleswitch" data-theme="b" data-role="slider">
<option value="off">gps</option>
<option value="on">manual</option>
</select>
</fieldset>
</div>
and here is my JavaScript:
$('#toggleswitch').change(function(){
console.log("toggle");
});
At the moment, I can't even see the "toggle" word in the console. I think the change method doesn't even fire, but this is what I found in the online examples.
EDIT - I copied here a wrong example: the code I actually tested has the same "toggleswitch" id. The code is now edited the way I have it on my notepad++.
Your id on the select element is toggleswitch3, but in the JavaScript code you use toggleswitch. The names need to match in HTML and JavaScript, otherwise it can't work.
Did you put the code in the dom ready callback?
$(function() {
$('#toggleswitch').change(function(){ console.log("toggle"); });
});
PS: If you use id selector, no need to specify the element type.
Edit:
Also note you are using toggleswitch3 in the html as id, while using toggleswitch in the javascript.
I have two dropdowns with different values in each and have an submit button in last..
Now what i want to do is that, when i select an option form first dropdown and then another option from the second dropdown. Now when i click on submit button it would show there related value popup window having close button in it.
Code is as follows :
Calling from :
<select>
<option>America</option>
<option>India</option>
</select>
Calling To :
<select>
<option>England</option>
<option>France</option>
</select>
<input type="submit" name="" value="" />
These four countries have four different rates..
When i select calling from America to England than it ll show a popup window of its rates.
And when i select calling from America to France than it ll show a pop window of its own rates ..
Thanks in advance if u can help me .. :)
Guessing you just want the selected values or something?
First give the dropdowns a name and/or id.
lets make it simple and just make it a button instead of a submit.
<select id="list1">
<option>USA</option>
<option>India</option>
</select>
<select id="list2">
<option>UK</option>
<option>Fr</option>
</select>
<input type="button" value="Click here" onClick="showAlert();">
<script language="javascript" type="text/javascript">
function showAlert() {
alert('Just get the values in here by ID.selectedItem.text I believe it is');
}
</script>
I believe that is basicly what you are after.
P.s.What exactly do you mean with rates?
In that case take what Mithin Sasidharan wrote and instead of the links he used just use a page you made and then put the info on that page that you have.
You can also just make a link and style it with CSS to make it look like a button.
If you did that you can simply use
This will make the link open a new window with the page you pointed towards.
check this out.
http://jsfiddle.net/NFq2f/2/