HTML Button behaving badly - javascript

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.

Related

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 vs. $.post how to isolate a button function vs. submission? [duplicate]

I just found out that every time onclick event for my <button> placed inside <form> tag triggers, form submits it's data as if i clicked <input type='submit'>.
I don't want that. Buttons inside my form serve other task, form shouldn't submit data after i clicked one of them.
To be more clear, i want this code:
<form action="http://www.google.com" method="POST">
<button onclick="alert('hi!')">Button</button>
<br>
<input type="submit" value="submit"/>
</form>
to show alert "hi!" when i click on the Button and it shouldn't open Google after that. It should only show Google when i press "submit".
Specify type="button":
<button type="button" onclick="alert('hi!')">Button</button>
From the linked article:
This [submit] is the default if the attribute is not specified
Try this..
onclick="alert('hi!'); return false;"
With jQuery use a span rather than an input, put use the .button call and then set a click event.

How to turn off form validation in Angular when clicking by button that shoulden't send form

I have a form like this one:
<form name="myForm">
<input id="myName" ng-model="myName" required/>
...
<button ng-click="doSomePrepare()">Do some prepare</button>
...
<button ng-click="saveForm()" ng-disabled="myForm.$invalid">Save</button>
</form>
I want validate form only when "Save" button clicked.
But if I'm click "Do some prepare", browser(chrome) ask me to fill "myName" input.
It's make me problems, cause in real world "Do some prepare" button may be a datepicker button or a dropdown or somethig like that.
P.S. I'm use Angular 1.2 version, but as far as I know this can be reprodused with version 1.0
JSfiddle: http://jsfiddle.net/se_panfilov/wQF4S/4/
Make your first button a non-form-submitting button:
<button type="button" ng-click="doSomePrepare()">Do some prepare</button>
You can test it here
The default type attribute of a button tag is submit. Try setting the type to reset or to button to prevent the submit event from firing when you click it.
Working demo: http://jsfiddle.net/wQF4S/3/

How does Javascript form.submit() method works?

I want to scrap a website that changes content after modifying a <select> that has an attribute onchange="this.form.submit()". So I need to know how form.submit() works so I can simulate it.
All it does is submit the parent form as would normally happen if you clicked a <input type="submit" /> button.

Why is <input type="button"> submitting a form?

<form name="callEventForm" method="post" action="/PDC/callevent.do">
...
<input type="button" value="Save" name="addCallEvent" id="addCallEvent" onclick="alert('You clicked me!')"/>
...
</form>
When clicking this "Save" button, the form is submitted instead of displaying the alert. I was lead to believe that type="button" would cause the form to not submit on click.
Change:
onclick="alert('You clicked me!')"
To:
onclick="alert('You clicked me!');return false;"
I hate to answer my own questions but this was a weird one. There was an ajax:updateField tag that was overriding the onclick event of the button. Changing the source event of the ajax:updateField allowed my established onclick event to fire appropriately. I know that there's no way anyone would have caught that based on the code I posted, but the rest of the page is so much code that I would hate to make people wade through it.

Categories