We Keep Coding

What does button type="button" mean in JavaScript

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.

OnClick Event on a disabled input

I need to have an onclick event on an <input> tag which is disabled.
Here onclick event doesn't work.
Is there any other way to work with onclick event for disabled input based on id?
I tried the code below.
First input worked but I need worked same as second one also same as of first one. (I need to call function Clicked on input only).
My code:
function Clicked(event)
{
alert(event.id)
}
function ClickedDisabled(event)
{
alert(event.ids)
}
<input type="text" id="ID" onclick="Clicked(this)" />
<input type="text" id="IDs" onclick="ClickedDisabled(this)" disabled />

function Clicked(event) {
alert(event.id)
}
function ClickedDisabled(event) {
alert(event.id)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="text" id="ID" onclick="Clicked(this)" />
<span style="position:relative;">
<input type="text" id="IDs" disabled />
<div style="position:absolute; left:0; right:0; top:0; bottom:0; cursor: pointer;" id="IDs" onclick="ClickedDisabled(this)"></div>
</span>
Try this it may help you

Put
input[disabled] {pointer-events:none}
in your CSS (it prevents some browsers from discarding clicks on disabled inputs altogether), and capture the click on a parent element. It's a cleaner solution, IMHO, than putting a transparent overlay over the element to capture the click, and depending on circumstances may also be much easier than simply "simulating" the disabled state using CSS (since that won't prevent the input from being submitted, and also requires overriding the default browser 'disabled' style).
If you have multiple such buttons, you'll need a unique parent for each, in order to be able to distinguish which button was clicked, because with pointer-events:none, the click target is the button's parent rather than the button itself. (Or you could test the click coordinates, I suppose...).
If you need to support older browsers, though, do check which ones support pointer-events: http://caniuse.com/#search=pointer-events

Esc key acts like reset button in html

I am having two text boxes with a reset and a submit button. The reset button is working fine. But when i enter something in those two text boxes and press esc, the values gets disappeared. Event acts like a reset button. I am not sure how to control it. Much appreciate your help... Thanks...
<input type="text" name="" /> <input type="text" name="" />
<input type="button" value="Search" /> <input type="reset" value="Reset" />

It's working fine in all browsers http://jsfiddle.net/xgTxK/2/
$(document).keydown(function (e) {
if(e.keyCode==27){
e.preventDefault();
}
});
add above script in your code to prevent default functionality

I'm not sure if this is consistent across all browsers, but I've noticed esc button will typically reset the text typed in a text input, but only while still focused within the text input. Or to put another way, esc will reset the text if the onchange event hasn't occured yet.
And I would assume to prevent this would need to use JavaScript to capture the key events within the input and prevent the default behavior.

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.

HTML Button behaving badly

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.