Display a Select Field Using a Popup

In this guide, we will explain how to use the select field inside the Modal body.

Example Popup Modal HTML

<!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Select Options</h4>
        </div>
        <div class="modal-body">
          
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
        </div>
      </div>
      
    </div>
  </div>

CSS to hide popup select field in the form.

<style>
div#component-321f-d99d-4fa8 {
    display: none;
}
</style>

Javascript to show a popup and listen to the pop-up event and append a select field

// On input of select option in the select field based on which pop up will be displayed
formyoula.form_fields[ 'fa85-e6b4-bd9f' ].on( 'input:set:success', function() {
  // Show pop-up modal
  $( '#myModal' ).modal( 'show' );
} );
// On displaying modal or pop-up
$( '#myModal' ).on( 'show.bs.modal', function( event ) {
  // #component-321f-d99d-4fa8 component id of select field that will be displayed inside popup
  // Show select field inside the modal popup
  $( '#component-321f-d99d-4fa8' ).show();
  // Find modal body and append select field
  $( this ).find( '.modal-body' ).append( $( '#component-321f-d99d-4fa8' )[ 0 ] );
} );

Form setup

image
image

Example Form JSON

Modal with Select options.json4.8KB

For any questions, please contact us - [email protected] or the Formyoula in-app chat 🙂