Bootstrap：提交Table数据

Question

我尝试进入 bootstrap，因此我尝试构建一个包含某种 内容管理交互 的网站。下面是一个 table，您可以在其中插入成分，应该将其插入到 MYSQL 关系中。当我填写下面的 table 时出现问题，因为包裹在 table 周围的表单不会提交任何内容。

<form class="form-horizontal" id="ingredients" role="form" action="process_input.php" method="POST">
<table>
    <caption>insert ingredients</caption>
<thead>
  <tr>
    <th>Quantity</th>
    <th>Unit</th>
    <th>Name</th>
    <th></th>
  </tr>
</thead>
<tbody>
<tr>
<div class="form-group">
    <td><select id="opt1a" class="custom-select mb-2 mr-sm-2 mb-sm-0">
        <option selected>Choose</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
    </select></td>
    <td> <select id="opt1b" class="custom-select mb-2 mr-sm-2 mb-sm-0">
        <option selected>Choose</option>
        <option value="3">Litre</option>
        <option value="3">Cup</option>
        <option value="4">TS</option>
  </select></td>
    <td><input id="opt1c"></td>
    <td><input class="btn btn-primary" type="reset" value="Reset"></td>
</div>
</tr>

<tr>
<div class="form-group">
    <td><select id="opt1a" class="custom-select mb-2 mr-sm-2 mb-sm-0">
        <option selected>Choose</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
    </select></td>
    <td> <select id="opt1b" class="custom-select mb-2 mr-sm-2 mb-sm-0">
        <option selected>Choose</option>
        <option value="3">Litre</option>
        <option value="3">Cup</option>
        <option value="4">TS</option>
  </select></td>
    <td><input id="opt1c"></td>
    <td><input class="btn btn-primary" type="reset" value="Reset"></td>
</div>
</tr>

<tr>
<div class="form-group">
    <td><select id="opt1a" class="custom-select mb-2 mr-sm-2 mb-sm-0">
        <option selected>Choose</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
    </select></td>
    <td> <select id="opt1b" class="custom-select mb-2 mr-sm-2 mb-sm-0">
        <option selected>Choose</option>
        <option value="3">Litre</option>
        <option value="3">Cup</option>
        <option value="4">TS</option>
  </select></td>
    <td><input id="opt1c"></td>
    <td><input class="btn btn-primary" type="reset" value="Reset"></td>
</div>
</tr>
</tbody>
 <button class="btn btn-sucess">Send</button>

process_input.php 脚本很简单。

<?php
print_r($_GET);
print_r($_POST);
?>

table 一定有问题，因为提交后两个数组仍然是空的。

编辑：感谢您的所有更正。现在可以了。 Whosebug 社区的速度快得惊人！ :)

Answer 1

table 没有任何问题。 Table 用于制作用户可见的布局。

您正在使用 $_GET 和 $_POST 全局变量获取 php 中表单的数据。

正如我在输入字段中看到的，您没有在任何输入中给出属性 name。

<select id="opt1a" class="custom-select mb-2 mr-sm-2 mb-sm-0">

在上面的代码中，您缺少名称属性。所以像这样添加名称属性：

<select id="opt1a" class="custom-select mb-2 mr-sm-2 mb-sm-0" name="selectbox">
                                                                 ^^^name can be your choice

注意：表单提交后，PHP全局变量$_GET或$_POST保存输入字段名称的值。与上面的示例一样，该值将位于 $_POST['selectbox'] 或 $_GET['selectbox']

因此您必须为每个输入类型指定名称属性。

Answer 2

您提供的代码中的方法是POST。明明在POST中提交，为什么还要在PHP中使用GET？那是一点点。

<form class="form-horizontal" id="ingredients" role="form" action="process_input.php" method="POST">

另一件事是您的提交按钮。您没有定义按钮的类型。它应该是 'submit'.

类型

<button class="btn btn-sucess" type="submit">Send</button>

您的 select 元素缺少 name 属性，PHP 使用该属性唯一标识值在输入中。

<select id="opt1a" class="custom-select mb-2 mr-sm-2 mb-sm-0" name="yourSelectName">

最后，由于您试图通过 POST 获取值，请创建变量来保存每个 selection 盒的 POST 值。您可以按照以下示例操作：

<?php
$selectBox1 = $_POST['selectBox1'];
$selectBox2 = $_POST['selectBox2'];

echo $selectBox1 . " " $selectBox2;
?>

Answer 3

table 不是问题，您只需设置输入名称属性 name="opt1a"，例如

<select id="opt1a" class="custom-select mb-2 mr-sm-2 mb-sm-0" name="opt1a">

使用 post 方法你可以通过那个名称属性得到这个 select 框值，比如

echo $_POST['opt1a'];

并通过提供 type 属性使您的按钮提交，

<button type="submit" class="btn btn-sucess">Send</button>

并确保您的每个打开标签都有结束标签。没有名称属性，您无法在服务器端代码中获取任何输入字段值。
希望对你有帮助。

Answer 4

在查看您的代码后发现您出错的地方很少。

1) 你还没有关闭表格 </form>

2) 并且您将所有 select 选项值 null 发送到 PHP 即您的第一个选项 selected 没有值与之相关。所以最后 post 显示一个空数组

<select id="opt1a" class="custom-select mb-2 mr-sm-2 mb-sm-0">
<option value="0" selected>Choose</option>

3) 为每个 select 下拉菜单取不同的名称以区分访问权限。

<select name="differentName" id="opt1a" class="custom-select mb-2 mr-sm-2 mb-sm-0">

4) 表单标签打开后第一件事应该是表单操作

<form action="process_input.php" class="form-horizontal" id="ingredients" role="form"   method="POST">

Bootstrap：提交Table数据

Bootstrap: Submit Table Data

html

php

html-table

submit

twitter-bootstrap-3