jQuery FormSubmit and Input focusout
Test input focusout and form submit.
by litespeedtdf
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.css">
<form id="jForm" action="" method="post" target="_blank">
<label>Description:</label>
<input type="text" id="descInput">
<button id="saveDesc" type="submit">Save</button>
</br>
</br>
<input type="text" id="desc" readonly value='Testing'>
<div id="dialogMessage" title="Duplicate Description">
<p id="desc">
Duplicate Description please try enter a new one.
</p>
</div>
<input type="text" id="macroIDjjj" value='macroID Test'>
</form>
CSS
.no-close .ui-dialog-titlebar-close {
display: none;
}
JavaScript
$(function() {
$('#saveDesc').attr('disabled', 'disabled');
$("#dialogMessage").dialog({
dialogClass: "no-close",
autoOpen: false,
closeOnEscape: false,
resizable: false,
modal: true,
buttons: {
Ok: function() {
$(this).dialog("close");
}
}
});
$('#jForm').on('submit', function(eventObject) {
isDuplicate().then(function(returnValue) {
if (returnValue.Status === true) {
$('#dialogMessage').dialog('open');
//('In form submit event. Duplicate Description please try enter a new one.' + returnValue.Status);
eventObject.preventDefault();
}
});
});
$('#descInput').on('focusout', function(eventObject) {
isDuplicate().then(function(returnValue) {
if (returnValue.Status === true) {
$('#dialogMessage').dialog('open');
//alert('Duplicate Description please try enter a new one.' + returnValue.Status);
eventObject.preventDefault();
}
});
});
$('#descInput').on('focusin', function(eventObject) {
$('#saveDesc').attr('disabled', 'disabled');
});
function isDuplicate() {
// return true if a duplicate.
// return false if isn't a duplicate.
var deferredObject = $.Deferred();
var returnValue = false;
if ($('#descInput').val()) {
if ($('#descInput').val().toLowerCase() === $('#desc').val().toLowerCase()) {
//returnValue = true;
$('#saveDesc').attr('disabled', 'disabled');
deferredObject.resolve({
Status: true
});
} else {
$('#saveDesc').removeAttr('disabled');
deferredObject.resolve({
Status: returnValue
});
}
} else {
$('#saveDesc').attr('disabled', 'disabled');
deferredObject.resolve({
Status: false
});
}
return deferredObject.promise();
}
});