I made a search tag interface, so I need to put my found tags like option in select. Then I wait user click (bubble up) on option and add this tag to groups of tags which will send to server. Why doesn't it work in FF? I know workaround solution to use the mousedown event instead of the click event, but I want to understand the logic, maybe it's a bug and I need to report it to the FF developers. By the way, everything works well when I add a few options, I think it is somehow related to the fact that by default 1 option is always select = true.
Codepen sandbox
document.querySelector("#b").addEventListener("click", function() {
console.log(1);
});
<select name="a" id="b">
<option value="one">one</option>
</select>
Related
On a product page, a customer can select from different variants. In a "select" element, all the variants are stored. This element is hidden with display none. So, users can select variants using all fancy things like swatches and other fun stuff but under the hood its just a "select" element which keeps track of which variant is being used. Its value is variant id.
I am attaching an image to be more clear on what's going on.
Goal: Get the variant id on change of variant.
Problem: I am unable to detect the change event on this select element.
Limitations: I am not allowed to touch the HTML of this code. I can only append a javascript file at run time on this page in <head> tag and I need to detect the change event in that script.
$(document).ready(function(){
$('body').on('change', "select[name='id']", function(){
console.log('here');
});
});
I can get its value just fine with below code at any time I want.
console.log($("select[name='id']").val());
Any ideas that why change event won't be detected?
As per the jQuery documentation change() is not fired when val() is set programmatically
Note: Changing the value of an input element using JavaScript, using .val() for example, won't fire the event.
You need to do it manually when you set val()
$("select[name='id']").val(354).trigger('change');
Edit[0]: After your comments on what you were trying to do I took a quick look at the js.
I found that the template fires a custom event variantChange
$("#ProductSection--product-template").on("variantChange", function(evt){alert($("select[name='id']").val());});
Good Luck;
Since the goal was to get the current value of variant id, here is how I got to that.
Getting the value is not a problem, so when page loads, store the initial value in localStorage then listen to change event on form. Thankfully, change event is triggering on Form element.
$('body').on('change', 'form[action^="/cart/add"]', function () {
console.log($('select[name="id"]').val());
});
Compare the value with previous value and see if its changed. If yes, then do my thing. If not, wait for another change event on form. Yeah, I hope it will work for the long run.
Thank you all !!
I think that should know what triggers this, I mean if change when you change the select of the sizes then inside this you get the value that you need, for example:
$(document).on("change","#select1",function(){
var valuneed = $("#select2").val();
console.log(valuneed);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1">
<option value="11">size a</option>
<option value="21">size b</option>
</select>
<select id="select2">
<option value="21">value a</option>
<option value="22">value b</option>
</select>
And if the update of the second select takes a seconds (is the usual) then you just add a settimeout
If there is more than just on trigger, then you:
$(document).on("change","#select1, #selector2, #selector3",function(){
Let me know if this is what you need.
I have created a select element drop down list in HTML. The select tag has three options. An "onclick" JS event is attached to the select tag. In JavaScript, I have a matching function that alerts the user if and only if the first option has been selected. Here is a JSFiddle with my code.
https://jsfiddle.net/TempusF/rad11vgx/12/
The problem I am having is that, on Firefox for mac, this alert will only be displayed if you first select a different option. That is to say, if the page loads and "Zone 1" is displayed, clicking Zone 1 a second time will not trigger the alert. You must click to Zone 2 or Zone 3, and then click back to Zone 1 to get the alert.
However, on Firefox for Windows, any click on the Zone 1 option will display the alert.
This leads me to believe that I am incorrectly using the onclick event when a different event is more idiomatic. Perhaps the expectation is that I have a button below the select element that triggers the alert function, thus deferring execution. However, I would like to create an interface that reacts immediately when a select option has been chosen.
Here is the HTML:
<select id="zoneSelect" onclick="updateChar();">
<option value="zone1">Zone 1</option>
<option value="zone2">Zone 2</option>
<option value="zone3">Zone 3</option>
</select>
Here is the ecmascript.
function updateChar() {
var zone = document.getElementById("zoneSelect");
if (zone.value == "zone1"){
alert("You clicked Zone 1.");
}
}
You shouldn’t use onclick in modern html, but you might try the following:
onchange="updateChar();"
Better still, you should set the event handler in the startup code. In any case, it’s still the change event.
Also, I recommend that a drop-down menu begin with a harmless null value, so that you don’t default to the first value — unless, of course, that is the intention:
<option value="">Choose one …</option>
Edit
Apropos by comment that you shouldn’t use inline event handlers in modern JavaScript, here is how you would do it today:
In HTML:
<select id="zoneSelect">
<!-- options-->
</select>
In JavaScript:
document.addEventListener("DOMContentLoaded",init);
function init() {
document.querySelector('select#zoneSelect').addEventListener('click')=updateChar;
}
Better still, if the select element is part of a form, then it should have a name attribute, and you wouldn’t need an id attribute. In JavaScript, you can refer to it as:
document.querySelector('select[name="…"]')
and ditto for any CSS you might apply.
So far i have created a simple select tag (which work) which change an image when the option is changed (which mean I have to click to make the change and thus to change the picture):
<form method="post" action="">
<select name="selectImageName3" id="selectImage3" onchange="change3()" >
<option value="opt1">Image1</option>
<option value="opt2">Image2</option>
<option value="opt3">Image3</option>
</select>
</form>
However I want that my image changes when the mouse pass on the option and according to the option. This means that when the mouse pass on an option (no click) then:
- the associated option value has to be recorded (to be used on my js function change3)
- the function change3() has to be activated.
I assume this is done generally using onmouseover but as I have understand it don t work for select tag.
Is anyone know/have a way to handle this? For instance is select2 will solve the problem? I don't specially focus on html, javascript, css or jquery is fine to me as long as i can handle my issue.
Thank you
You can use jQuery to do this. You add mouseover function to the select tag e.g.
$(document).ready(
function (event) {
$('select').mouseover(function(e) {
var target = $(e.target);
//do something with the target
});
});
where $(target).val() gives the value of the option you hovered on.
Summary: I am trying to force a change event to fire on an HTML element, without actually changing it, but the event does not seem to fire.
My scenario: There is a page (created by someone else) that is designed to hide certain fields until a value from a certain dropdown is selected, at which time the dependent fields will appear. But in some scenarios, the dropdown should be autopopulated and fields should appear by default. So I am trying to trick the page into showing the dependent fields when it is first loaded. I do something like this:
form.field('THEDROPDOWNFIELD').$el.trigger('change');
But nothing happens. I found that
form.field(‘THEDROPDOWNFIELD’).setValue(form.field('THEDROPDOWNFIELD').$el[0][1].value); //dummy value, first value in the list
form.field('THEDROPDOWNFIELD').$el.trigger('change');
will fire the change event. For whatever reason, $el.trigger('change') does not trigger the change unless the DOM element's value truly has changed. The problem is I don't want the dummy value in that dropdown to be there.
Summary (again): Is there a way to force the dropdown's element change event to fire when the selected value in the dropdown has not actually changed?
This snippet works ok (uses JQuery):
$('#toChange').bind('change', function() {
$('#result').text('select changed');
})
$('#triggerChange').bind('click', function() {
$('#toChange').trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="toChange">
<option>---</option>
<option>First</option>
<option>Second</option>
<option>Third</option>
</select>
</form>
<br>
<button id="triggerChange">Click to trigger change</button>
<div id="result"></div>
Your code doesn't seem to be failing, so it must be something related to the DOM or the way the other guy has implemented this effect. It is hard to guess what your problem might be. So my suggestion is as follows:
Check if its really implemented to trigger on radiobutton change and not on a click event handler on a div/other element that's not directly related to the radio button.
Check if your HTML code is failing.
Provide more code snippets that you think might be related.
I have the following HTML containing a drop down list (single selection)
<script type="text/javascript">
$(document).ready(function () {
$("#garden").bind('change', function() {
alert("Changed");
});
});
</script>
<body>
<div id="content">
<select id="garden">
<option value="flowers">Flowers</option>
<option value="shrubs">Shrubs</option>
<option value="trees">Trees</option>
<option value="bushes">Bushes</option>
</select>
</div>
</body>
</html>
When the HTML page is rendered, Flowers is the already selected element in the drop-down by default (being the first one). If I select any other value (other than "Flowers"), the Javascript function is fired and a alert box containing "Changed" is shown.
Q1: But, in case I re-select Flowers again, the onchange event is not triggered. I understand it is because nothing was 'changed' in the drop-down list. Is there a way a function is triggered even when no change to the already selected value in drop-down is done?
Q2: How to extract the value of the element which has just been selected (even if nothing new was selected - that is, user clicked on the drop down, and simply clicked somewhere else).
I have already tried the onblur but that requires that the user clicks somewhere else on the document so that the drop-down loses focus. Any help would be really appreciated.
[I have edited out the HTML headers and other script inclusions in the code snippet provided for brevity.]
Well I think I don't get you 100%, but some things I can suggest here are:
bind a click event handler to the select
$("#garden").bind('click', function() {
alert($(this).find('option:selected').text());
});
bind a focusout event handler
$("#garden").bind('focusout', function() {
alert($(this).find('option:selected').text());
});
and of course bind the change event handler which you already got. The click event handler might be a little bit tricky since it would fire every time you click on the element. But if you don't alert() it every time it should not be a problem at all, you got the current selection and can do with it whatever you want.
You can manually trigger the event when you load the page:
$(document).ready(function() {
$("#garden").bind("change", function() {
// ...
}).change();
});
This will pick up the initial value - so I think it makes your second question irrelevant. This won't work in all situations (I'm hoping that your actual handler isn't an alert but actually something useful!), but could come in handy...
Are you sure that whatever you are doing is the most sensible way to do things? It seems like very strange UI to have different behaviour if you select an item by leaving it as the default compared to selecting it by opening up the select and selecting the currently selected item.
If you are wanting to make them explicitly choose flowers then maybe you want a dummy entry at the top that says "Please choose one" that will then mean they are forced to actually change to flowers if that is what they want. It would probably be simpler than complicating your code with more event handlers and such like.
If you do really need to go down the path you are following then you may want to consider what the behaviour is if somebody just tabs to the control and then past it. ie should that fire your script off as well?
Edit to respond to comment at length:
What you will want to do in this case is hook into the onSubmit handler of the form. This is called, as you can imagine, when the form submits. If your handler returns false that form will not be submitted.
This handler is traditionally where you would do client side validation by examining the state of whatever form elements you care about and checking their values are valid. In this case you'd check if the value of garden was "N/A" or whatever you set it to and if so pop up an alert (in the simplest case) and possibly mark whichever fields need attention. Then the user will choose a valid entry (hopefully) and next time he submits your validation will succeed, you return true in the handler and the user can be happy he submitted valid input.
As always though the standard disclaimer that any data can be sent to your server by a determined user so you should not assume that just becasue you had this validation that you are getting valid data on the server. :)
Question 1: I think the event for that would be "onSelect".
Question 2: I think the "onSelect" event would work for that as well, not 100% sure. Something to try at least and mess with.
To my opinion, the easiest solution is to duplicate the first option into a disabled and hidden element having the same label. Your dropdown list will display the label of the hidden option, but thus won't be displayed in the list.
<select id="garden" name="blabla" onchange="this.form.submit();" >
<option value="" disabled selected style="display:none;">Flowers</option>
<option value="flowers" >Flowers</option>
<option value="shrubs" >Schrubs</option>
<option value="trees" >Trees</option>
<option value="bushes" >Bushes</option>
</select>
Your question seems same as HTML SELECT - Trigger JavaScript ONCHANGE event even when the option is not changed
and the solution mentionned above was provided by Simon Aronsson.
Nota bene : the solution works perfectly with Firefox, but not with Internet Explorer.