Add New Dropdown Option Without Form Reload

Introduction

You can add a new option to an existing dropdown menu in a form without reloading the page. This functionality enhances your user experience by allowing continuous interaction with the form.

How does it work?

To use this functionality, follow the steps below.

1. Click on the Add New Customer link. This action triggers a popup dialogue without leaving the form.
   
   
   
   Once the new customer information is submitted through the popup, the main form's dropdown will dynamically update to include the new entry using the Dynamic Cascade Drop-Down.
2. The functionality is implemented using HTML for structure and JavaScript for dynamic interaction:
   

   <!-- Link to trigger the popup -->
   <a id="addNewCustomer" href="addCustomer?embed=true">Add New Customer</a>
    
   <!-- Popup Form (initially hidden) -->
   <iframe id="popupForm" src="popupForm" style="width: 100%; height: 100%; border: none; display: none;"></iframe>
    
   <script>
       var inputDialog;
        
       $(function(){
           $("#addNewCustomer").click(function(e){
               e.preventDefault();
                
               // Set the source for the iframe and display it in a dialog
               $("#popupForm").attr("src", "addCustomer?embed=true");
               inputDialog = $("#popupForm").dialog({
                   autoOpen: false,
                   height: 300,
                   width: 800
               });
               inputDialog.dialog("open");
               $("#popupForm").css("width", "");
           });
       });
        
       // Function to close the popup and refresh the dropdown
       function closePopup(){
           inputDialog.dialog("close");
           // Trigger change to refresh the dropdown
           FormUtil.getField("customer_type").trigger("change");
       }
   </script>

   To learn more, download the sample application below.
   

   • APP_showNewCustomerInSelectbox-1-20221028162727.jwa.