In this article, we showcase the ability to add new selection into existing select box without the need to leave / reload partially filled form.

Figure 1: A Order Form Partially Filled Up

We can click on "Add New Customer" to bring up a pop up dialog.

Figure 2: Add New Customer within Order Form

Upon submitting the new customer form, the parent form will then refreshes its dropdown selection using Dynamic Cascading Drop-Down List.

This is the script used to realize this use case.

Custom HTML
<a id="addNewCustomer" href="addCustomer?embed=true">Add New Customer</a>

<iframe id="popupForm"  src="popupForm" width="100%" height="100%" style="width: 100%; height: 100%; border: none; display: none;"></iframe>

    var inputDialog;
            $("#popupForm").attr("src", "addCustomer?embed=true");
            inputDialog = $( "#popupForm" ).dialog({
              autoOpen: false,
              height: 300,
              width:  800,
              buttons: {
            $("#popupForm").css("width", "");
    function closePopup(){
        //force refresh the selectbox

You may refer to the app design by importing it into your Joget server.


  • No labels