使用引导程序将按钮连接到模态

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>

我遇到的第一个问题是“提交”按钮会自动进行上传（呈现到另一个页面）。只有当“确认”按钮是实际提交表单的按钮时，我才能做到这一点（如果“x”则弹出窗口关闭）。另外如何在弹出窗口中显示文件名？

我使用 django 和 bootstrap 4

Answer 1

为了能够将确认按钮作为唯一提交，您必须在确认按钮中添加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>

Answer 2

您必须使用 Javascript，而且由于 Bootstrap 使用 jQuery，因此您必须使用 Javascript 和 jQuery 创建该逻辑。

1. 处理对话框确认按钮单击，然后才触发表单提交事件。
2. 处理模态显示事件show.bs.modal，如果选择了一个文件，则设置对话框文件名元素并启用确认按钮；如果没有选择文件，则使用相同的文件名元素向用户发送消息并禁用确认按钮，以便用户无法单击它。

您可以运行代码 sn-p 并测试整个功能。在表单提交时，我们取消事件并在控制台中打印一条消息，仅用于演示。

^{请阅读内联 cmets}

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>