onchange hijacks onclick - javascript

Modifying the text and then clicking on the button triggers only the onchange code
But I need to know whether the button has been clicked:
<input type="text" onchange="alert('change')" value="Text">
<input type="button" onclick="alert('click')" value="Button">
What do I need to change to get the click handler?

That works fine, it's alert() that sucks.
I don't know the exact details around it, but I've noticed in the past that alert() can mess with DOM events in strange ways when those events would occur together.
<input type="text" onchange="console.log('change')" value="Text">
<input type="button" onclick="console.log('click')" value="Button">​
See here: http://jsfiddle.net/25EsQ/
(Make sure to bring up the JS console so you can see the output)
The good news is this is a debugging issue only (hopefully) and when you use real and useful JS code instead, it should work as you expect.

The alert comes up between the onmousedown and the onmouseup events, causing an onclick to never trigger

Related

How to programatically fire input event using raw javascript?

I can't find a solution for this in anywhere. Can someone help me ?
<input type="text" id="myText" oninput="alert(this.value);"><br><br>
<div onclick="document.getElementById('myText').value='123';NowCauseTheEvent,Plz !">
change
</div>
Basically I need to know how to programatically raise the event input after I change the value programatically as well. (something to place on the "NowCauseTheEvent,Plz" after the document.getElementById('myText').value='123'
ty !
BTW, this is not about custom event, but native event and I will REALLY appreciate to stop to vote for close this one because THIS IS NOT A CUSTOM EVENT !!!!
This will work across browsers and trigger the event you require.
<div onclick="document.getElementById('myText').value='123';document.getElementById('myText').oninput()">
change
</div>
Use the following in your placeholder:
document.getElementById('myText').oninput()
This works for me on Firefox and Chrome but fails on IE11.
<input type="text" id="myText" oninput="alert(this.value);"><br><br>
<div onclick="document.getElementById('myText').value='123'; document.getElementById('myText').dispatchEvent(new Event('input'));">
change
</div>

jquery .focus(func) doing process several times

EDIT:
Thanks to Puneet who created this fiddle: http://jsfiddle.net/G3vSK/
It seems that it doesn't work on Chrome Version 28
On Firefox (v22) the alert comes once, but you can't enter anything in the boxes
Another problem I can't solve:
This is my Javsacript-Code:
function updateFieldsetStyleAdjustment(){
alert("update");
$('fieldset').not('[data-style=\'none\']').find('input, select, textarea, button') //find input-fields
.focus(function(){
alert("active: "+$(this).attr('id'));
});
}
This function should add an onfocus-Handler to some input-fields on my site.
Whenever I focus an field to insert a value, it should be called.
My problem is that, when I focus an input-field, the function is called several times. The number of calls/alerts varies from 3 to 16 or more per focus-Event.
However, my field never looses focus.
I apply the onfocus-event 2 times (The "update"-alert appears twice), but this is normal.
(I don't add 16 onfocus-event listeners to the input-fields).
Anyone knows what I'm doing wrong?
EDIT:
Here's the HTML-snipped:
<fieldset id="fs_1" data-style="data" d class="">
<legend>General Information</legend>
<div class="lineWrapper inputTooltip" data-tooltippos="left">
<label for="fs_1_form51f37d255fb35_name">Name</label>
<span class="inputWrapper">
<input type="text" id="fs_1_form51f37d255fb35_name" name="name" autofocus="" maxlength="40" tabindex="50">
</span>
</div>
<div class="lineWrapper inputTooltip" data-tooltippos="left">
<label for="fs_1_form51f37d255fb35_ansprechperson">Ansprechperson</label>
<span class="inputWrapper">
<input type="text" id="fs_1_form51f37d255fb35_ansprechperson" name="ansprechperson" maxlength="40" tabindex="51">
</span>
</div>
<!-- ...more Wrappers with input-fields... -->
</fieldset>
<!-- ...more fieldsets... -->
How I call it:
1.) $(document).ready(function() { updateFieldsetStyleAdjustment(); });
2.) After every Ajax-Request I call it again (the input-fields are loaded via Ajax)
unbind:
When I put $(this).unbind('focus'); inside my focus-eventhandler, it is triggered only once. But when I focus the same field again, it doesn't work anymore (as expected).
When I put $('*').unbind('focus'); on the beginning of my updateFieldsetStyleAdjustment()-Function, it doesn't change anything.
The alert() was the bug.
Realised that everything was working fine without the alert(). And the event was also only triggered once.
The alert always unfocused the input-field, and so a new alert was created.
I hate it, when my debugging-code is the only bug in the program.
I think your problem lies here.
After every Ajax-Request I call it again (the input-fields are loaded via Ajax).
Try binding focus with only the new fieldset generated after ajax calls (try using jQuery.on() function). Alternatively try
$('fieldset').not('[data-style=\'none\']').find('input, select, textarea, button').unbind('focus');
//unbind focus from previously binded dom elements.
and then call
updateFieldsetStyleAdjustment

IE10 find first button on page and trigger click event on input submit

sorry about title, i know its messy but i dont know how can i describe this situation.
we have an input field. but no form element. here is the code
<input name="search" id="search" onkeypress="SearchBox(this.value);" type="text" value="Search"/>
<input name="searchbutton" align="left" class="okbutton" id="searchbutton" onclick="SearchBox(search.value);" type="button"/>
SearchBox function checking keycode and if it is 13 (enter button charcode) sending search request. this code works in IE8/9 but in IE10 have interesting behaviour.
above code middle of the page. and we have a button element top of the page for LOGIN.
in IE10;
i enter a word in input and press enter:
SearchBox function work,
but behave like LOGIN button is clicked also and its a problem
note:sorry about language, english is not my native language.
note 2: SearchBox() function removed. check the jsfiddle link for the latest code.
another solution
define your buttons type as button. because default type is submit
<button type="button" ....
Well, IE10 for Windows7 is a pre-release, and this seems to be one of the things MS should fix. Anyway, I don't know why this happens, but I've found a workaround for the problem:
Instead of button, use <input type="button">.
Live demo at jsFiddle.
I was having the same problem. Adding type="button" to all my buttons worked.
<button type="button">...
Even though my buttons are not in a form.
From other testing I've done IE 10 works exactly like Chrome. This is the only exception I've seen.

Cannot enable XHTML submit input/button which is disabled by default

I have this simple button in XHTML:
<input type="submit" name="submit" value="Test" disabled="disabled" onmouseover="this.disabled=''" />
The problem is, no matter what I try, when I hover over the button, it won't re-enable from the disabled attribute it has. In XHTML, you are required to use disabled="disabled" which seems to completely break the option to enable/disable it with JavaScript. I've tried running this.disabled='', this.disabled=false, and even this.removeAttribute('disabled') but nothing seems to be capable of re-enabling the button. Weird thing is, if I remove the ='disabled' part of the attribute (making it invalid XHTML), the script enables the button just fine. Is this not possible without using invalid XHTML?
Note: I'd really prefer to only use JavaScript for this specific example, not jQuery.
I thought this would be something simple that would take like 5 seconds but apparently not.
Disabled elements for some reason do not seem to fire mouseover/out events along with click.
The following is not the best solution in the world, but you can wrap it in another element and use the wrapping element's mouseover event to enable it.
<div style="display:inline-block;padding:1px;" onmouseover="document.getElementById('submit').disabled=false">
<input type="submit" id="submit" name="submit" value="Test" disabled="disabled" />
</div>
disabled=false is correct.
The problem is that a disabled element doesn't receive events. See the question Javascript OnMouseOver and Out disable/re-enable item problem.

JavaScript removeChild(this) from input[type="submit"] onclick breaks future use of form.submit() under Firefox

I have come across some strange behaviour, and I'm assuming a bug in Firefox, when removing a input submit element from the DOM from within the click event.
The following code reproduces the issue:
<form name="test_form">
<input type="submit" value="remove me" onclick="this.parentNode.removeChild(this);" />
<input type="submit" value="submit normally" />
<input type="button" value="submit via js" onclick="document.test_form.submit();" />
</form>
To reproduce:
Click "remove me"
Click "submit via js". Note that the form does not get submitted, this is the problem.
Click "submit normally". Note that the form still gets submitted normally.
It appears that, under Firefox, if you remove a submit button from within the click event it puts the form in an invalid state so that any future calls to form.submit() are simply ignored. But it is a JavaScript-specific issue as normal submit buttons within this form still function fine.
To be honest, this is such a simple example of this issue that I was expecting the internet to be awash with other people experiencing it, but so far searching has yealded nothing useful.
Has anyone else experienced this and if so, did you get to the bottom of it?
Seems to be related to the fact that you're removing the node while processing the event.
This indeed looks like a bug from Firefox.
In the meanwhile, this hack seems to work but delaying the removal:
<script type="text/javascript">
function delsubmit(el) {
window.setTimeout(function() {
el.parentNode.removeChild(el);
}, 50);
return false;
}
</script>
<input type="submit" value="remove me" onclick="return delsubmit(this)" />

Categories