I've been googling for about 2 hours to fix the following problem (other Stackoverflow Questions included):
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('input[type="radio"]').unbind('click.preset')
.bind('click.preset', function() {
doingStuffWith(jQuery(this).val());
});
});
</script>
<input type="radio" name="lightType" value="led" />
<input type="radio" name="lightType" value="tube" />
As you can see, I'm just trying to retrieve the current value of the radio button group "lightType" to work with it. This is working like a charm in Firefox / Safari / Chrome, but IE8 is giving me a hard time by just returning an empty string.
I've already tried several hacks from other questions like binding the change event to the radio buttons und forcing IE8 to fire it by blurring the clicked radio button etc. Maybe I'm
just suffering from blindness right now.
I'm working with the latest jQuery version and I've made sure that no other binded events interfere. Interestingly though, adding an alert() before retrieving the value and IE returns the current value:
....
// DOES WORK
alert();
alert(jQuery(this).val()); // alerts e.g. "tube"
// DOESN'T WORK
alert(jQuery(this).val()); // alerts ""
I thought it could be a timing problem, but trying to delay my single alert call with setTimeout didn't help.
Thanks in advance guys, I hope I'm just blind and didn't find another ugly behaviour in IE8.
I would use the latest jQuery and on() and the :checked selector in the callback:
jQuery(document).ready(function() {
jQuery('input[type="radio"]').on(function('change blur mousedown click') {
alert(jQuery('input[type="radio"]:checked').val());
});
});
Actually this is a little bit tricky, you can not fetch the selected radio button with "this" in the callback you have to use an other selector:
How can I know which radio button is selected via jQuery?
Thank you for your answers, but none worked. I'm not sure if this is a bug in jQuery or is just a problem I've hit in my particular case. It seems like jQuery is forcing IE8 to fire the change event before the field really changes.
I've finally solved it by binding to the blur event and combining it with powtacs :checked solution like this:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('input[type="radio"]').unbind('click.preset')
.bind('click.preset', function() {
jQuery(this).blur();
}
jQuery('input[type="radio"]').unbind('blur.preset')
.bind('blur.preset', function() {
doingStuffWith(jQuery('input[type="radio"]:checked').val());
});
});
</script>
A fair option for IE8 is creating a class (!) in each radio option and use it to selected the checked option. Semantically it is a little weird, but it worked perfectly to me:
HTML
<input type="radio" name="example" class="example_class" value="1"/>#1
<input type="radio" name="example" class="example_class" value="2"/>#2
<input type="radio" name="example" class="example_class" value="3"/>#3
JS
var exampleValue = $('.example_class:checked').val();
Related
I have a type="date" input that onchange fires some JS. My problem is that if you want to clear the date with the "cross button" on the right of the input tag, it will not fire the onchange event, unless you have previously changed the value. It seems really weird to me. My question: can I fire JS when my first action is clicking the "cross button" that delete the date?
I'm using Firefox 58.0.1
Edit: Now if working as expected (sept 2020, Firefox 80.0.1)
function myFunction(IdTag) {
var x = document.getElementById(IdTag).value;
alert('The new value is: '+x);
}
<input type="date" id="MyID" value="2018-02-06" onchange="myFunction('MyID');">
Worked for me.
I created an html file with this content:
<html>
<head></head>
<body>
<input type="date" id="MyID" value="2018-02-06" onchange="myFunction('MyID');">
<script>
function myFunction(IdTag) {
var x = document.getElementById(IdTag).value;
alert('The new value is: '+x);
}
</script>
</body>
</html>
And the event fired and also cleared the date (which was set to MM/DD/YYYY).
Make sure you're not seeing any errors in the Developer Tools.
I had this same issue as well (FF 64.0.1 on Linux) and I solved it by utilising the 'mousedown' event.
Essentially when the mousedown event triggers set up a timer that will manually trigger the onchange on your date input after a certain time, I found 500ms was sufficient for my use case.
I am using jQuery and got it to work, the process should be fairly similar for native JS:
$('input[name="start_date"]').on('mousedown',function() {
var $this = $(this);
setTimeout(function(){ $($this).trigger('change'); }, 500);
});
I had the same problem, and after some research i figured out that there is already a unconfirmed bug Report at Mozilla Bugtracker.
I am using jQuery and my solution was to call focus and blur after binding the even
$('#datefield').on('change', someFunction).focus().blur();
because the bug only appears if someone clicks on the reset button before giving the input the focus. By set and remove the focus to the input, the user does not recognize anything and the bug is bypassed.
I've been working on trying to trigger an onchange listener with java script in Mozilla Firefox. I've found a lot on Stack Overflow posted about this, but nothing seems to be working for my unique case.
I've created this HTML with a onchange listener from an onchange event using this helpful post (JavaScript OnChange Listener position in HTML markup). Here's my code:
<HTML>
<head>
<script type="text/javascript">
window.onload= function () {
if(window.addEventListener) {
document.getElementsByClassName('search-box')[0].addEventListener('change', loadXMLDoc, false);
} else if (window.attachEvent){
document.getElementsByClassName('search-box')[0].attachEvent("onchange", loadXMLDoc);
}
function loadXMLDoc(){
alert('It worked');
}
}
function addTextCallListener() {
var searchBox = document.getElementsByClassName("search-box")[0];
searchBox.value = "Hello";
}
</script>
</head>
<BODY>
<input type="text" class="search-box" placeholder="Player Search">
<br \>
<button type="button" onclick="addTextCallListener()">Click Me!</button>
</BODY>
</HTML>
I also saved it as this jsfiddle (for some reason I had to keep it all together for it to work, I couldn't break it up into js and html).
https://jsfiddle.net/josephfedor42/crogL0zd/1/
If you play with this jsfiddle you can see that entering text and pressing enter will trigger the listener and the pop up with the message “It worked” will appear.
But if the button “Click Me!” is pressed it only changes the value of the text box, and the onchange listener is not called.
I realize I could easily add an onchange event to this button. But I want to to trigger the listener by programatically/ superficially using javascript in my addTextCallListener() function.
I've tried the simple stuff, like calling
searchBox.onchange();
searchBox.focus();
searchBox.click();
And a combination of these to add and remove the focus. But it doesn't seem to work. I've found quite a few posts on triggering an onchange event, but nothing that works in Firefox.
Any help would be appreciated.
Thanks for that link of a possible duplicated question. I had checked out that link before.
But I gave it a try again. I saved the jsfiddle from them both and neither one work.
My implementation of Dorian's answer
https://jsfiddle.net/josephfedor42/zaakd3dj/
My implementation of Alsciende's answer
https://jsfiddle.net/josephfedor42/xhs6L6u2/
emphasize mine
According to the mdn page about the change event,
The change event is fired for <input>, <select>, and <textarea>
elements when a change to the element's value is committed by the
user.
and to whatwg specs :
When the input and change events apply (which is the case for all
input controls other than buttons and those with the type attribute in
the Hidden state), the events are fired to indicate that the user has
interacted with the control.
Therefore, setting the value of an input is not an action "committed by the user" nor a sign that "the user has interacted with the control", since it was made by the code.
So, even if the specifications for this event are kind of unclear, the event should not fire when you change its value by code.
Something like this should work:
function addTextCallListener() {
var searchBox = document.getElementsByClassName("search-box")[0];
searchBox.value = "Hello";
//fire the event
if (document.createEvent) {
searchBox.dispatchEvent('change');
} else {
searchBox.fireEvent("onchange");
}
}
Here is the code I needed to add to my function addTextCallListener:
var evObj = document.createEvent('HTMLEvents');
evObj.initEvent( 'change', true, true );
searchBox.dispatchEvent(evObj);
I updated the jsfiddle. The working code is here https://jsfiddle.net/josephfedor42/crogL0zd/7/
Replace onchange with change in this part:
document.getElementsByClassName('search-box')[0].attachEvent("onchange", loadXMLDoc);
It seems disabled button "onclick" function is still fired when triggering it programmaticaly, eg:
<div>
<input type="button" onclick="save()" id="saveButton" value="save" disabled="disabled" />
<input type="button" onclick="byPassDisabled()" value="bypass disabled button"/>
<div id="counter">0</div>
function save(){
var count = parseInt($('#counter').html());
$('#counter').html(++count);
}
function byPassDisabled(){
$('#saveButton').click();
}
see http://jsfiddle.net/WzEvs/363/
In my situation, keyboards shortcuts are bound to functions triggering the ".click()" on buttons. I'll find it very annoying to have to disable the shorcuts or check if the button is disabled myself. I'd prefer a general solution fixing this problem.
But why? This behavior doesn't seem fair to me.
Any workaround?
The attribute only disables user interaction, the button is still usable programmatically.
So yeah, you gotta check
function byPassDisabled(){
$('#saveButton:enabled').click();
}
Alternatively don't use inline handlers.
$(document).on('click', '#saveButton:enabled', function(){
// ...
});
For future use...the OP code works because jQuery will still call it's own handlers even if the DOM element is disabled. If one were to use vanilla javascript, the disabled attribute would be honored.
const element = document.getElementById('saveButton');
element.click() //this would not work
You can programmatically trigger click on a disabled button.
There are ways to find if the event is a click on button by user or it has been trigger programmatically. http://jsfiddle.net/WzEvs/373/
$(function () {
$("#saveButton").on('click', function (e) {
if (!e.isTrigger) {
var count = parseInt($('#counter').html());
$('#counter').html(++count);
}
});
$("#bypassButton").on('click', function (e) {
$("#saveButton").click();
});
});
e.isTrigger is true if you call the click() programmatically. Basically you are triggering the click event manually in code.
You can trigger click still although made it disable .As Spokey said it just shows the user-interaction(the usability still persists that can be turned on programmatically) .
off or unbind the click will solve this issue.
Thanks
The client wants a form in which entered numbers behave like Excel in certain ways. In particular, the data saved and the data displayed can be different, as it can in Excel. For example, the data saved could be 32425.537342 and the data displayed could be $32,425.54.
The approach we have taken to accomplish this is by using input pairs, one of type='text' and one of type='number'. The number input, which is by default hidden, stores the data to be sent and the text input displays it to the user. The number input is only displayed when the corresponding text input is focused, at which time such text input is hidden.
This following code behaves as expected in Chrome.
HTML:
<input type="text">
<input type="number">
<br>
<input type="text">
<input type="number">
jQuery:
$(document).ready(function(){
$("[type='number']").hide();
$("[type='text']").on("focus",function(){
$(this).next().show().focus();
$(this).hide();
});
$("[type='number']").on('blur',function(){
$(this).prev().show();
$(this).hide();
});
});
Fiddle. However, in Firefox (version 33.1.1) for Mac OS, the same is not working at all. When the text input is focused on, it disappears completely, without the number input ever being displayed.
In trying to ascertain where the problem is, I cut the code back to this:
$(document).ready(function(){
$("[type='number']").hide();
$("[type='text']").on("focus",function(){
$(this).next().show().focus();
$(this).hide();
});
});
Fiddle. This actually works as expected in both Chrome and Firefox; on focus, the text input is permanently hidden and the number input is permanently displayed.
So it seems that the issue is in the second half of the code. If you take out the $(this).hide();, the code behaves consistently in Chrome and Firefox (although not in a way that's particularly useful):
$(document).ready(function(){
$("[type='number']").hide();
$("[type='text']").on("focus",function(){
$(this).next().show().focus();
$(this).hide();
});
$("[type='number']").on('blur',function(){
$(this).prev().show();
/* $(this).hide(); */
});
});
Fiddle. Likewise, if you remove only $(this).prev().show();, it also behaves the same in Chrome and Firefox: everything ultimately ends up hidden.
$(document).ready(function(){
$("[type='number']").hide();
$("[type='text']").on("focus",function(){
$(this).next().show().focus();
$(this).hide();
});
$("[type='number']").on('blur',function(){
/* $(this).prev().show(); */
$(this).hide();
});
});
Fiddle. The divergence in behavior only occurs when both lines are in there; Chrome hides one input and shows the other, whereas Firefox causes everything to disappear as soon as you focus on the text input.
I thought this might be related to the Firefox focus/blur issue that makes it behave strangely in iframes (example), but taking it out of JSFiddle's iframes didn't have any effect. Fiddle in full screen here.
So how do I make the behavior in Firefox match the behavior in Chrome?
This answer provided JavaScript that did the trick, and using that I was able to put together the equivalent in jQuery:
$(document).ready(function(){
$('[type="number"]').hide();
$('[type="text"]').on('focus',function(){
$(this).next().show().focus();
$(this).hide();
});
$('[type="number"]').on('blur',function(){
var $this = $(this);
setTimeout(function() {
if(!$(document.activeElement).is($this)){
$($this).hide();
$($this).prev().show();
}
}, 0);
});
});
Fiddle.
To quote from that answer as to why this is necessary:
[T]he issue is that different browsers choose to call event
handlers in different orders. One solution is to give the other events
a chance to fire by setting a timer for 0 milliseconds, and then
checking the fields to see which (if any) is focused.
This question already has answers here:
jquery input select all on focus
(17 answers)
Closed 9 years ago.
Id like to select all text from input on focusing:
<input id="selectMe" value="123" />
<input type="button" id="focusHim" value="Im working fine" />
JS:
$('#selectMe').focus( function() {
$(this).select();
console.log('focus fired');
});
// little test if focus event works fine
$('#focusHim').click( function() {
$('#selectMe').focus();
});
This simplified code works fine, but sometimes there are some issues.
Here you have fiddle: http://jsfiddle.net/daxv2/
To see my problem, please click on input #selectMe, then click somewhere else and on #selectMe again. You will see, text is selected every even attempt. I don't know why.
P.S.
When you change focus to click it works perfect:
$('#selectMe').click( function() {
$(this).select();
console.log('focus fired');
});
So i suppose there is some problem with focus event.
It seems like the WebKit browsers interfere with this because of the mouseup event.
I added this and it seems to work fine:
$('#selectMe').mouseup(function () {
return false;
});
http://jsfiddle.net/daxv2/6/
You could use click event instead of focus. It works fine, also you can simplify your code by using this.select() instead of $(this).select()
http://jsfiddle.net/daxv2/8/