I am trying to create a select dropdown list with multiple options, and after clicking on the option, the selected value should be displayed with expected styling and then the dropdown list will disappear. If clicking on the "X" button of the result box, the result box should disappear and the dropdown list should show again.
I have tried to write my script as following:
JSFiddle
While I am trying to use
if ($(promo).length > 0)
to prove the existence of the selected option, I still got O from console and I am now getting stuck at this point which I can't get the desired result.
Does anyone can share some opinion on it and tell me what to do? Thank you so much for your time to read this question. Regards.
Here is a working fiddle. There are several things to note:
You should use the change event rather than click, so keyboard navigation will appropriately trigger the events as well.
There were several reference errors
There were several typos, wrong selectors in your fiddle. For example, you wrote $("selected-promo") without a period (.), resulting in a by element type selection. $(".selectPromo").css({"display":"none"}); refers to the select element, whose class is actually select-promo, etc. Pay attention to how you name things, and be consistent with names, because this is the perfect recipe for such hard to find, yet trivial bugs. For example, you are mixing camelCase and kebab-case. Pick one and stick to it, and watch out for selector operators, such as . and #.
Your fiddle didn't contain the jQuery reference and its script execution needed to be set to onDomReady.
you're actually not even able to trigger anything when changing your selection in your dropdown. Change it to $("#selectPromo").on("change",function(){ //your code }
I used vanilla JavaScript to write what I think should accomplish what you're trying to do. I didn't see anything regarding styling in your code. I added a few id attributes in your HTML:
function init() {
var selectElement = document.getElementById('selectPromo');
document.getElementById('btnDelete').style.display = 'none';
selectElement.addEventListener('change', function() {
document.getElementById('selectedPromo').innerHTML = selectElement.options[this.value].text;
document.getElementById('inputField').style.display = 'none';
document.getElementById('add-layout').style.display = 'inline';
document.getElementById('btnDelete').style.display = 'inline';
});
document.getElementById('btnDelete').addEventListener('click', function() {
selectElement.value = '';
document.getElementById('inputField').style.display = 'inline';
document.getElementById('add-layout').style.display = 'none';
document.getElementById('selectedPromo').innerHTML = '';
});
}
init();
<div class="coupon-group">
<div class="left">
<div class="input-field" id="inputField">
<div class="title">Select promotion</div>
<div class="select-group">
<select class="select-promo" id="selectPromo">
<option value="">Please choose:</option>
<option value="1" data-name="OfferA">Offer A</option>
<option value="2" data-name="OfferB">Offer B</option>
<option value="3" data-name="OfferC">Offer C</option>
<option value="4" data-name="OfferD">Offer D</option>
</select>
</div>
</div>
</div>
<div class="right"></div>
</div>
<div class="selected-promo" id="selectedPromo"></div>
<div class="hidden-content" id="add-layout">
<div>
<span class="btn-delete" id="btnDelete">X</span>
<span class="name"></span>
<input type="hidden" name="coupon_type[]" value="">
<input type="hidden" name="coupon_value[]" value="">
</div>
</div>
Related
I am creating a form with a dropdown menu and would like to have their respective keywords appear for each one of the trips within that menu when clicked (preferably underneath the input field, as you can see in my code below).
.show is set to display:none
Keywords would be within the paragraph tags
HTML
<label for="tour-select">Choose a tour
<select name="tour" id="tour-select" required>
<option value="landmarks"></option>
<p class="landmarks show"></p>
<option value="hidden-gems"></option>
<p class="hidden-gems show"></p>
<option value="diana">The Diana (5h)</option>
<p class="diana show"></p>
</select>
</label>
I have tried the following in JS but with no success so far. I am not completely sure whether I am targeting the option value in the wrong way or whether it is an issue of how I have structured my code.
let tourInput = document.querySelector("select[name=tour]");
tourInput.addEventListener("click", e => {
if (e.target.value == "landmarks") {
tourInput.querySelector(".landmarks").classList.remove("show");
}
})
Looks like you're missing single quotes around to selector name. Change "select[name=tour]" to "select[name='tour']".
<div id="header_div">
<select id="store_name_select" name="store_name_select" onchange="checkEnable(this,'store_name')">
<option value="" selected="selected" disabled="disabled"></option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<p>
<input disabled="" id="store_name" name="store_name" type="text">
</p>
<div>
<div>
<select id="store_address_select" name="store_address_select" onchange="checkEnable(this,'store_address')">
<option value="" selected="selected" disabled="disabled"></option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
</div>
<p>
<input disabled="" id="store_address" name="store_address" type="text">
</p>
<select id="purchase_date_select" name="purchase_date_select" onchange="checkEnable(this,'purchase_date_month', 'purchase_date_day', 'purchase_date_year')">
<option value="" selected="selected" disabled="disabled"></option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<p>
<input disabled="" id="purchase_date_month" name="purchase_date_month" type="text"></span>
<input disabled="" id="purchase_date_day" name="purchase_date_day" type="text"></span>
<input disabled="" id="purchase_date_year" name="purchase_date_year" type="text">
</p>
</div>
Note 1: I do NOT own the site with this code so I can't change the page source code by editing it.
Note 2: I need a javascript (NOT JQuery)
Note 3: I'm accessing the website in question through Firefox or Waterfox web browser
I'm trying to make a greasemonkey (tampermonkey) script, which will do some things when browser access the web page.
The above code is just a small piece of page source code. I made it more simple so you can only see whats important for this issue.
As you can see, page has multiple 'select' (tags). Current 'state' (or value) is 'not picked'. For all 'select' tags I can select from drop menu 'yes' or 'no'. Once I select 'yes', it will 'unlock' the input fields that were previously 'disabled'.
Since most of the time the answer for 'select' is 'yes', I want to have a script which will automaticly select 'yes' for all 'selects' IDs, and 'unlock' (remove 'disable' state) for the 'inputs' that they are connected to. If I later need to switch from 'yes' to 'no' I'll do it manually.
I googled and searched before asking here, and although I did found some similar questions, NONE of the code worked, even if I tried to adopt it or change it to work for my case. I'm a newb so probably I missed something or coded it the wrong way, so please try not to criticize me too much. :)
For instance, I've tried this:
document.getElementsByTagName("select").selectedIndex = 1; //Option 'yes'
or
var test = document.querySelectorAll("#store_name_select, #store_address_select, #purchase_date_select");
for (var i = 0; i < test.options.length; i++) {
test.selectedIndex = 1;
}
^ that one also didn't work. At the top of that, (tampermonkey internal) script editor also warned me that 'i' is already defined. It's because I already used 'i' for other piece of code which does other things. Almost all the code that I can find ALL include 'i' letter. I wonder if I could use other letter for that line, eg.:
for (var b = 0; b < test.options.length; b++)
^ I did tried that line too but nothing has changed.
So, does anyone know how to get all 'select' IDs and force them to all select 'yes' (by value or by their 'index') and unlock input fields that are bound to them? Since this is a submit form, the owner needs to know that I selected 'yes' from drop menu. So the point is not only for the drop menu 'select' to unlock inputs, but to let the site owner 'know' that I actually did selected 'yes' before inputs removed their 'grayed out' cover.
THANK YOU in advance for your help!
If you need a 'test' page, here is the direct link to the page in question, so you can try your code and see if it really works:
amzon microworkers page
There isn't any selector to select multiple IDs at once. You have to write you code to get those elements.
Please see the getElementsById() function in this demo
The function accepts string of multiple ids separated by blank space and returns the corresponding elements for it.
I referred this answer
HTML
<label for="fld1">Module</label>
<span class="control"><select id="fld1" name="mod">
<option value="Account" selected>Account</option>
<option value="User">User</option>
</select></span>
<label for="fld2">Send me an alert</label>
<span class="control"><select id="fld2" name="alert">
<option value="1" data-params='{"mod":"Account"}'>when my balance...</option>
<option value="2" data-params='{"mod":"User"}'>when my login...</option>
</select></span>
So this is existing code that someone else worked on and is no longer a resource.
This little sample just changes the second select list based on the selected item in the first select list. This works just fine in FF and Chrome and after some digging I've been told that one can not hide options in a select list in IE.
I've also read up on this question here but still drawing up short on getting it working for IE. Can anyone advise? Thanks.
jsfiddle
remove instead of hide as shown in the linked post seems to work in IE. Another possible implementation is to empty the option list and add only the options in question:
var alertselect, modselect, orgalerts;
var showAlerts = function (module) {
alertselect.empty().append(
orgalerts.filter(function () {
return $(this).data('params').module === module;
}));
};
Of course for this to work, you have to store the original options:
orgalerts = alertselect.children();
Fiddle
I have a form with a dropdown menu followed by a text input field. The input box is disabled by default. Selecting a specified option from the menu should enable the text field.
I did some research and found many similar problems, however none of the solutions seem to be working. I tried a very simple code on jsfiddle to see if it's the solution itself that's the problem, or my code in particular.. My original code did not work, and neither did the simplified version. Here is the simplified code sample:
HTML:
<select id="menu" onChange="checkOption()">
<option value="A">Option A</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
<option value="D">Option D</option>
</select>
<input type="text" id="input" disabled>
JavaScript:
function checkOption() {
if(document.getElementById("menu").value != "A") {
document.getElementById("input").disable = 'false';
}
else {
document.getElementById("input").disable = 'true';
}
}
The text box remains disabled no matter what I click. I tried removing the default disable, and still no luck. I also tried various other solutions, however this was the most straightforward which is why I don't understand why it's not working.
It's probably something really obvious that I'm not seeing... I'm very very new at this, so if anyone would care to shed some light on my problem, I would be very grateful.
It's disabled not disable
document.getElementById("input").disabled = true;
You can also clean the code up by passing this into your handler and referencing that (also no need for the if, else - just disable based on a condition directly:
<select id="menu" onChange="checkOption(this)">
function checkOption(obj) {
var input = document.getElementById("input");
input.disabled = obj.value == "A";
}
Aaaaand a fiddle: http://jsfiddle.net/23EpC/
This is as clear as I know how to be with this issue. I've done what research I can on fixing it, and since it is someone else' work being modified it's hard to find what to do. I am nowhere near proficient enough to do this on my own. Sorry if it's not clear enough!
This theme is no longer supported even though it's pretty new my-horse.com.au. At the top of the page when you hover on the search icon a search area drops down and shows a search area with a few select boxes.
This is the basic on how the form is set up. #search-hover contains #search and #search contains the form. The only issue happens on the select boxes, not standard input boxes.
<div id="search-hover" style="height: 70px;">
<div id="search">
<form id="search-spots" action="http://my-horse.com.au" method="post">
<span id="finish-filter" class="responsive-only"><i class="icon-ok"></i> Finish Filtering</span>
<div class="large-4 columns" id="search-form-column-1">
<label class="sf_if_1222">Country</label>
<input type="hidden" name="has_changed_country" id="has_changed_country" value="false">
<div class="select-replace parent-1222 sf_if_1222 type-dropdown">
<select name="country" class="parent-1222 sf_if_1222 type-dropdown" onchange="jQuery('#has_changed_country').val('true'); jQuery('#search-spots').submit(); jQuery('#has_changed_country').val('false');" style="display: block; opacity: 0;">
<option value="">All</option>
<option value="587">Australia</option>
<option value="3270">New Zealand</option>
<option value="2471">United States</option>
<option value="1409">United Kingdom</option>
<option value="4103">France</option>
<option value="4291">Germany</option>
<option value="1291">Italy</option>
<option value="3322">Spain</option>
</select>
</form>
</div>
</div>
The issue only exists in IE (hahah) as far as I've seen. I've tried a few things using JS to fix the issue, but I'm not very good with it. What happens is when you click the select box and hover over anythin in the dropdown list, the whole search area slides back up.
This is some of the different scripts I've tried without any results yet.
onMouseEnter="document.getElementById('search-hover').style.height = '281px';
onMouseExit="document.getElementById('search-hover').style.height = '70px';
onMouseOver="document.getElementById('search-hover').style.height = '281px';
onMouseOut="document.getElementById('search-hover').style.height = '70px';
onFocus="document.getElementById('search-hover').style.height = '281px';
$("#search select").mouseenter(function () {
$('#search-hover').css({"height","281px"});
});
$("#search select").mouseleave(function () {
$('#search-hover').css({"height", "70px"});
});
and this is the jQuery that I think controls the search area
http://pastebin.com/m3J9DLNH
Can anyone help me with where I might be going wrong or point me in the right direction?
My idea is something like this -
onFocus = get.elementId('search select') then something that tells the CSS for #search-hover to set the height to 281px
something that will run through the whole site easy enough. From what I've read on different forums, IE leaves the 'div' area when it enters the drop down area in a form . I'm not really sure why but it is apparently something that happens a lot. I'm basing what I've found on this
IE select issue with hover
which I tried to figure out how to implement in to my form, but don't know how since I'm not any good with JS.
Thank you for any help you can give!
I believe there is already some code in the plugin to try and correct this issue.
Unfortunately, the code tries to detect IE and fails as the detection method is no more working with recent versions of IE.
Try and update the code navigator.userAgent.toLowerCase().indexOf("msie") != -1 in searchShowOnHover with navigator.userAgent.toLowerCase().indexOf("trident/") != -1.