So far this code has worked well in Chrome, Firefox, and Safari, however during testing in IE, the onclick event is not firing in any version of IE. We've tested IE7—IE11.
The purpose of this code is to populate data selected from a drop-down into a text input box after clicking the "Update" button.
Here is a snippet:
HTML
<input type="button" value="Update" onclick="javascript:updateText();">
jQuery
<script>
function updateText() {
//** Removes first option of select **//
$("option#ddlOptionsSelect.ng-binding").remove();
//** Populates option selected from dropdown into a text input field **//
document.getElementById("ctl00_cphMainContent_ucDialCustomization_Duc18264_StringTextBox").value =
$('#Dial_18269 #ddlOptions').val();
document.getElementById("ctl00_cphMainContent_ucDialCustomization_Duc18265_StringTextBox").value =
$('#Dial_18459 #ddlOptions').val();
document.getElementById("ctl00_cphMainContent_ucDialCustomization_Duc18266_StringTextBox").value =
$('#Dial_18456 #ddlOptions').val();
document.getElementById("ctl00_cphMainContent_ucDialCustomization_Duc18267_StringTextBox").value =
$('#Dial_18457 #ddlOptions').val();
document.getElementById("ctl00_cphMainContent_ucDialCustomization_Duc18268_StringTextBox").value =
$('#Dial_18460 #ddlOptions').val();
}
</script>
Any suggestions would be helpful as to why this script is not working in Internet Explorer but works in every other browser.
In addition to giving the input an id and attaching and onClick to it using jQuery, you can also simply change the onclick property of you input to onclick="updateText();"
Use JQuery for the event listener:
$("#<id>").on("click", function(){
updateText();
});
You just need to ad an Id to the button.
<input type="button" value="Update" id="<id>">
ex.jsfiddle
Related
I'm working on old website system and i'm having problems debugging this beheavior and i don't know why it happens (this is legacy code so i can't make any changes, just some patches)
EDIT: This system works on IE8 but now they are changing the browsers and it need to work on modern browsers or at least on chromium
I have a checkbox that is checked on the load of the page. if i click on it, it will fire the onclick() event and inside it has a click()[2] event again.
Chrome:
If i click on the checkbox (box) it doesnt let you uncheck it, because the click()[2] event it's fired and check it again
but if i click on de label "TEST Check" it let you change it to unchecked, because the click()[2] event is not fired, it skip it
Why only works on the label?
Internet explorer 8:
On IE, always skip the click()[2] so it works like i have pressed the label con Chrome
And yes, this code is horrible, but i just wonder why the label skip the click() event
Try it here: https://codepen.io/spuncko/pen/LYBavzx
<!DOCTYPE html>
<html>
<body>
<label>
<input type="checkbox" name="CHK_NH_30" id="CHK_NH_30" onClick="changeHidden(this.checked, document.getElementById('HD_CHECK')); pressClick();" /> TEST Check
<input type="hidden" name="HD_CHECK" id="HD_CHECK" value="N"/>
</label>
</body>
<script>
pressClick();
function changeHidden(checked, hdobj){
if (checked){
hdobj.value = "Y";
}else{
hdobj.value = "N";
}
}
function pressClick(){
console.log("pressClick function");
if (document.getElementById("HD_CHECK").value == "N") {
document.getElementById("CHK_NH_30").disabled = false;
document.getElementById("CHK_NH_30").click(); //click[2]
}
}
</script>
</html>
I expected that the label would have fired the click() event too and not skip it
So box and label would work the same (even if is not as IE8, but at least is consistent)
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
I have a very strange issue with jQuery where I am triggering a click on a radio button but it is not firing completely and is not being captured by an on click function, however a similar call to jQuery trigger is being captured.
In the following jQuery I am selecting a <div> and using find to search for the suitable content.
var prev_chosen_d_option = $('#d_options_table .d_option_row[data-option-id="' + d_option_for_jq + '"]');
// this works, and the on click is captured
prev_chosen_d_option.find('.hover_target').trigger("click", true);
// this selects the radio button, but DOES NOT fire the on click function seen below
prev_chosen_d_option.find('#d_standard_use_b_as_s_no').trigger("click", true);
These are my radio buttons:
<input type="radio" value="yes" id="d_standard_use_b_as_s_yes" name="d_standard_use_b_as_s">
<input type="radio" value="no" id="d_standard_use_b_as_s_no" name="d_standard_use_b_as_s">
$("#d_options_table .d_option_row .hover_target").on("click", function(e, isFirstLoad) {
// it comes in here fine!
});
$('input[name=d_standard_use_b_as_s], input[name=d_next_day_use_b_as_s], #del_standard_use_b_as_s_no').on("click", function(e, isFirstLoad) {
// it DOESN'T come in here
});
I can't see how jQuery is able to select the radio button and successfully check it, but the on method doesn't pick it up as a click...especially when I have a very similar setup running in close proximity in the code.
I know for sure that the radio buttons are within the selector as I can dump it out to the console with a console.log. Interestingly, when I dump out the events attached to it to the console I get undefined from this after the trigger:
console.log(prev_chosen_d_option.find("#_standard_use_b_as_s_no").data('events'));
(I am using jQuery 1.7.2 and testing in FF).
Instead of
$('input[name=del_standard_use_b_as_s], input[name=del_next_day_use_b_as_s], #del_standard_use_b_as_s_no').on('click', function(e) {
//
});
Try :
$(document).on('click', 'input[name=del_standard_use_b_as_s], input[name=del_next_day_use_b_as_s], #del_standard_use_b_as_s_no', function(e) {
//
});
The reason for this not working was simply I had the click handler below where I was actually triggering the click in the code.
I wish to fire a Onchange event for all the changes of Form elements within a DIV
Here's the snippet
<html>
<body>
<div id="container">
<input type="checkbox"/>
<input type="checkbox"/>
<input type="text"/>
<input type="text"/>
</div>
<script>
di = document.getElementById("container");
di.onchange = function(a){
alert("On Change Called");
}
di.onclick = function(a){
alert("On Click Called");
}
</script>
</body>
</html>
The event is fired, when a focus is lost from any of the form elements to a new element of the form, when some content is updated (eg: the input box is updated)
The above code works fine for all browsers' but not for IE, any way to do this is IE
Actually, IE, especially IE7/8 doesn't support onchange event very well . I do recommend you use onclick event.
onchange event does not bubble in IE according to MSDN.
Avoid using .focus() or .select() before .change() function of jquery for IE, then it works fine, im using it in my site.
Thanks
I had the same problem in Edge and fixed it using an EventListener.
My code looked like this:
HTML:
<input type="text" id="my_id" name="my_name" placeholder="my_placeholder" onchange="my_function(this.value.trim())" autofocus>
Then I changed it to:
HTML:
<input type="text" id="my_id" name="my_name" placeholder="my_placeholder" autofocus>
JS:
document.getElementById("my_id").addEventListener("change", function() {
my_function(this.value.trim())
});
Mostly all web developer must have faced this issue..
yeh the older version of IE sometimes not firing the onChange event and replacing it with onClick works.
But this is not expected with latest IE 11. what I found in my case was the function name being called on onChange event was clashing somewhere. I just changed it to some other name which should sound like unique in the whole context, then it worked.
Conclusion: IE 11 getting confused when finds some similar names
within the system matching with the onchange target function (even
the file names I guess), while the other browsers are intelligent
enough.
I created this code to trigger the onchange event not triggered by Interenet Explorer.
Used with an asp.net textbox
<!-- LOCAL SCRIPT -->
<script type="text/javascript">
$(document).ready(function () {
// CTRL - fix explorer bug for OnChange not triggered. Converted to OnBlur + test
if (navigator.appName == 'Microsoft Internet Explorer')
{
var tempControl = $("#<%= textboxNAME.ClientID %>");
var tempATTRIBUTE = "data-lastvalue";
// GET - save current value inside attribute
tempControl.attr(tempATTRIBUTE, tempControl.val());
// BIND - onblur event
$("#<%= textboxNAME.ClientID %>").blur(function () {
var tempPrevValue = tempControl.attr(tempATTRIBUTE);
// CTRL - is there a difference of value (onchange)
if (tempControl.val() != tempPrevValue) {
// SET - trigger change js binded to textbox
$(this).change();
}
});
}
});
Actually Onchange does not work very well in IE. Here is what I did while using Javascript. You can replicate it accordingly.
Add ondrop event in HTML to call the function being called now, instead of onchange.
Add the following code in your js file
document.getElementById('--your selector--').ondragover = handle;
function handle(evt)
{
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy'
}
The ondragover will be made false by above code, and then ondrop will fire on all browsers and call the required function