AJAX console.log возвращается неопределенным

Question

У меня есть два поля ввода внутри цикла while моей базы данных:

<input type="hidden" id="ID<?=$product['id'];?>" name="ID" value="<? 
=$product['id'];?>">

<input type="hidden"   id="name<?=$product['id'];?>" name="hidden_name" 
value="<?=$product['title'];?>">

Вот кнопка, которая запускает AJAX:

<input type="button" class="button" name="cartbtn" id="button<? 
=$product['id'];?>"  value="Quick Add-to-Cart">

Моя проблема возникает, когда я делаюthis:

<script type="text/javascript">

$(document).ready(function(data){

    $('.button').click(function(){

        var product_id = $(this).attr('id');
        var product_name = $('#name'+product_id).val();
        console.log(product_name);

    });
});

</script>

console.log(product_name); возвращается как неопределенное.

Нет проблем с var product_id = $(this).attr('id');, если I console.log(product_id) возвращает: «button6», например (как это должно).

Answer 1

Если console.log(product_id) возвращает button6, это означает, что ваш product_name равен namebutton6.Я полагаю, вы хотите, чтобы оно было name6

Поскольку вы слишком усложнили его, самый простой способ сделать это:

var product_name = $(`#name${product_id.slice(6)}`).val();

Вы используете метод slice(6), чтобы удалить первые шестьсимволы 'button'.

Answer 2

id="button<?=$product['id'];?>"

Не должно быть «кнопки» перед ней, поэтому:

id="<?=$product['id'];?>" 

правильно.Я забываю, извините.