Display a model form before saving

Hi Byron,

The script below should do the job:

<div id="dialog-confirm"></div>
<script>
function fnOpenNormalDialog() {
    $("#dialog-confirm").html("Confirm Dialog Box");

    // Define the Dialog and its properties.
    $("#dialog-confirm").dialog({
        resizable: false,
        modal: true,
        title: "Modal",
        height: 250,
        width: 400,
        buttons: {
            "Yes": function () {
                $(this).dialog('close');
                callback(true);
            },
                "No": function () {
                $(this).dialog('close');
                callback(false);
            }
        }
    });
}

function callback(value) {
    if (value) {
        alert("Confirmed");
    	$("[name='theForm']").submit();
    } else {
        alert("Rejected");
    }
}

$(function() {
  $('input[type="submit"]').attr('onclick','return false');
  $('input[type="submit"]').click(fnOpenNormalDialog);
});
</script>

This version creates an html element for dialog-confirm that will hold the message of the modal form. Then it disables the default action of the submit buttons, replacing it with the modal form opener.

Kindly check and let me know how it goes.  

Regards,

Godfrey

Nice one mate, super duper.

I have been looking to do something like this but with a tweak. How would you incorporate a list to display? Let's say you are updating a record and phone number and email address are required. How would you accomplish that and once they have been updated, how would you make it so the dialog box does not show? Thanks, looking forward to your answer.

Hi Paul,

Paste the code below on the target page's script component.. This should display a modal form when either email or phone number fields are empty.

<div id="dialog-confirm"></div>
<script>
function checkRequiredFields(){
    if(rbf_getFieldValue("email") == "" || rbf_getFieldValue("phone_number") == "") {
		fnOpenNormalDialog();
    } else {
		$("[name='theForm']").submit();
    }
}  
  
function fnOpenNormalDialog() {
    $("#dialog-confirm").html("Phone Number and Email Address are required.");

    // Define the Dialog and its properties.
    $("#dialog-confirm").dialog({
        resizable: false,
        modal: true,
        title: "Modal",
        height: 250,
        width: 400
    });
}

$(function() {
    $('input[type="submit"]').attr('onclick','return false');
	$('input[type="submit"]').click(checkRequiredFields);  
});
</script>

In my opinion, it's better to use the default validations of Rollbase because it is much easier to do. 

Regards,

Godfrey

Thanks...yes I agree but I have a client that is looking for something different and this might do the job!

Don't mean to be a pain but what if I have 5 required fields and I want the diagram to display only the missing ones in a list format? Meaning, have the script loop through what is missing and display only those required fields? Is this possible? Something like this:

var checkValues = {

   "Street Address 1" : "{!streetAddr1}",

   "Street Address 2" : "{!streetAddr2}",

   "City" : "{!city}",

   "State" : "{!state#code}",

   "ZIP/Postal Code" : "{!zip}",

   "Phone" : "{!phone}",    

 };

var missingValues = "";

 for (var key in checkValues) {

   var obj = checkValues[key];

   if(obj == "") {

     missingValues += "<li>" + key + "</li>";

   }

 }

 if(missingValues != "")

var dc = '<span class="bold">Before updating the account, the following fields must be set: <ul>' + missingValues + '</ul></span>';

   var dt = 'Update Account';

   showPopWin("../dialog/infoDialog.jsp", 500, 250, null, true, dc, dt);

 }

}

This is how I had the script but could not getting it working correctly.

Is the script on the new/edit page? Take note that these tokens will return the values on the database, not on the form. I suggest using rbf_getFieldValue instead in order to get the current form values.

Can you attach the entire code to this thread?

The script is on the edit page only. I will try your suggestion...currently I am using the code you provided to me above in this feed. I am using the rbf_getFieldValue - see below.

<div id="dialog-confirm"></div>

<script>

function checkRequiredFields(){

   if(rbf_getFieldValue("streetAddr1") == "" || rbf_getFieldValue("city") == "" || rbf_getFieldValue("state") == "" || rbf_getFieldValue("zip") == "" || rbf_getFieldValue("phone") == "") {

fnOpenNormalDialog();

   } else {

$("[name='theForm']").submit();

   }

}    

function fnOpenNormalDialog() {

   $("#dialog-confirm").html("Please note: Street Address1, City, State, Zip, and Phone Number are required.");

   // Define the Dialog and its properties.

   $("#dialog-confirm").dialog({

       resizable: false,

       modal: true,

       title: "Important!",

       height: 250,

       width: 400,

       buttons: {

            "Okay": function () {

              $(this).dialog('close');

               callback(false);

           }

       }

   });

}

$(function() {

   $('input[type="submit"]').attr('onclick','return false');

$('input[type="submit"]').click(checkRequiredFields);  

});

</script>

Ultimately, I would like the dialog to display in a list view - perhaps bulleted what is missing because right now it states what is required.

Thanks! :)

Please see attached code. I basically merged your script with mine in order to display a list view of empty required fields. 

Just a reminder, please use rbf_getPicklistCode in fetching form values of picklist fields. 

Also, I think:

$(function() {

   $('input[type="submit"]').attr('onclick','return false');

   $('input[type="submit"]').click(checkRequiredFields);  

});

Should be changed to:

$(function() {

$('input[value=" Save "]').attr('onclick','return false');

$('input[value=" Save "]').click(checkRequiredFields);

});

So that Cancel of the form is not affected?

Thanks much! :)

[mention:05ff13b759f7461eab51d95e30afa38c:e9ed411860ed4f2ba0265705b8793d05]: I agree to your suggestion. Sorry for missing that.