Как отправить форму только с выбранным значением input внутри php foreach?

Question

Всем привет. Пол дня мучаюсь этим вопросом, если кто-то покажет наглядно станет на 1 вопрос меньше и на одного знающего больше.

В общем я построил список пользователей и теперь хочу отправить id выбранного пользователя, но проблема в том что отправляется только первый id в списке а не тот по которому я кликаю.

<tr data-id="'.$inv_user["user_id"].'" class="list-group-item"></tr>
<tr data-id="'.$inv_user["user_id"].'" class="list-group-item"></tr>
<tr data-id="'.$inv_user["user_id"].'" class="list-group-item"></tr>
<tr data-id="'.$inv_user["user_id"].'" class="list-group-item"></tr>
<tr data-id="'.$inv_user["user_id"].'" class="list-group-item"></tr>

//Где
//<tr data-id="2" class="list-group-item"></tr>
//<tr data-id="3" class="list-group-item"></tr>
//<tr data-id="4" class="list-group-item"></tr>
//<tr data-id="6" class="list-group-item"></tr>
//<tr data-id="14" class="list-group-item"></tr>

Т.к это цикл то input находится в каждом <tr>

<tr data-id="'.$inv_user["user_id"].'" class="list-group-item">
  <form>
   <input data-id="'.$inv_user["user_id"].'" type="hidden" name="ref_id" value="'.$inv_user["user_id"].'">
   <button type="submit" class="btn btn-primary bi bi-people submit_id"></button>
</form>
</tr>

Кликая на любой <button> я получаю '.$inv_user["user_id"].' первого в списке

$('.submit_id').click(function (e) {

    e.preventDefault();

    let ref_id = $('input[name="ref_id"]').val()

    $.ajax({
        url: 'app/php/ajax.php',
        type: 'POST',
        dataType: 'json',
        data: {
            action: "submit_id",
            ref_id: ref_id

        },
        success (data) {
        
            if (data.status === true) {
                
                console.log(data)

            } else{

                console.log(data)

            }
        }

    })

})

//Результат
//{status: true, id: "2"} т.е я получаю id первого в списке а не например последнего 14 по которому кликаю.

Заранее благодарю!

p.s Методом тыка с подсказкой из первого комментария js и результат изменился так, теперь другая задача, убрать название атрибута name:

$('form').submit(function (e) {

    e.preventDefault();

    //let ref_id = $('input[name="ref_id"]').val();
    //$(e.target.closest('form')).serialize();
    let ref_id = $(e.target.closest('form')).serialize();

    $.ajax({
        url: 'app/php/ajax.php',
        type: 'POST',
        dataType: 'json',
        data: {
            action: "submit_id",
            ref_id: ref_id

        },
        //data: $(e.target.closest('form')).serialize(),
        success (data) {
        
            if (data.status === true) {
                
                console.log(data)

            } else{

                console.log(data)

            }
        }

    })

})
//Результат
//{status: true, id: "ref_id=6"} id верный по клику
//но приставка ```ref-id=``` никак не убирается,
//даже если уберу из самого ```input``` атрибут ```name="ref_id"```
//в таком случае я получу ```{status: true, id: "6="}``` что совсем не понятно.

Answer 1

Зачем вам форма если вы ее толком не используете? оставьте просто строку

<tr data-id="{$inv_user[user_id]}">....
  <button class="send">отправить</button>

и обработчик клика

$(".send").click(function(){
    let data = { 
          action: 'submit_id', 
          ref_id: $(this).closest('tr').data('id') 
       };

    $.post(".app/php/ajax.php", data, function(data){
       console.log(data);
    });
});

еще проще будет прописать data-атрибут прямо у самой кнопки. По крайней мере если это единственное его предназначение, то точно.

БЛОГ НА HUSL

Как отправить форму только с выбранным значением input внутри php foreach?

Ответы (1 шт):