利用Bootstrap模态框获取表单输入值：最佳实践与现代方法

本文旨在指导开发者如何从bootstrap模态框中的表单获取输入值。我们将探讨传统`onclick`事件的局限性，并推荐采用现代、无侵入式javascript事件处理方法。通过结合`data`属性、dom遍历以及jquery的事件委托机制，我们将展示如何在动态生成的模态框中高效、准确地获取表单数据，从而提升代码的可维护性和健壮性。

从Bootstrap模态框获取表单输入值的现代方法

在Web开发中，经常需要从模态框（Modal Dialog）内的表单中收集用户输入。尤其当模态框内容是动态生成时，如何高效且符合最佳实践地获取这些值成为一个关键问题。本文将详细介绍一种推荐的现代方法，以避免常见的陷阱，如滥用onclick属性和非唯一id。

1. 避免使用onclick等行内事件处理器

在HTML元素上直接使用onclick、onchange等行内事件属性是一种过时的做法，因为它将JavaScript逻辑与HTML结构紧密耦合，降低了代码的可维护性、可读性，并且难以管理复杂的事件流。

不推荐的做法示例：

<button type="button" onclick="add_rute(<?php echo $row['id'] ?>,<?php echo $row['master_id'] ?>)">Submit</button>

推荐的做法： 使用无侵入式JavaScript，通过事件监听器将行为与结构分离。这通常通过jQuery的.on()方法实现，它允许在文档加载完成后动态绑定事件。

2. 确保ID的唯一性并合理使用类名和数据属性

当通过循环（如PHP循环）动态生成多个相似的HTML元素时，为每个元素赋予唯一的id至关重要。HTML规范要求id属性在整个文档中必须是唯一的。如果循环中生成了相同的id，将导致JavaScript选择器行为异常，无法准确地定位到目标元素。

不推荐的做法示例：

<input type="text" class="form-control" id="hari" name="hari" placeholder="Select Day">
<!-- 如果多个模态框都有id="hari"，则会出现问题 -->

推荐的做法：

Favird No-Code Tools

无代码工具的聚合器

下载

• 对于表单输入元素： 移除循环中动态生成的id属性，改用class属性来标识元素类型。例如，将id="hari"改为class="hari"。
• 传递动态数据： 对于需要与后端数据关联的唯一标识符（如$row['id']和$row['master_id']），应使用HTML5的data-*属性。这些属性可以存储自定义数据，并且可以通过JavaScript轻松访问。

修改后的HTML结构示例（PHP循环内）：

<?php
  $query = "SELECT * FROM  LTSUB_itin order by id ASC";
  $rs = mysqli_query($con, $query);
  while ($row = mysqli_fetch_array($rs)) {
?>
  <button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#exampleModal<?php echo $row['id']  ?>">
    <i class="far fa-calendar-plus"></i>
  </button>
  <div class="modal fade" id="exampleModal<?php echo $row['id'] ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">ADD DAY ID :
            <?php echo  $row['id'] ?>
          </h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form>
            <div class="row">
              <div class="col">
                <label for="hari">day </label>
                <!-- 将id="hari"改为class="hari" -->
                <input type="text" class="form-control hari" name="hari" placeholder="Select Day">
              </div>
              <div class="col">
                <label for="rutet">Rute</label>
                <!-- 将id="rute"改为class="rute" -->
                <input type="text" class="form-control rute" name="rute" placeholder="rute">
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cancel</button>
          <!-- 添加一个类名用于事件绑定，并使用data-*属性传递动态ID -->
          <button type="button" class="btn btn-success btn-sm submit-rute" data-id="<?php echo $row['id'] ?>" data-master-id="<?php echo $row['master_id'] ?>">Submit</button>
        </div>
      </div>
    </div>
  </div>
<?php } ?>

在上述代码中，我们做了以下改动：

• 模态框内的输入框hari和rute的id属性被移除，并添加了相应的class属性（hari和rute）。
• 提交按钮添加了一个类名submit-rute用于JavaScript事件绑定。
• 提交按钮上添加了data-id和data-master-id属性，用于存储与当前行关联的唯一标识符。

3. 使用JavaScript进行DOM遍历和数据获取

有了上述改进的HTML结构，我们可以编写健壮的JavaScript代码来处理表单提交和数据获取。核心思想是：

1. 监听提交按钮的点击事件。
2. 从被点击的按钮开始，向上遍历DOM树找到其所属的模态框。
3. 在模态框内部向下查找所需的表单输入元素。
4. 从按钮的data-*属性中获取关联数据。

JavaScript代码示例：

// 使用jQuery的DOM ready事件确保DOM加载完成后执行
$(document).ready(function() {
  // 监听所有具有'submit-rute'类的按钮的点击事件
  // 使用事件委托，将事件绑定到文档上，即使动态添加的元素也能响应
  $(document).on('click', '.submit-rute', function(e) {
    // 阻止默认行为，如果按钮在form标签内，防止表单提交
    e.preventDefault();

    // 获取被点击的按钮的jQuery对象
    const $button = $(e.target);

    // 从按钮的data属性中获取id和masterId
    const id = $button.data('id');
    const masterId = $button.data('master-id');

    // 向上遍历DOM，找到最近的'.modal-footer'，然后找到其前一个兄弟元素'.modal-body'
    // 这样可以确保我们只在当前模态框的body中查找输入框
    const $modalBody = $button.closest('.modal-footer').prev('.modal-body');

    // 在当前模态框的body中查找具有特定类名的输入框，并获取其值
    const hari = $modalBody.find('.hari').val();
    const rute = $modalBody.find('.rute').val();

    // 在这里处理获取到的值
    console.log('ID:', id);
    console.log('Master ID:', masterId);
    console.log('Hari (Day):', hari);
    console.log('Rute:', rute);

    // 例如，可以发送AJAX请求到服务器
    // $.ajax({
    //   url: 'your_api_endpoint.php',
    //   method: 'POST',
    //   data: {
    //     id: id,
    //     master_id: masterId,
    //     hari: hari,
    //     rute: rute
    //   },
    //   success: function(response) {
    //     console.log('数据提交成功', response);
    //     // 成功后关闭模态框
    //     $button.closest('.modal').modal('hide');
    //   },
    //   error: function(error) {
    //     console.error('数据提交失败', error);
    //   }
    // });

    // 关闭模态框（如果不需要AJAX请求，可以直接在这里关闭）
    // $button.closest('.modal').modal('hide');
  });
});

总结

通过遵循上述最佳实践，我们可以构建出更加健壮、可维护且易于扩展的Web应用程序。核心要点包括：

• 分离关注点： 将JavaScript行为从HTML结构中分离出来，使用无侵入式事件处理。
• 唯一ID原则： 确保HTML中的id属性是唯一的，尤其是在动态生成内容时。
• 语义化HTML： 利用class属性进行样式和通用选择，使用data-*属性存储与元素相关的自定义数据。
• DOM遍历： 利用jQuery等库提供的强大DOM遍历方法（如closest()、find()），从事件源高效地定位相关元素。

采用这种方法，无论您的模态框是如何动态生成的，都能够准确无误地获取所需的表单数据和关联信息。