I am using this below code for button click event using jQuery. When button is clicked the page reloads.
$('#button1').click(function () {
//Code goes here
return false;
});
If your "button" is a button element, make sure you explicity set the type attribute, otherwise the WebForm will treat it as submit by default.
<button id="button1" type="button">Go</button>
If it's an input element, do so with jQuery with the following:
$('#button1').click(function(e){
e.preventDefault();
// Code goes here
});
Read more: event.preventDefault()
You can use event.preventDefault() to prevent the default event (click) from occurring.
$('#button1').click(function(e) {
// prevent click action
e.preventDefault();
// your code here
return false;
});
Related
Trying to make popup window with form in it. When clicking submit, page is refreshing. How can I prevent it? My e.preventDefault is not working
modalsubmit.addEventListener('submit', function(e) {
e.preventDefault();
modal.classList.toggle('overlay_opened');
profilettl.textContent = modalname.value;
profdesc.textContent = modaldesc.value;
});
I assume you've added the submit event listener to the button and not the form. Check this out and it should work.
const modalsubmit = document.querySelector('form');
modalsubmit.addEventListener('submit', function(e) {
e.preventDefault();
});
<form>
<button type="submit">submit</button>
</form>
Use the e.stopPropagation() to interrupt the default behavior
https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
I have the following javascript to show a confirm box when a user leaves the page.
My problem is, it is showing even when user clicks the submit button inside a form in my page. I don't want this to be triggered on form submit and on a span click.
How can I allow form submit and span click in the function below?
window.onbeforeunload = function (e) {
e = e || window.event;
return '';
};
EDIT-------------------------------
sorry, it is now a form, it is simple button and a href:
I have one page that uses only a button:
<input type="button" value="Save" id="btn-crop" />
and a link:
<a href="done.php" class=button2>Save</a>
You could call [Event].stopPropagation in an callback of submit event for each button in the page.
This function would stop the callback function of the beforeunload event when would go submit the button.
You can read more about the [Event].stopPropagation
here.
Like so: Button.addEventListener("submit",function(Event){Event.stopPropagation()})
You should be able to check what object dispatched the event using e.currentTarget property and then show the prompt if necessary.
I want to prevent users from clicking on a server button multiple times causing multiple similar requests to be sent to the server.
Buttons are ASP.Net buttons (Webforms). There are many pages on the website and I don't want to write some codes for every button. I want to do it on the Masterpage for all buttons.
A possible solution would be finding the button and disabling it after it has been clicked. like:
$("input[type='submit']").click(function(){
$(this).attr('disabled','disabled');
});
This code works fine but overrides the previous onclick event of the button. So the button doesn't do the submission or any other tasks that it wants to do.
Another solution is disabling all submit buttons on "onbeforesubmit" event. They will be enabled right after the postback. This is also not a good solution because there are some buttons that update part of the page by Ajax and they can not re-enable other buttons beyond the ajax panel after the postback.
Is there a way to find the clicked submit button and disable it and allow it to do it's onclick event?
I found the answer. Because I use asp.net server buttons, Page won't be submitted if I disable the button in client side onclick event. Instead I disable the button in the second click. In this case I can be sure that page has been submitted one time:
$("input[type='submit']").click(function (e) {
if (e.target && Page_IsValid) {
var attr = $(this).attr('submitting');
if (typeof attr !== 'undefined' && attr !== false) { // If button has submitting attribute then do not submit it again.
$(this).prop('disabled', true);
$(this).removeAttr("submitting");
e.preventDefault();
}
else {
$(this).attr("submitting", "true"); // Add "submitting" attribute to prevent multiple submissions.
}
}
});
Try to use .one():
Attach a handler to an event for the elements. The handler is executed
at most once per element per event type.
$("input[type='submit']").one('click',function(){
$(this).prop('disabled',true);
});
Also, you should use .prop() instead of .attr() to set the state of your input
Or what about this?
$("body").on("click", ".js-submit-button", function() {
var $this = $(this);
$this.prop("disabled", true);
$this.closest("form").submit();
});
I'm trying to prevent users from clicking the button on the page twice, so what I've been doing is hiding that button with jQuery after it's been clicked once. But is there a way instead of hiding that button to disable with jQuery that button after it was clicked once?
I've tried
$(document).ready(function () {
$('#onClickHideButton').click(function () {
$(this).prop('disabled', true);
});
});
but the problem that I'm having with this function is that as soon as the button is clicked it it becomes disabled before it get the chance to submit the form, so the form never gets submitted.
Why not disable the button when the form is submitted, since that's what you actually want to do...
$('#myForm').on('submit', function () {
$('#myButton').prop('disabled', true);
});
Instead of using a submit button, just use a simple button and send manually the form submit.
<input type="button" id="onClickHideButton" value="Submit"/>
$('#onClickHideButton').click(function () {
$(this).prop('disabled', true);
$('#myform').submit();
});
or you could disable the button when the form is submitted
$('#myform').on('submit', function(e) {
$('#onClickHideButton').prop('disabled',true);
});
I have a stupid simple Jquery .js file I'm busy creating and I'm getting stuck on the first step.
I currently have it setup as shown below and yet every time I click the only button on the page (submit button for a login page), it reloads the entire page and runs the first function again.
How do i get the function to only run once
$(document).ready(function() {
//
// FUNCTIONS
//
function AllFade() {
//Hide everything
$('div').hide()
//Fade Everything in
$('div').fadeIn(1000);
//Hide All Alerts
$('.alert').hide();
}
function LoginCheck() {
//Check username and pass
}
// EVENTS
//START SEQUENCE
AllFade();
//Login check on submit
$('.btn').click(function() {
LoginCheck();
})
});
!! EDIT !!
The button's coding is this exactly:
<button class="btn btn-large btn-primary">Sign in</button>
Would that still cause a reload?
You need to prevent the submit (event) of the form with .preventDefault() so it will not do the default behaviour: submit the form and reload the page.
$('.btn.btn-large.btn-primary').click(function(event) {
//if only button on page you can have just $('button')
event.preventDefault()
LoginCheck();
})
You can also add type="button" if you do not want to use the button as a submit button, because the button element has a default type of submit:
<button type="button" class="btn btn-large btn-primary">Sign in</button>
You can read more here:
jQuery docs: .preventDefaul()
Add an event in there and use .preventDefault()to prevent the page from reloading.
$('.btn').click(function(e) {
e.preventDefault();
LoginCheck();
});