Каждый запрос ajax дает данные в ответе

Question

Следующий код дает одинаковый идентификатор продукта по каждому запросу . В чем проблема.

Это код формы, связанный с каждым продуктом.

<form action="" method="" id="formproduct"> 
    <input type="hidden" name="id" class="productid" 
    value="<?php echo $row['Product-id'];?>" > 
    <button name="submit" class="btn">Add To Cart</button> 
     </form> 

Это код запроса ajax.

var formData = { 
     'product': jQuery(".productid").attr("value") 
    }; 

jQuery.ajax({ 
      type: "POST", 
      url: "server-cart.php",///contain the url of ajax 
      data:formData, 
      dataType:"json", 

Здесь я получаю идентификатор из запроса.

$id=$_REQUEST["product"]; 

Answer 1

Так что я предполагаю, что у вас есть несколько форм на странице с рядом различных продуктов. Вы должны переписать свой сценарий в зависимости от правильной формы:

$("form").on("click", "button[name=submit]", function(){ 

    var form = $(this).closest("form"); // find the form to relate to 
    var data = { product: $(".productid", form).val() }; // here we fetch product id from the input inside the form 

    // do ajax-request 
    // ... 

    return false; 
}); 

Answer 2

.attr() возвращает оригинальный value набор на html, .val() возвращает текущие value из input элемента. Попробуйте заменить .val() для .attr() используйте .change() для получения тока value из input элемента

$("input").change(function() { 
 
    // `$(this).attr("value")` : `123` : original `value` set at `input` 
 
    // `$(this).val()` : current `value` of `input` element 
 
    console.log($(this).val(), $(this).attr("value")) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<input value="123" />

Answer 3

Вы должны любить

здесь вы многообразные формы я думаю

<form action="" method="" id="formproduct"> 
    <input type="hidden" name="id" class="productid" 
    value="<?php echo $row['Product-id'];?>" > 
    <button name="submit" class="btn" onclick="saveProduct(this)">Add To Cart</button> 
     </form> 

JQuery

function saveProduct(thisObj){ 
      //here we find productid value of current row 
      var formData = { 
        'product': jQuery(thisObj).closest(".productid").val(); 
       }; 

      jQuery.ajax({ 
      type: "POST", 
      url: "server-cart.php",///contain the url of ajax 
      data:formData, 
      dataType:"json", 
      success:function(data){ 
      } 
      }); 
}