各入力フィールドの右ボタンを送信できません[複数のボタンと入力フィールドを1つのフォームで入力]

Question

jqueryとajaxの新機能、誰かが私を助けてくれるのだろうか？

私は、1つの入力タイプ=番号とボタンをプリントアウトするphp foreachループを持っています。以下のコードは、各行が項目名を表示するテーブルと、ユーザーが数量を入力するためのボックスと、アイテムを販売するボタンを作成します。

<div class=verktyg> 
    <form action='sell_items.php' method='POST' id='ajax'> 
     <table class="inventory"> 

<?php 
    foreach (array_slice($items, 2) as $key => $value) { 

     if($value>0){ 

      echo "<tr> 
       <td id='verktyg-first-td'>".$key."</td> 
       <td>".$value."</td> 
       <td><input type='number' name='items[$key]' value='0'></td> 
       <td><button type='submit' name='item' value='$key'>sell</button></td> 
       </tr>"; 
      } 
     } 
?> 
     </table> 
    </form> 
</div> 

そして、これは私のjqueryの/ Ajaxコードです：問題に今

$(document).on('submit','form#ajax', function(){ 
      var that = $(this); 
       url = that.attr('action'); 
       type = that.attr('method'); 
       data = {}; 

      that.find('[name]').each(function(index, value){ 
       var that = $(this); 
         name = that.attr('name'); 
         value = that.val(); 
         data[name] = value; 
       }); 

      $.ajax({ 
       url: url, 
       type: type, 
       data: data, 
       success: function(response) { 
       console.log(response); 
       } 
      }); 

      return false; 
     }); 

。私は最初の項目（最初の行）の2単位を売ろうとすると、私のフォームは最後の行（最後の行）に、最後の入力フィールドを提出していると考えています。

これはブラウザのコンソール

にconsole.log（応答）：See my ajax response in console when i click sell item in the first row

にconsole.log（データ）：私は、最初の項目の2台を販売しようとすると、See my ajax data in console when i click sell item in the first row

は、私は私のjsスクリプトを開始しようとしました：

$('form#ajax').on('submit', function(){ 

代わりの

$(document).on('submit','form#ajax', function(){ 

しかし、それは...任意のアイデアを動作しませんでしたか？

EDIT： 私はこの問題に間違った方法に近づいているかもしれません...今、たぶん私がクリックされたボタンを発見し、このような何かを書くことで、前の要素の値を取得する必要があります考えてイム：

var btn= $(this).find("button[type=submit]:focus").val(); 
     var quantity = $(btn).prev("input[type=number]").val(); 
     console.log(btn); 
     console.log(quantity); 

まだ、私のの数量は定義されていません。私はこの問題に間違った方法に近づいているかもしれない...今イム たぶん私はしたボタンを見つける必要があります思考：事前

Answer 1

EDITで

おかげで...その値を取得する方法を理解する必要がありますクリックして 前の要素の値を取得

はい、これは正しいです。このアプローチをとるべきです。

私はあなたが使用するためのサンプルコードを作った：

HTML：

<div class=verktyg> 
    <form action='sell_items.php' method='POST' id='ajax'> 
    <table class="inventory"> 
     <tr> 
     <td class='verktyg-first-td'>Item 1</td> 
     <td>10</td> 
     <td> 
      <input type='number' name='item_1' value='10'> 
     </td> 
     <td> 
      <button type='submit' class='submit_button'>sell</button> 
     </td> 
     </tr> 
     <tr> 
     <td class='verktyg-first-td'>Item 2</td> 
     <td>20</td> 
     <td> 
      <input type='number' name='item_2' value='20'> 
     </td> 
     <td> 
      <button type='submit' class='submit_button'>sell</button> 
     </td> 
     </tr> 
    </table> 
    </form> 
</div> 

のjQuery：

// prevent for submission 
$("form").submit(function(e) { 
    e.preventDefault(); 
}); 

// when submit button is clicked 
$(".submit_button").on("click", function() { 
    self = $(this); 
    form = self.closest("form"); 
    url = form.attr('action'); 
    type = form.attr('method'); 
    parentTr = self.parent("td").closest("tr"); // get the parent <tr> 
    data = {}; 

    inputElm = parentTr.find("input[type=number]"); // find input element closest to the clicked button 
    name = inputElm.attr('name'); // get input name 
    value = inputElm.val(); // get input val 
    data[name] = value; 

    // send ajax request 
    $.ajax({ 
    url: url, 
    type: type, 
    data: data, 
    success: function(response) { 
     console.log(response); 
    } 
    }); 
}); 

だから最初、私はいくつかの問題を修正あなたのコード。ループを行ったときに複数の同じIDを持つようにid='verktyg-first-td'。だから私はそれをクラスに変更しました。

あなたの機能をどのように変更したかを変更しました。フォームの送信時にトリガーするのではなく、ボタンがクリックされたときにトリガーします。

でも、私の数量は未定義です。

<td> 
     <input type='number' name='item_1' value='10'> 
     <button type='submit' class='submit_button'>sell</button> 
    </td> 

しかし、あなたが探していた入力要素がある：あなたの構造がある場合

var quantity = $(btn).prev("input[type=number]").val();

はい、それは働くだろう... にその値を取得する方法を理解する必要があります中に別の<td>。

だからあなたは、そのinput[type=number]を探して最初に最も近い<tr>

parentTr = self.parent("td").closest("tr");

を見つける必要があります。

inputElm = parentTr.find("input[type=number]");

更新：

（ISSET（$ _ POST [ '項目は']））ボタンのクリックを検出しdosent場合と "未定義のインデックス：項目は" 言う

最初にこれを修正するには、属性をボタン要素に再度追加します。

<button type='submit' class='submit_button' name="item" value='button_value'>sell</button> 

その後、おかげでたくさん助けのために、私が必要とする正確に何であるように見えるdata[name] = value;

// get button val 
value = self.val(); 
name = self.attr('name'); 
data[name] = value;