Develop Reference

Submit button fires twice

I have the following submit:
<input type="submit" id="buttonNext" name="buttoncrd" value="Prosegui" class="buttonNavProsegui block-ui"/>
When you are on the page, i want to active the submit with the keyboard button "Entry" so i made this simple js code:
$(document).ready(function() {
$(document).keypress(function(event){
if (event.which == 13){
$("#buttonNext").click();
}
});
});
It works correctly but i met some problem when i have the focus on the submit AND i press Enter on the keyboard. I fear that the submit fires twice, can you help me disable one submit when is focused?

You can use
$(document).ready(function() {
$(document).keypress(function(event){
if (event.which == 13){
$("#buttonNext").click();
event.preventDefault();
}
});
});
It will not trigger twice.

$("#buttonNext").addEventListener('keypress', e => {
e.stopPropagation()
})
might do the trick. It prevents the event from propagating up in the hierarchy when a keypress event happens on the button.

window.onbeforeunload allow submit button?

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.

How to stop page reload on button click jquery

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;
});

Cancel a $('form').submit() call in jQuery

I'm in trouble when I use form submit event in jQuery.
Markups
<form>
<input type="text" name="username" />
<a id="btn_submit">Submit</a>
<input type="submit" />
</form>
Event listener
function valid() { return false; }
$('form').submit(function() {
if(!valid()) {
return false;
}
});
Then, when I click that <input type="submit" /> it do trigger that event, and can cancel the submit event.
But when I trigger the form submit on the .btn_submit tag, return false cannot cancel the submit.
Failure of cancel
$('#btn_submit').click(function() {
$('form').submit();
// $('form').trigger('submit');
// document.forms[0].submit();
});
So, now the question is, if I must use an a.btn_submit to trigger the submit of form, and I want to cancel that submit in case.
How should I trigger?
How should I cancel?
Please help!
I made a fiddle http://jsfiddle.net/69wcduv5/2/.
But it seemed cannot submit in jsfiddle.
My final solution (a bit dirty)
I can create a submit input inside the form, then trigger a click on it. Then remove it.
If I trigger the submit in this way, I acts exactly the same as I expected:
The validation code inside the $('form').submit(function() {}); don't have to change.
If the form has something like <input type="text" required />, it can do well.
I can style well on that anchor. Not the f**king <input type="submit" />
Thank you all for your patient, best regards.
And hoping for a clean better solution.

$("a.btn_submit").click(function(){
if($('form').valid())
{
$('form').submit();
}
});

$('form').submit(function(event) {
if(!valid()) {
event.preventDefault();
}
});

Seems weird to use a link to submit a form, but your problem is you are not cancelling the click action on the anchor.
$('.btn_submit').on("click", function(evt) {
evt.preventDefault();
$('form').submit();
});

I understand now what you are trying to achieve, so please ignore what I wrote before.
formElement.submit() and its jQuery equivalent very deliberately do not trigger an onsumbit event. Othwise there is the potential for infinite recursion.
Therefore, you cannot execute $('form').submit(); and hope for an onsubmit handler to intercept.
Your best bet is probably your "dirty" idea. Namely to trigger a click on a (hidden) type="submit" button.

Call the submit in this way, the most close to my intention:
$.fn.natural_submit = function() {
if($(this).is('form')) {
var $form = $(this);
var $input_submit = $('<input type="submit" />').hide().appendTo($form);
$input_submit.trigger('click');
$input_submit.remove();
}
}
$('#btn_submit').click(function() {
$('form').natural_submit();
});

jQuery Disable Button function on second click

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);
});