кнопка подключения к модальному с bootstrap

Question

Мне нужна помощь в подключении кнопки, которая открывает модал для отправки формы.

это мой html до модального режима (работает нормально, и после нажатия кнопки отображается другая страница)

<div class="container my-container">
    <h3>
        Let's get started
    </h3>
        <div class="row my-row">
            <h4>1. CSV file</h4>
        </div>
        <div class="row my-row">
            <h4>2. There should be only two columns</h4>
        </div>
        <div class="row my-row">
            <form method="post" enctype="multipart/form-data">
                {%csrf_token%}
                <input type="file" name="document"><br>
                <button type="submit">  Submit</button>
            </form>
        </div>
</div>

Я добавил модал, но теперь у меня есть пара проблем

<div class="container my-container">
    <div class="row my-row">
    <h3>
        Let's get started
    </h3>
    </div>
    <div class="modal fade" id="demo123">
        <div class="modal-dialog">
            <div class="modal-content">
                <button type="button" class="close" data-dismiss="modal">
                    <span>
                        &times;
                    </span>
                </button>
                <div class="modal-header">
                    <h2 class="modal-title">
                        Confirm upload
                    </h2>
                </div>
                <div class="modal-body">
                    <p>this is the file name</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        Confirm
                    </button>
                </div>
            </div>
        </div>
    </div>
        <div class="row my-row">
            <h4>1. CSV file</h4>
        </div>
        <div class="row my-row">
            <h4>2. There should be only two columns titled</h4>
        </div>
        <div class="row my-row">
            <form method="post" enctype="multipart/form-data">
                {%csrf_token%}
                <input type="file" name="document"><br>
                <button class="btn btn-primary" data-toggle="modal" data-target="#demo123">
                 Submit
                </button>
            </form>
        </div>
</div>

Первая проблема, которую я имею, - кнопка «Отправить» автоматически выполняет загрузку (визуализирует на другую страницу). Как это сделать, только если кнопка «подтвердить» является той, которая фактически отправляет форму (если «х», то всплывающее окно закрывается). Также, как я могу отобразить имя файла во всплывающем окне?

Я использую django с bootstrap 4

Answer 1

Вы должны использовать Javascript, а поскольку Bootstrap использует jQuery, вам нужно будет создать эти логи c, используя Javascript и jQuery.

1. Handle нажатие кнопки подтверждения диалога и только затем запуск события отправки формы.
2. Обработка события модального показа show.bs.modal и установка элемента имени файла диалога, если выбран файл, и включение кнопки подтверждения; если файл не выбран, сообщите пользователю об этом, используя тот же элемент имени файла, и отключите кнопку подтверждения, чтобы пользователь не мог щелкнуть по нему.

Вы можете запустить фрагмент кода и протестировать весь функциональность. При отправке формы мы отменяем событие и печатаем сообщение в консоли только для демонстрации.

^{Пожалуйста, прочитайте встроенные комментарии}

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);
  });

});

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="container my-container">
  <h3>Let's get started</h3>
  <div class="row my-row">
    <h4>1. CSV file</h4>
  </div>
  <div class="row my-row">
    <h4>2. There should be only two columns</h4>
  </div>
  <div class="row my-row">
    <form method="post" enctype="multipart/form-data" id="uploadForm">
      <!-- {%csrf_token%} -->     
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
        </div>
        <div class="custom-file">
          <input type="file" class="custom-file-input" name="documentFile" id="documentFile">
          <label class="custom-file-label" id="documentFileName" for="documentFile">Choose file</label>
        </div>
      </div>
      
      <button class="btn btn-primary" type="button" data-toggle="modal" data-target="#demoModal123">Submit</button>
    </form>
  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="demoModal123">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title" id="exampleModalLabel">Confirm upload</h2>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p class="filename">this is the file name</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" id="confirmUpload">Confirm</button>
      </div>
    </div>
  </div>
</div>

Answer 2

Для того, чтобы кнопка Подтверждение действовала только как отправка, вам необходимо добавить type="submit" в кнопку Подтверждение и type="button" в кнопку Отправить. Как это:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo123">
  Submit
</button>

<button type="submit" class="btn btn-secondary" data-dismiss="modal">
  Confirm
</button>