ボタンのLOTSを送信する方法

Question

私はmysqlデータベースからデータの行を表示していますが、各行にはボタンとして機能したい3つのアイコンがあります。アイコンをクリックすると、そのユーザーを別のページに送信し、そのページをクリックしたアイコンとその行を表示します。ここではいくつかのサンプルコードです：私は、各入力アイコンのvalueフィールドを追加しようとしました

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

が、それは動作していないようでした。私は行の識別子を入力の名前に入れようとしましたが、変更された文字が出てくるので、抽出が困難です。

このページはデータベースから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を使用したくない場合は、フォームでPOSTするのではなくリンクを使用するオプションが有効です。

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

これはちょっと変わったアイデアだと思うかもしれませんが、ボタンごとに送信ボタンを使い、ボタンの上に画像をスタイルするだけです。ボタンを送信することの良い点は、押されたボタンだけがリクエストを通じて送信されるため、ページ全体に1つのフォームと各ボタンの一意の名前が必要であることです。

<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を知らないが、うまくいけば、ボタンの名前が一意である限り、1つの名前だけが要求を介して送信されるというアイデアを得ます。あなたのスタイルシートで次に

次のようなもの（テストしていません）：便利です

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

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

願っています！