php - 如何从自动完成中获取单击的输入单选值以将表单发送到 php 文件

Question

我正在使用自动完成功能进行输入，我的用户可以从数据库中选择多个用户，我想在我的表单中提交这些选择的用户，其中操作转到在数据库中执行 INSERT 的 php 文件。

所以这是输入，我希望所选用户显示在 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());
        });
    });

此外，这里是执行搜索的search.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;
}

现在单击的输入 type=radio 值包含用户的 ID 和名称，我希望 p#selecionados 中的用户名只是为了向他们显示他选择的内容，并发送所选用户的 ID 和名称提交我的表单时。

Answer 1

您可以在jquery中创建一个数组，这样，每当您从自动完成框中选择一个选项时..将该值放入jquery中的该数组中。我已经使用checkbox代替下面代码中的 radio-button ，每当用户选择任何选项时，数据都会插入到数组中，即:index 以及单击 insert 按钮时所选数据将显示在 p#selecionados 标记中，并且 ajax 将调用将所选数据发送到 php 页面。此外，我还添加了 value='". $id_user.", ". $name_user . "' 您可以使用带有分隔符 , 的 .split() 来分割它，以获得 userid 和 用户名。示例代码:

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 端，你需要使用 $_POST['data'] 获取该 array 即:data 然后使用 explode您的数组并根据您的要求使用它。