如何从自动完成中获取单击的输入单选值以将表单发送到 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 中创建一个array，因此，每当您从自动完成框中选择一个选项时..将该值放入 jquery 中的该数组中。我在下面的代码中使用checkbox 而不是radio-button，每当用户选择将数据插入数组的任何选项，即：index，当单击insert 按钮时，所选数据将显示在p#selecionados 标记中，并且还会调用 ajax 将您选择的数据发送到 php page.Also我已经添加了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'] 然后 explode 你的数组并根据你的要求使用它。