Không thể gửi nút bên phải cho từng trường nhập [nhiều nút và trường nhập trong một biểu mẫu]

Question

Im kiểu mới với jquery và ajax và tôi tự hỏi liệu có ai đó có thể giúp tôi không?

Tôi có vòng lặp foreach php in ra một loại đầu vào = số và một nút. Đoạn mã dưới đây, tạo một bảng với mỗi hàng hiển thị tên mục, một hộp để người dùng nhập số lượng và nút để bán sản phẩm.

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

Và đây là mã jquery/ajax của tôi:

$(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; 
     }); 

Bây giờ đến vấn đề này. Khi tôi cố gắng bán 2 đơn vị của vật phẩm đầu tiên (trong hàng đầu tiên), hình thức của tôi nghĩ rằng im nộp trường nhập cuối cùng (ở hàng cuối cùng), khi im không ..

Đây là những gì tôi nhận được trong bảng điều khiển trình duyệt khi tôi cố gắng để bán 2 đơn vị thuộc mục đầu tiên:

console.log (phản ứng): See my ajax response in console when i click sell item in the first row

console.log (dữ liệu): See my ajax data in console when i click sell item in the first row

tôi đã cố gắng để bắt đầu script js của tôi với:

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

thay vì

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

Nhưng nó đã không làm việc .. Bất cứ ý tưởng?

EDIT: tôi có thể tiếp cận vấn đề này một cách sai lầm .. Bây giờ im suy nghĩ có lẽ tôi nên tìm ra nút nào được nhấn và sau đó nhận giá trị các yếu tố trước bằng cách viết một cái gì đó như thế này:

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

Nhưng vẫn còn, số lượng của tôi không được xác định. Cần phải tìm một cách để có được giá trị mà ...

Cảm ơn trước

Answer 1

EDIT: Tôi có thể tiếp cận vấn đề này một cách sai lầm .. Bây giờ im nghĩ có lẽ tôi nên tìm nút đó là đã nhấp và sau đó nhận được giá trị của phần tử trước đó

Có bạn đã chính xác với điều này. Bạn nên sử dụng phương pháp này.

Tôi đã thực hiện một mẫu mã để bạn có thể sử dụng:

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

Vì vậy, đầu tiên, tôi cố định một số vấn đề trên ma cua ban. Giống như có cùng một số ID khi bạn đã thực hiện vòng lặp id='verktyg-first-td'.Vì vậy, tôi thay đổi điều đó để lớp học để thay thế.

Và tôi đã thay đổi cách bạn kích hoạt chức năng của mình. Thay vì kích hoạt khi biểu mẫu được gửi, hãy kích hoạt nó khi nút được nhấp.

Tuy nhiên, số lượng của tôi không xác định. Cần phải tìm một cách để có được giá trị mà ...

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

Vâng, đó sẽ làm việc nếu cấu trúc của bạn là:

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

Nhưng các yếu tố đầu vào bạn đang tìm kiếm là bên trong một số khác <td>.

Vì vậy, bạn phải tìm đầu tiên gần nhất <tr>

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

sau đó tìm input[type=number] đó.

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

Cập nhật:

if (isset ($ _ POST [ 'mục'])) dosent phát hiện các nút bấm và nói "index Không xác định: mục"

Đầu tiên để sửa lỗi này, hãy thêm lại các thuộc tính vào phần tử nút.

ví dụ:

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

sau đó thêm mã này dưới đây sau khi data[name] = value;

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