如何提交大量的按钮

I'm displaying rows of data from a mysql database, and on each row I have three icons that I'd like to function as buttons. When an icon is clicked, I'd like to send the user to another page, and send that page both which icon was clicked and what row it was on. Here's some sample code:

<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>

I've tried adding a value field for each input icon, but that didn't seem to work. I've tried putting the row identifier in the input's name, but it came out with changed characters, making it difficult to extract.

This page will likely display up to a hundred rows from the database, so aside from creating a separate form for each icon on each row (300 forms), what's the best way to go about this?

If you can use jquery, here is how I would approach it:

<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>

That code is off the top of my head and untested, but here's the general idea:

• First, move the icons outside of the form, as this approach doesn't require them to be inputs any longer;
• Since the icons don't need to be inputs, we make them images inside of anchors;
• We put the data we need on the anchors (data-icon and data-row);
• Using jquery (in this case, you could do this pure javascript if you needed to), we:
  • Listen for any clicks of the anchors;
  • Grab the data from the clicked link and fill in our hidden form fields; and
  • Submit the form

Again, I used jquery because it's common and familiar to many. You can accomplish this with many other javascript frameworks or even pure javascript if that was desireable. Conceptually though I think it is sound.

If you don't want to go with javascript, the option of using links instead of POST'ing with a form is potentially viable.

Here's what that might look like:

<?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++;
    }
?>

Hope that helps!

Based on the comment by mcgraphix, I eliminated the form entirely and changed all the input to links and appended the button id and row id to each link, as shown below:

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;
}

Thanks, mcgraphix! :)

PS - As this posted, I saw basically the same answer by xjstratedgebx, so thank you as well!

This might seem a bit of a strange idea but you can just use submit buttons for each button and then style the image over top of the button. The good thing about submit buttons is that only the button that is pressed is sent through the request, so effectively you only need one form for the whole page, and a unique name for each button.

<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>

I don't know PhP so not sure if that compiles, but hopefully you get the idea that as long as the buttons have unique names, only one name will be sent through the request.

Then in your style sheet something like the following (not tested):

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

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

Hope that is useful!