I am using the Presaveaction() to perform pre-new/edit form validation. Once all fields have been validated successfully I would like to offer my users the ability to 'Save and Exit' or 'Save and Continue'.
I am presenting this option to them using the SP.UI.ModalDialog.showModalDialog() method as I would like a better UX than using a native js 'prompt' function (as used here: How to include a 'yes' and 'no' button on the PreSaveAction() on the EditForm.aspx to return true/false accordingly?).
My validation works fine, as does the display of my modal dialog, but the presaveaction() function is completing (and creating/saving the list item) before I have a chance to press either button.
How can I make the presaveaction() function wait for my dialog response?
My code snippet is shown below:
if ($inBranchEventOK === false || $injOccOK === false){ //checks field values
return false //returns false to prevent save
} else {
displayCompleteRequest() //calls confirmation modal popup
//other stuff here
return true
};//end if
function displayCompleteRequest(){
//function openDialog()
var $confmsgtext = "<p>You have entered all the information required for this stage.</p><p>Do you with to progress to the STAGE NAME stage?</p><p> Click 'Continue' to progress to the STAGE NAME stage or 'Save and Close' if you intend to update this information further</p><button type ='button' onclick='updateStatus()'>Continue</button><button type ='button' onclick='closeDialog()'>Save and Close</button>"; //formats dialog content
$("#compreqcontent").append($confmsgtext); // appends to DOM
var dialogTitle = "Do you wish to complete this stage?";
var options = SP.UI.$create_DialogOptions();
options.title = dialogTitle;
options.width = 1000;
options.showClose = false;
//options.height = 250;
//options.autosize = true;
options.html = createDialogElement();
options.dialogReturnValueCallback = closeDialog;
SP.UI.ModalDialog.showModalDialog(options);
function createDialogElement() { //displays dialog
var dialogElement = $($('#compreqdiv').html());
return dialogElement.get(0);
}
function closeDialog(){
$("#compreqcontent").empty();
//return true
}//end closeDialog
}
function updateStatus(){ //sets status field value based on required conditions.
var $injOccText = $("[fgid='fg_injOcc']").val();
if ($injOccText !== 'Yes'){
$('input[title="IncidentStatus"]').text(2);
} else {
$('input[title="IncidentStatus"]').text(6);
};
closeDialog()
}
What I would like is for the updateStatus function to complete and the modal dialog close before the presaveaction function completes.