connecting button to modal with bootstrap

Question

I need some help connecting a button which pops up a modal to submit form.

this is my html before the modal (works fine and another page is rendered after button is clicked)


    
        Let's get started
    
        
            1. CSV file
        
        
            2. There should be only two columns
        
        
            
                {%csrf_token%}

I have added the modal but I now have a couple of issues


    
    
        Let's get started
    
    
    
        
            
                
                
                    
                        Confirm upload
                    
                
                
                    this is the file name
                
                
                    
                
            
        
    
        
            1. CSV file
        
        
            2. There should be only two columns titled
        
        
            
                {%csrf_token%}

First issue I have is the "submit" button automatically makes the upload(renders to another page). How can I make so only if "confirm" button is the one which actually submits the form (if "x" then pop-up closes). Also how can I display the filename in the pop-up?

I use django with bootstrap 4

user_1889685 · Answer

You have to use Javascript and since Bootstrap uses jQuery, you'll have to create that logic using Javascript and jQuery.

Handle the dialog confirm button click and only then trigger a form submit event.
Handle modal show event show.bs.modal and set the dialog filename element if there is a file selected and enable the confirm button; if there is no file selected, message the user about it using the same filename element and disable the confirm button so the user can't click it.

You can run the code snippet and test the whole functionality. On form submission we cancel the event and print a message in the console just for demonstration.

^{Please read inline comments}

jQuery(function($) {

  // Handle form submit.
  // This won't be necessary unless you want some custom behavior.
  // Here we just cancel the form submission and just display a message for demonstration
  $('#uploadForm').on('submit', function(e) {
    console.log('The form is submitting; preventing event for demonstration');
    e.preventDefault();
  });

  // Handle dialog confirm button click.
  $('#confirmUpload').on('click', function(e) {
    // Submit the form and hide the dialog when confirm clicked
    $('#demoModal123').modal('hide');
    $('#uploadForm').submit();
  });
  
  // When the dialog is about to show, check if the user has selected a file.
  // If they have, update dialog filename element and enabled the confirm button,
  // else message user that there is no file and disable the confirm button
  $('#demoModal123').on('show.bs.modal', function() {   
    let files = document.getElementById('documentFile').files;
    let fileSelected = files && files[0];
    
    if (fileSelected) {
      $('#demoModal123 .filename').text(fileSelected.name);
      $('#confirmUpload').prop('disabled', false);
    } else {
      $('#demoModal123 .filename').text('No file selected');
      $('#confirmUpload').prop('disabled', true);
    }
  });
  
  // Update file input group control label on file selection
  $('#documentFile').on('change', function() {
    $('#documentFileName').text(this.files[0].name);
  });

});






  Let's get started
  
    1. CSV file
  
  
    2. There should be only two columns
  
  
    
           
      
        
          Upload
        
        
          
          Choose file
        
      
      
      
    
  




  
    
      
        Confirm upload
        
      
      
        this is the file name

user_8578127 · Answer

To be able to act Confirm button as only submission, you'll have to add type="submit" in Confirm button and type="button" in Submit button. Like this:

connecting button to modal with bootstrap

2 Answers