Popup dialog to confirm a form

Question

I have a list, and when I want to add an element inside, I want a popup dialog to ask me for a confirmation. If cancel is clicked, it stays on the form, awaiting a user's action on the form ; And if OK is clicked, the form is validated and the element created.

I used this topic : Popup confirmation on 'status' column change

But I don't understand how to validate the form with "OK", or just stay on the form with "Cancel".

And can you tell me why the popup box doesn't appear with this code (the id is the one of the "Register" button in the form) :

$(document).ready(function(){

    $( "#ctl00_m_g_9ff78e92_ed40_4212_ae0f_44b787664fa8_ctl00_toolBarTbl_RightRptControls_ctl00_ctl00_diidIOSaveItem" ).click(function() {


             var isConfirmed = confirm("Confirmez-vous ce choix de réforme ?");
             if (isConfirmed == true) {

             }
             else {

             }

    });

})

I have this scipt JS in Sharepoint Designer, and I have a script tag referring to it in the html of the list. There is no error with the file (verified with the console in the browser).

EDIT

HTML in a webpart above the list :

<div id="ConfirmPopup" style="display: none;">
<div id="messageDiv" style="height: 100px; padding-top: 10px; padding-left: 10px; padding-right: 10px; font-weight: bold;">
<label id="lblConfirmationMessage"> /label&gt;
</label></div>

<div id="buttonDiv" style="float: right; padding-right: 5px;">
<input type="button" value="Yes" onclick="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.Yes, &#39;Yes&#39;); return false;" style="width: 75px;"/>
<input type="button" value="Cancel" onclick="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel, &#39;Cancel&#39;); return false;" style="width: 75px;"/>
<asp:hiddenfield runat="server" id="hdnButtonClicked">
</asp:hiddenfield></div>
</div>



<div id="InformationBox" style="display: none;">
<div id="Div2" style="height: 100px; padding-top: 10px; padding-left: 10px; padding-right: 10px; font-weight: bold;">
<label id="lblInformationMessage"> /label&gt;
</label></div>
<div id="Div3" style="float: right; padding-right: 5px;">
<input type="button" value="OK" onclick="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.Yes, &#39;Cancel&#39;); return false;" style="width: 75px;"/>
</div>
</div>





​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​<script src="/sites/DevNum/testjd/SiteReformeTest/js/jquery.js"></script>

​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​<script src="/sites/DevNum/testjd/SiteReformeTest/js/jquery-ui.js"></script>
​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​<script src="/sites/DevNum/testjd/SiteReformeTest/js/popup_confirm.js"></script>​​​​​

JS popup_confirm.js :

$(document).ready(function(){

    $( "#ctl00_m_g_9ff78e92_ed40_4212_ae0f_44b787664fa8_ctl00_toolBarTbl_RightRptControls_ctl00_ctl00_diidIOSaveItem" ).click(function() {


             /*var isConfirmed = confirm("Confirmez-vous ce choix de réforme ?");
             if (isConfirmed == true) {

             }
             else {

             }*/


             // Call openDialog method on button click or on page load
            function OpenConfigurationDialog(ConfirmationMessage) {

            var cloneModalContent = document.createElement('div');
            $("#lblConfirmationMessage").html(ConfirmationMessage);
            cloneModalContent.innerHTML = document.getElementById('ConfirmBox').innerHTML;

            var options = {
            html: cloneModalContent, // ID of the HTML tag
            // or HTML content to be displayed in modal dialog
            width: 375,
            height: 150,
            title: "Please Confirm",
            dialogReturnValueCallback: CloseDialog, // custom callback function
            allowMaximize: false,
            showClose: true
            };
            SP.UI.ModalDialog.showModalDialog(options);
            }


            // Call openDialog method on button click or on page load
            function OpenInformationDialog(InformationMessage) {
            var cloneModalContent = document.createElement('div');
            $("#lblInformationMessage").html(InformationMessage);
            cloneModalContent.innerHTML = document.getElementById('InformationBox').innerHTML;

            var options = {
            html: cloneModalContent, // ID of the HTML tag
            // or HTML content to be displayed in modal dialog
            width: 375,
            height: 150,
            title: "Error:",
            dialogReturnValueCallback: CloseDialog, // custom callback function
            allowMaximize: false,
            showClose: true
            };
            SP.UI.ModalDialog.showModalDialog(options);

            }

            function CloseDialog(dialogResult, returnValue) {
            if (returnValue == 'Yes') {
            document.getElementById("btnSubmit").click();
            return true;
            }
            if (returnValue == 'No') {
            return false;

            }
            if (returnValue == 'Cancel') {
            return false;
            }
            }


    });

})

And I'm sure the "Register" button of the form has this id : ctl00_m_g_9ff78e92_ed40_4212_ae0f_44b787664fa8_ctl00_toolBarTbl_RightRptControls_ctl00_ctl00_diidIOSaveItem

Answer 1

On your saveitem button click event call below method

$(document).ready(function(){

    $( "#ctl00_m_g_9ff78e92_ed40_4212_ae0f_44b787664fa8_ctl00_toolBarTbl_RightRptControls_ctl00_ctl00_diidIOSaveItem" ).click(function() {


             /*var isConfirmed = confirm("Confirmez-vous ce choix de réforme ?");
             if (isConfirmed == true) {

             }
             else {

             }*/
OpenConfigurationDialog("Confirmez-vous ce choix de réforme ?");




    });

// Call openDialog method on button click or on page load
            function OpenConfigurationDialog(ConfirmationMessage) {

            var cloneModalContent = document.createElement('div');
            $("#lblConfirmationMessage").html(ConfirmationMessage);
            cloneModalContent.innerHTML = document.getElementById('ConfirmBox').innerHTML;

            var options = {
            html: cloneModalContent, // ID of the HTML tag
            // or HTML content to be displayed in modal dialog
            width: 375,
            height: 150,
            title: "Please Confirm",
            dialogReturnValueCallback: CloseDialog, // custom callback function
            allowMaximize: false,
            showClose: true
            };
            SP.UI.ModalDialog.showModalDialog(options);
            }


            // Call openDialog method on button click or on page load
            function OpenInformationDialog(InformationMessage) {
            var cloneModalContent = document.createElement('div');
            $("#lblInformationMessage").html(InformationMessage);
            cloneModalContent.innerHTML = document.getElementById('InformationBox').innerHTML;

            var options = {
            html: cloneModalContent, // ID of the HTML tag
            // or HTML content to be displayed in modal dialog
            width: 375,
            height: 150,
            title: "Error:",
            dialogReturnValueCallback: CloseDialog, // custom callback function
            allowMaximize: false,
            showClose: true
            };
            SP.UI.ModalDialog.showModalDialog(options);

            }

            function CloseDialog(dialogResult, returnValue) {
            if (returnValue == 'Yes') {
            document.getElementById("btnSubmit").click();
            return true;
            }
            if (returnValue == 'No') {
            return false;

            }
            if (returnValue == 'Cancel') {
            return false;
            }
            }

})

You can get the reference of above code from this link