We Keep Coding

Disable Jquery submit button once submitted

I would like to disable the submit button once the form has been submitted. That means the submit button should not be clickable after the user click submit. That means I want the submit button to remain disable even after refresh
; (function ($) {
$.fn.tpFormDialogCustom = function (method) {
var self = this;
var dialogButtons = [
{
text: "Submit and Email",
id: "tpFormDialog_btnSubmit",
click: submitandmailTpFormDialog
},
function submitandmailTpFormDialog() {
if(CheckValidate()) {
commonDialogs.showError(ExampleMessages.JournalError);
} else {
commonDialogs.showConfirm(ExampleMessages.ConfirmEmail, function() {
try {
commonDialogs.showProgress(ExampleMessages.SubmitAndEmail);
var o = getOptions();
var form = $(o.form);
form.ajaxSubmit({
success: handleEmailResponse,
beforeSerialize: function($form, options) {
if(!$("#SubmitBtn", $form).length) {
$('select.required', $form).prop('disabled', false);
$form.append("<input id='SubmitBtn' type='hidden' name='From' value='Submit' />");
}
}
});
} catch(e) {
commonDialogs.showError();
}
});
}
}
function handleEmailResponse(data) {
$('#tpFormDialog_btnSubmit').prop("disabled", true);
commonDialogs.hideProgress();
var o = getOptions();
if (data.IsSuccess) {
commonDialogs.showAck(ExampleMessages.ConfirmSendEmail);
closeTpFormDialog();
o.table.refresh();
} else {
var errors = data.ResponseModel;
if (typeof (errors) === 'string') {
commonDialogs.showError(errors);
} else {
helpForValidation.showErrors(errors);
}
}
};

You can disable your submit button by adding disable property to submit button.
$('input:submit').click(function(){
console.log("Form is submiting.....");
$('input:submit').attr("disabled", true);
});
Demo : https://jsfiddle.net/Prakash_Thete/6qqgszs4/

You should do it on ajax success so in case of error the user can re submit the form.
In your case it would be inside the handleEmailResponse function.
function handleMailResponse(){
$('#btnSubmitId').prop("disabled", true);
/* the rest of your code */
}

I want to destroy session on browser tab close

I want to destroy the session on tab close using jquery and java script.
In this I am able to track the keyboard event like F5 or ctrl+r. But I am facing issues in tracking browser back, forward, refresh and tab close buttons.I know that on all the above mention button, same function is called that is window.onbeforeunload.
Here is my code..
function endSession() {
console.log(validNavigation);
alert("You are about to close your page and session");
$.ajax({
type: "POST",
url: base_url+"destroy-session",
beforeSend : function(){
console.log('hjkl');
},
success: function(response){
console.log(response);
},
error: function(response){
console.log(response);
}
});
}
function wireUpEvents() {
window.onbeforeunload = function() {
if (validNavigation == false) {
endSession();
}
}
//window.onbeforeunload=goodbye
// Attach the event keypress to exclude the F5 refresh
$(document).bind('keypress keydown keyup', function(e) {
if(e.keyCode === 116 || e.keyCode==8 || e.keyCode==13) {
validNavigation = true;
}
if(e.ctrlKey && e.keyCode==82) {
validNavigation = true;
}
if(e.ctrlKey && e.keyCode==76) {
validNavigation = true;
}
});
// Attach the event click for all links in the page
$("a").bind("click", function() {
validNavigation = true;
});
// Attach the event submit for all forms in the page
$("form").bind("submit", function() {
validNavigation = true;
});
$("input[type=button]").bind("click", function () {
validNavigation = true;
});
// Attach the event click for all inputs in the page
$("input[type=submit]").bind("click", function() {
validNavigation = true;
});
}
// Wire up the events as soon as the DOM tree is ready
$(document).ready(function() {
wireUpEvents();
});

JQuery: Unbind click event not working as expected

I'm having a problem with the unbind event from jquery.
I load a modal after clicking a button and in this modal I have two possibilities, continue or cancel. If I continue there are some validations and if something goes wrong an alert should appear, or if I click cancel I close the modal. But if i cancel the modal and then I click the button that loads the modal with an ajax call again when clicking continue the alert appears 2 times, when it should appear only once. I've tried using the unbind event as is seen in the code but it doesn't seem to work, any ideas?
The ajax call is done by the followinenter code hereg code:
function ValidacionGeneral() {
var frmObs = $("#frmCreate");
$.ajax({
url: '#Url.Action("ValidacionGeneral", "Viajes")',
type: 'POST',
dataType: "text",
data: frmObs.serialize(),
success: function (data) {
if (data == "OK") {
$('#frmCreate').submit();
}
else {
$.unblockUI();
$.modal(data);
}
}
});
}
And the script of the modal is:
<script type="text/javascript">
$(document).ready(function () {
$("#btnAceptarValidacionGeneral").unbind("click");
$("#btnAceptarValidacionGeneral").live("click", function (e) {
e.preventDefault();
var error1 = false;
var error2 = false;
var error3 = false;
var error4 = false;
if ($('#ddlMotivosDistancia').length) {
error1 = $("#ddlMotivosDistancia").val() == '00000000-0000-0000-0000-000000000000';
}
if ($('#ddlMotivosRendimiento').length) {
error2 = $("#ddlMotivosRendimiento").val() == '00000000-0000-0000-0000-000000000000';
}
if ($('#ddlMotivosCarga').length) {
error3 = $("#ddlMotivosCarga").val() == '00000000-0000-0000-0000-000000000000';
}
if ($('#ddlMotivosDuracion').length) {
error4 = $("#ddlMotivosDuracion").val() == '00000000-0000-0000-0000-000000000000';
}
if (error1 || error2 || error3 || error4) {
alert('Debe seleccionar los motivos de tolerancia correspondientes para las alertas');
} else {
var form = $('#frmCreate');
if (form.html() == null) {
form = $('#frmEdit');
}
form.submit();
}
});
$("#btnCancelarValidacionGenral").live("click", function () {
$("#IdMotivoToleranciaDistancia").val('00000000-0000-0000-0000-000000000000');
$("#IdMotivoToleranciaRendimiento").val('00000000-0000-0000-0000-000000000000');
$("#IdMotivoToleranciaCarga").val('00000000-0000-0000-0000-000000000000');
$("#IdMotivoToleranciaDuracion").val('00000000-0000-0000-0000-000000000000');
});
});

Use off("click") to unbind all click events:
$("#frmCreate").off("click")
Further, if it's a one-time thing use $.one to bind it in the first place:
$("#frmCreate").one("click", function(){/*do this once and once only */});
HTH

Your unbind $("#btnAceptarValidacionGeneral").unbind("click"); is executed once only when DOM is ready, I think you must move it to function ValidacionGeneral()

After seaching I found that to unbind events attached with .live() the proper way is using .die()
Here is the documentation: http://api.jquery.com/die/
It solved my problem.

JavaScript Pop up problme before navigating away from a page

The code below call the "Click Save!" pop up if there were changes to input fields and someone attempts to navigate away from the page without clicking the submit button to save.
Can someone tell me how to make a small change to this that will call the "Click Save!" pop up for ANY attempt to navigate away from the page even if no changes were made to any of the input fields (but of course still no popup if they click the submit button)?
var warnMessage = "Click Save!";
$(document).ready(function() {
$('input:not(:button,:submit),textarea,select,text').change(function () {
window.onbeforeunload = function () {
if (warnMessage != null) return warnMessage; }});
$('input:submit').click(function(e) {
warnMessage = null;
});
});

var warnMessage = false;
window.onbeforeunload = function (event) {
if (!warnMessage) {
return;
}
else {
return "You have unsaved changes on this page. If you wish to save these changes, stay on the current page.";
}
}
$(document).ready(function () {
$('input:not(:button,:submit),textarea,select,text').change(function (event) {
warnMessage = true;
});
$('input:submit').click(function () {
warnMessage = false;
});
});

Add form.submit event to make sure that post occurs before form gets submitted?

I have a form. I want to add an event handler using jquery.
$("form").submit(function blah() {
$.post('ping-me-please.php', params, function (response) {
// only submit the form once this goes through!
});
}
How can I make this happen?

Like this:
$("form").submit(function (e) {
var form = $(this);
if (!form.data('pinged')) {
e.preventDefault(); // Cancel the submit
$.post('ping-me-please.php', params, function (response) {
// only submit the form once this goes through!
// First we set the data, then we trigger the submit again.
form.data('pinged', true).submit();
});
}
}

var postWasSent = false;
$("form").submit(function blah() {
if (!postWasSent)
{
$.post('ping-me-please.php', params, function (response) {
postWasSent=True;
$("form").submit();
});
return false;
}
}