I have an html page with buttons and such, to which I assign event listeners. Whenever one of the buttons is clicked, the page goes back to its original state, as if the browser had been closed and opened again. So if I have text fields into which I've inputted some info, they will be cleared as soon as a button is clicked, even if its event listener does nothing.
Likewise, if I include this event listener into the html, <body onload="pageLoaded();">, the pageLoaded() function will be called whenever a button is clicked.
Why is this happening, and how can I prevent it from happening?
Presumably you are using submit buttons, which will submit the form they are in unless you cancel the default action.
eventObject.preventDefault();
See the documentation.
Maybe your click event listener was added to a link or a button within a form. If so, you may add return false a the end of the listener to prevent the default behaviour being executed.
var link = $("#mybutton");
link.click(function() {
alert("clicked");
return false;
});
Setting the button type to "button" will resolve this issue. The default type is "submit" which as the others have said will submit the form.
<button type="button">Button</button>
Related
<button type="button">Click Me!</button>
<script>
document.getElementsByTagName('button')[0].addEventListener('click', function(e {
e.preventDefault();
alert('hello1');
}, false);
</script>
I am trying to understand e.preventDefault();, I know If this method is called, the default action of the event will not be triggered. So my question is:
For above codes, it seems e.preventDefault(); does not do anything here. so what is the default action of above event:getElementsByTagName('button')[0].click?
The default action of an element in HTML is defined in the HTML5 specification. The interactive content section describes how to respond to interaction, including what to do when an activation (click) event is and is not cancelled, and the individual interactive elements (listed at the top of the section) have defined activation behaviours. The activation behaviour for <button> says (emphasis added):
When a button element is not disabled, its activation behavior element is to run the steps defined in the following list for the current state of the element's type attribute:
Submit Button
If the element has a form owner, the element must submit the form owner from the button element.
Reset Button
If the element has a form owner, the element must reset the form owner.
Button
Do nothing.
e.preventDefault() prevent the event from traveling up further. For example, in the above code if you have a onclick handler on the element, then without e.preventDefault() the element's onclick handler will be called. The button's onclick event will be always fired because you can't stop something that has already happened, but you can stop events that has yet to happen --- in this case the body's onclick event.
I have an application that uses backbone.js and jQuery for UI. I have a form on a page, attached to the form's text box blur event is a function that under certain conditions shows the user a popup and awaits it's input - the conditions are checked using an ajax call to a WCF service.
Everything works fine until i click the form's submit button while the focus is set on the text field - then the popup is displayed but behind it the form is submitted.
Of course the proper result would be cancelling the second event(if the popup is displayed the form definitely cannot be submitted)
How can I achieve this?
i can'T understand you but probably this is what you need: event.stopPropagation();
http://api.jquery.com/event.stopPropagation/
Or .off()
http://api.jquery.com/off/
You can bind to the submit event of the <form> and call its preventDefault() method to inhibit submission if the popup is visible:
$("form").submit(function(e) {
if ($("selector_matching_your_popup").is(":visible")) {
e.preventDefault(); // Cancel submission.
}
});
You can also return false from the handler instead of calling preventDefault(), but this will also stop the propagation of the submit event to ancestor elements, which you may not want.
Are you saying that the clicking of 'submit' is causing the popup to display - and this is not one of the 'certain conditions' where it should be displayed? I would consider adding a condition to the blur handler that checks to see if the submit button was clicked. Dont display the popup in this case.
Cancel the event in the onSubmit handler -
form.addEventListener("submit", function(evt){
evt.cancel()
//dont want to catch it again
form.removeEventListener(this)
popup.show()
//have the popup call submit when done, it wont be caught again
}
I have a form with two buttons, one input[type=submit] and one plain button which is the cancel button.
I have two event handlers, one bound to the form on submit and one bound to the button on click.
When I submit the form by pressing enter in an input the click event on the button fires (and before the submit event I might add), why is this?
This happens in both gecko and webkit.
Here's a working example:
http://jsfiddle.net/q3JPR/
If you submit by pressing enter I want the submit event to trigger, not the click event.
If you change your button to be <input type="button"... then your events will behave properly... here is the fiddle:
Working Fiddle
I also found this solution. If you set the type attribute to "button" <button type="button">My Button</button> it won't submit. I think not specifying the type by default sets it to submit. So you don't have to change the element to input.
Source: Add regular button inside form that does not perform a submit
I've attached a 'click' event to a 'button' element (type=submit) so that clicking on the latter element copies data from one field (input type=text) to another. However, the copy is only temporary and reverts to blank or default values.
Affecting Firefox/Opera/Chrome
When the submit button is clicked, it also submits the form, which causes a page refresh.
You'll have to return false from your click event handler:
$('#theSubmitButton').click(function(){
// code to copy values goes here
return false;
});
Change the button input to type="button" instead of type="submit" if the button doesn't need to submit anything to the server (which by the looks of your question, it doesn't).
type="submit" will run the form's action/postback and cause a refresh.
I'm making an edit button which pops up a modal box with a form to edit it. jQuery then sends this form to my server and I get a JSON response back. However, due to my bubbling issue, if I click on, for example, all of the edit buttons and then click on the last one and change a field, it does it across all of them.
$('.edit').click(function(event){
//more code...
modal_submit(the_id);
event.stopPropagation();
});
and then the submit event:
function modal_submit(the_id){
$('#modal form').submit(function(){
//This will alert every time I have EVER clicked on an edit button
alert(the_id);
return false;
});
}
finally all of this is inside of a getScript:
$.getScript('js/edit.js',function(){
create_edit_btn();
});
I've only used this 1 other time, and it worked, but I also had to do this.event.stopPropagation, but if I do "this" now it says this.event is undefined, but like I said, this exact code worked before for another script I did.
Does anyone have any ideas? :\
EDIT:
the html is:
<li>
<input id="item1" type="checkbox" value="webhosting|15" title="Web Hosting">
<p>Hosting for your web site</p>
</li>
An event can have multiple event listeners. Each time you use $(element).submit(whateverFunction) you are adding another whateverFunction to the submit event. If you only want only the last listener to be the action that is taken upon envoking the event, try doing this:
function modal_submit(the_id){
$('#modal form').unbind(); // this will remove all other event listeners from this element
$('#modal form').submit(function(){
//This will alert every time I have EVER clicked on an edit button
alert(the_id);
return false;
});
I think you event.stoppropagation does its job already. It stopped all the bubbling on the click event of the button (ie, if you try checking the document body, it won't have mouse click event anymore). The reason why codes within submit of the form is still executed, is because this is called by the button's default action.
Together with event.stoppropagation(), I suggest you include this:
event.preventDefault();
So that the default action will not used and only the codes within your handler is executed.
Is this in the function that creates edit buttons?
$('.edit').click(function(event){
//more code...
modal_submit(the_id);
event.stopPropagation();
});
If it this, then it will add this handler multiple times to the same elements, causing a flurry of alerts. Use live, which will place the handler on every matched element, even if is is added later in execution.