如何同时提交模态框内外表单值？下拉框值未提交问题排查

你提交表单时拿不到下拉框的值，核心原因是HTML结构不合法，导致下拉框根本不在表单的有效范围内！

你把整个#acceptModal模态框直接塞到了<table>的<tbody>里的<tr>里面，但按照HTML规则，<tbody>的直接子元素只能是<tr>，浏览器碰到这种不合法的嵌套，会自动把模态框移到<table>甚至<form>的外面。这下可好，你的device_manufacturer下拉框不属于#myForm表单了，提交的时候自然不会带上它的值。

方法1：调整模态框位置（推荐） #

把整个模态框代码从<tbody>里挪出来，放到<form>标签内部、<table>的外面，确保它是<form>的子元素。调整后的结构大概是这样：

<form method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="myForm">
  <!-- 原表格内容不动 -->
  <table id="example" class="table table-bordered table-striped" cellspacing="0" width="100%">
    <thead>
      <tr>
        <th><input name="select_all" value="1" id="example-select-all" type="checkbox" /></th>
        <th>Client</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <?php echo '<input type=hidden name=fetched_devices_array[] value=' . $row['device_id'] . '>' ?>
          <?php echo '<input type=checkbox name=devices[] value=' . $row['dev_id'] . '>' ?>
        </td>
        <td>
          <?php echo $row["name"]; ?>
        </td>
      </tr>
    </tbody>
  </table>

  <!-- 把模态框移到form内部、table外部 -->
  <div class="modal" id="acceptModal">
    <div class="modal-header">
      <h4 class="modal-title" id="exampleModalLabel">Select the return to manufacturer</h4>
    </div>
    <div class="modal-body">
      <p>
        <?php 
        // 原下拉框PHP代码不动
        $sql_return_to = $db->prepare("SELECT users.id as user_id, users.full_name, users.role, companies.company_name FROM users INNER JOIN companies ON users.company_id=companies.id WHERE (users.role=? OR users.role=? OR users.role=? AND users.active=?)"); 
        $sql_return_to->bind_param("iiii", $usr_type1, $usr_type2, $usr_type3, $active); 
        $sql_return_to->execute(); 
        $result_ = $sql_return_to->get_result(); 
        $result = []; 
        if ($result_->num_rows > 0) { 
          $result = $result_->fetch_all(MYSQLI_ASSOC); 
        } 
        $sql_return_to->close(); 
        echo "<select class='device_manufacturer' name='device_manufacturer'>"; 
        $nothing = "Nothing selected"; 
        echo "<option value='" . $nothing . "'>" . $nothing . "</option>"; 
        foreach ($result as $row) { 
          echo "<option value='" . $row['user_id'] . "'>" . $row['company_name'] . ' (' . explode(' ', trim($row['full_name']))[0] . ')' . "</option>"; 
        } 
        echo "</select>";
        ?>
      </p>
      <div id="wrapper">
        <button type="button" id="buttonConfirm" onclick="SubmitFormData()" name="goback" class="btn">Confirm</button>
      </div>
    </div>
  </div>
</form>

方法2：用form属性绑定（应急方案） #

如果不想动结构，可以给下拉框加上form="myForm"属性，强制指定它属于哪个表单：

<select class='device_manufacturer' name='device_manufacturer' form="myForm">
  <!-- 选项内容 -->
</select>

不过这种方法只是临时解决，还是推荐调整结构，保持HTML语义化和规范性，避免后续再出类似问题。

以后写HTML时要注意元素的嵌套规则，像表格的<tbody>里只能放<tr>，随便塞div很容易被浏览器自动修正结构，踩这种莫名其妙的坑。

内容的提问来源于stack exchange，提问作者showtime