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.
Related
Whilst going through the W3 schools website I was trying to see what it meant when it said <button type="button" but I wasn't entirely sure. Could someone please explain to me what this means.
A <button> tag can either be a plain <button> (when its type is "button") or a submit button (when its type is "submit", the default).
A "submit" button causes its surrounding <form> to be submitted; a plain button doesn't.
Oh, and a <button> can also be a "reset" button if you want.
So basically:
<button> is like <input type="submit">;
<button type="button"> is just a simple button that either triggers an event handler or does nothing;
<button type="reset"> is like <input type="reset">
(other than the content differences between <button> and <input> of course)
In some old versions of IE I think the default type was "button", so if you want to make sure things work it's a good idea to specify explicitly the sort of button you want in all cases.
I have an input button, which when it is disabled, and someone tries to click it, needs to display an alert.
How is it possible to display a javascript message despite being disabled?
Tried this with no luck:
<input type="submit" onclick="alert('click')" value="Disabled Input Button" disabled/>
Use onmousedown instead of onclick, which is only fired when it is 'allowed' to. Some browsers, particularly Chrome, appear to disable all DOM events when a form element is disabled. While I think this is out of spec, you can use the following workaround:
Instead of using the disabled attribute, use CSS pointer-events to achieve a similar effect, illustrated here:
button.disabled {
pointer-events:none;
}
And then just use <button class="disabled"> instead of <button disabled>.
<span onclick="alert('This input is disabled')">
<input type="submit" value="Disabled Input Button" disabled/>
</span>
Wrapping it with another tag that has the on click function works.
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.
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
I added a button that is supposed to open a calendar 'date-picker'. The button is in a form that is rendered inside an EXTJS TabPanel. When the button is clicked, it causes the EXTJS tab panel to reload. Even if I remove everything but the following (making it a dumb button) the page still reloads.
<button id="calendar-trigger">...</button>
Edited: derived from: http://www.dynarch.com/projects/calendar/doc/
<input type="text" id="id_activity_date" name="activity_date">
<input type="button" value="..." id="calendar-trigger">
<script type="text/javascript">
new Calendar({
trigger : "calendar-trigger",
inputField : "id_activity_date",
onSelect : function() { this.hide() }
});
</script>
I don't want the reload to happen and I can't figure out why the reload is happening. or how to stop it. Something is getting triggered beyond just the button click. I suspect that EXTJS is causing it, but I can't figure out why.
I would like to start by killing all code that is triggered by this button. I want to make this a dumb button that doesn't do anything when clicked.
What is likely going on here? and How can I fix it?
Try this instead:
<input type="button" id="calendar-trigger" value="Button Label">
I've had trouble with <button> tags trying to submit forms and what not when they should not. Using an <input> tag with a type of "button" seemed to help me - maybe it will work for you as well.
If you have a <button> tag on a form which does not have a submit button (<input type="submit">), the <button> becomes the input button by default, apparently.
In HTML, <button> has a type attribute. The default value for type is submit, meaning that unless you specify type="button" (or something else), the button will trigger the submission of the form it is associated with. That is probably what is causing your page to reload (because the form is being submitted).
Alternatively, you could use <input type="button" id="calendar-trigger" />.
I would recommend using <input> as opposed to <button>
<input type="button" value="Click Me" id="calendar-trigger" />
Typically the <input type="submit" /> will make a submit button when in a form, I suspect that is what the <button> tag is doing.