Как я могу получить значение входного радиоканала по автозаполнению для отправки в форму в php файл

Question

Я делаю ввод с автозаполнением, где мой пользователь может выбрать нескольких пользователей из базы данных, и я хочу отправить этих избранных пользователей в мою форму, где действие переходит к файлу php, который выполняет INSERT в базе данных.

Итак, это ввод, я хочу, чтобы выбранные пользователи отображались в p # selecionados , но пользователь выбирает по одному:

<form id="formCriaJogo" method="post" action="./components/insert.php">
    <label>Other users</label>
    <input type="text" name="autor" id="autor" placeholder="Write users name" />
    <div id="autorLista"></div>
    <p id="selecionados"></p>

    <button type="submit">Insert</button>
</form>

И это jquery код для автозаполнения:

$(document).ready(function() {
        $('#autor').keyup(function() {
            var query = $(this).val();;

            if (query != '') {
                $.ajax({
                    url: "./components/search.php",
                    method: "POST",
                    data: {
                        query: query
                    },
                    success: function(data) {
                        $("input#autor").css("margin-bottom", '0');
                        $("#autorLista").css("display", 'block');
                        $('#autorLista').fadeIn();
                        $('#autorLista').html(data);
                    },
                    error: function(error) {
                        console.log(error);
                    }
                });
            }
        });

        $('input#autor').on('change', function() {
             alert($('input[name=autor]:checked', '#formCriaJogo').val());
        });
    });

Также есть поиск. php, который выполняет поиск:

<?php

include_once "../connection/connection.php";

if (isset($_POST['query'])) {
    $link = new_db_connection();
    $stmt = mysqli_stmt_init($link);
    $output = '';
    $input = $_POST['query'];

    $query = "SELECT id_user, nome_user FROM users WHERE nome_user LIKE CONCAT(?, '%')";

    mysqli_stmt_prepare($stmt, $query);
    mysqli_stmt_bind_param($stmt, 's', $input);
    mysqli_execute($stmt);
    mysqli_stmt_bind_result($stmt, $id_user, $name_user);
    mysqli_stmt_store_result($stmt);

    if (mysqli_stmt_num_rows($stmt) > 0) {
        while (mysqli_stmt_fetch($stmt)) {
            $output .= "<input type='radio' value='" . $id_user . "' name='autor'>" . $name_user . "<br>";
        }
    } else {
        $output .= '<p>The user your looking for doesn't exist.</p>';
    }
    echo $output;
}

Теперь выбранный тип ввода = значение радиосвязи, которое содержит идентификатор и имя пользователя. Я хочу, чтобы имя пользователя в p # selecionados просто показывало им, что он выбрал, а также отправляло имя и имя выбранного пользователя при отправке моей формы.

Answer 1

Вы можете создать array в jquery, поэтому всякий раз, когда вы выбираете опцию из поля автозаполнения ... поместите это значение в этот массив в jquery. Я использовал checkbox вместо radio-button ниже код и всякий раз, когда пользователь выбирает любую опцию, данные будут вставляться в массив, например: index, и при нажатии кнопки insert выбранные данные будут отображаться в теге p#selecionados, а также ajax будет вызывать для отправки выбранного данные на php странице. Также я добавил value='" . $id_user."," . $name_user . "', вы можете разделить это, используя .split() с разделителем ,, чтобы получить userid и username. Пример кода:

var index = [];

//when check-box is changed
$('input[name=autor]').change(function() {

  //checking if checkbox is check put it in array 
  if ($(this).is(':checked')) {
    index.push($(this).val());
    console.log(index)
  } else {
    //if uncheck remove the element from array
    if ((index1 = index.indexOf($(this).val()) !== -1)) {
      index.splice($.inArray(index1, index), 1);
      console.log("remove");
    }

  }

});
//when insert button is click
$("button").click(function() {
  //clear the p tag content
  $("p#selecionados").html("");
  for (var i = 0; i < index.length; i++) {
    //append all selected check box
    $("p#selecionados").append(index[i] + "<br />");
    console.log("userid & username" + index[i]);

  }

  if (index != '') {
    $.ajax({
      url: "yourphp_page_name",
      method: "POST",
      data: {
        //sending array to php
        data: index
      },
      success: function(data) {
        //do something
      },
      error: function(error) {
        //do something
      }
    });
  }


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input type='checkbox' value='" . $id_user."," . $name_user . "' name='autor'>" . $name_user . <br/>
<input type='checkbox' value='" . $id_user."," . $name_user . "' name='autor'>" . $name_user . <br/>
<button type="submit">Insert</button> <br/><br/> Selected data :
<p id="selecionados"></p>

Затем на вашей стороне php вам нужно получить это array, то есть: data с использованием $_POST['data'] и затем взорваться ваш массив и используйте его согласно вашему требованию.