Question

我正在显示来自mysql数据库的数据行，并且在每行上我有三个我想用作按钮的图标。单击一个图标时，我想将用户发送到另一个页面，并向该页面发送单击了哪个图标以及它所在的行。这是一些示例代码：

<form action="nextpage.php"  method="POST">

while ($row = $result->fetch_assoc))
{
    echo '<input type="image" src="button1.png" name="button1">';
    echo '<input type="image" src="button2.png" name="button2">';
    echo '<input type="image" src="button3.png" name="button3">';
    echo $row["cName"], '<br/>', PHP_EOL;
}
</form>

我尝试为每个输入图标添加value字段，但这似乎不起作用。我已经尝试将行标识符放在输入的名称中，但它出现了更改的字符，因此难以提取。

此页面可能会显示数据库中的最多100行，因此除了为每行（300个表单）上的每个图标创建单独的表单外，最好的方法是什么？

Answer 1

如果你可以使用jquery，我将采用以下方法：

<form action="nextpage.php"  method="POST">

    <input type="hidden" id="hidden-icon" name="icon" value="" />
    <input type="hidden" id="hidden-row" name="row" value="" />

</form>

<?php
    $row_num = 0;
    while ($row = $result->fetch_assoc))
    {
        echo '<a href="#" class="click-register" data-icon="1" data-row="' . $row_num . '"><img src="button1.png" /></a>';
        echo '<a href="#" class="click-register" data-icon="2" data-row="' . $row_num . '"><img src="button2.png" /></a>';
        echo '<a href="#" class="click-register" data-icon="3" data-row="' . $row_num . '"><img src="button3.png" /></a>';
        echo $row["cName"], '<br/>', PHP_EOL;
        $row_num++;
    }
?>

<script type="text/javascript">
    $('.click-register').on('click', function (e) {
        //Stop the link from jumping to the top of the page
        e.preventDefault();

        //Fill in the hidden form values
        $('#hidden-icon').val($(e.target).data('icon'));
        $('#hidden-row').val($(e.target).data('row'));

        //Submit the form
        $('form').submit();
    });
</script>

这段代码不在我的头脑中且未经测试，但这是一般的想法：

首先，将图标移到表单之外，因为这种方法不再需要它们输入;
由于图标不需要输入，我们会在锚点内制作图像;
我们将所需数据放在锚点上（数据图标和数据行）;
使用jquery（在这种情况下，如果需要，你可以使用这个纯JavaScript），我们：
- 听取任何锚点的点击;
- 从点击的链接中抓取数据并填写隐藏的表单字段;和
- 提交表格

同样，我使用了jquery，因为它很常见且很常见。您可以使用许多其他javascript框架甚至纯javascript来实现这一点，如果这是可取的。从概念上讲，虽然我认为这是合理的。

如果您不想使用javascript，则使用链接而不是使用表单的选项可能是可行的。

这可能是什么样的：

<?php
    $row_num = 0;
    while ($row = $result->fetch_assoc))
    {
        echo '<a href="nextpage.php?icon=1&row=' . $row_num . '"><img src="button1.png" /></a>';
        echo '<a href="nextpage.php?icon=2&row=' . $row_num . '"><img src="button2.png" /></a>';
        echo '<a href="nextpage.php?icon=3&row=' . $row_num . '"><img src="button3.png" /></a>';
        echo $row["cName"], '<br/>', PHP_EOL;
        $row_num++;
    }
?>

希望有所帮助！

Answer 2

根据mcgraphix的评论，我完全删除了表单，并将所有输入更改为链接，并将按钮ID和行ID添加到每个链接，如下所示：

while ($row = $result->fetch_assoc))
{
    echo '<a href="nextpage.php?btn=1&row=', $row["ID"], '"><img src="button1.png"></a>';
    echo '<a href="nextpage.php?btn=2&row=', $row["ID"], '"><img src="button2.png"></a>';
    echo '<a href="nextpage.php?btn=3&row=', $row["ID"], '"><img src="button3.png"></a>';
    echo $row["cName"], '<br/>', PHP_EOL;
}

谢谢，mcgraphix！：）

PS - 正如发布的那样，我在xjstratedgebx看到了基本相同的答案，所以也谢谢你！

Answer 3

这可能看起来有点奇怪，但你可以只为每个按钮使用提交按钮，然后在按钮顶部设置图像样式。提交按钮的好处是只有按下的按钮才会通过请求发送，所以实际上你只需要一个表格用于整个页面，每个按钮都有一个唯一的名称。

<form action="nextpage.php"  method="POST">
    while ($row = $result->fetch_assoc))
    {
        echo '<button class="img-button b1" name="$row["cName"]button1" />';
        echo '<button class="img-button b2" name="$row["cName"]button2" />';
        echo '<button class="img-button b3" name="$row["cName"]button3" />';
        echo $row["cName"], '<br/>', PHP_EOL;
    }
</form>

我不知道PhP所以不确定是否编译，但希望你知道只要按钮具有唯一的名称，只有一个名称将通过请求发送。

然后在您的样式表中，如下所示（未经测试）：

.img-button {
    height: 20px;
    width: 20px;
}

.button1 {background-image: url('button1.png');}
.button2 {background-image: url('button2.png');}
.button1 {background-image: url('button2.png');}

希望这很有用！

如何提交大量的按钮

3 个答案: