Close popup modal dialog on clicking the submit button in sharepoint custom form

Question

I have a custom form and I would like to add some functionality in my submit button. When I click on Submit button, I would like to close the popup and refresh the parent page.

I used the code below in my button but there is a problem. It does not validate the controls and it makes a postback and even does not save any data.

OnClientClick="javascript:window.frameElement.commitPopup();"

Can you help me with some working code?

Thank you.

Answer 1

Hello I-H, are you using SharePoint 2013?

Answer 2

If you want to do some validations inside a modal dialog try something like below

1. Put the markup that you want to show in the dialog as below

<script type="text/html" id="parentDiv">
    <div>
        <label for="PictureName">Picture Name :</label>
        <input type="text" id="txtPictureName"/>
        <input type="button" id="btnOk" value="Ok"/>
        <div id="errorDiv" ></div>
    </div>
</script>

Please note the type is set as text/html.

2. Set the options for the dialog

function CheckValidations() {

//Logic to check the validations

}

function openDialog() {
    var options = SP.UI.$create_DialogOptions();
    options.title = "Save Image";
    options.width = 400;
    options.height = 250;
    options.html = createHtml();
                
    SP.UI.ModalDialog.showModalDialog(options);
 }

 function  createHtml () {

     var htmlDiv= jQuery(jQuery('#parentDiv').html());
      htmlDiv .find('#btnOk').on('click', function () {
           CheckValidations();

     });

     return  htmlDiv .get(0);
 }

You can modify the above logic as per your requirement.