如何从自动完成中获取单击的输入单选值以将表单发送到 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进行搜索：<?phpinclude_once "../connection/connection.php";if (isset($_POST['query'])) {    $link = new_db_connection();    $stmt = mysqli_stmt_init($link);    $output = '';    $input = $_POST['query'];现在单击的输入 type=radio 值包含用户的 id 和名称我希望p#selecionados中的用户名只是为了向他们展示他选择的内容，并在提交我的表单时发送选择的用户的 id 和名称。

Answer 1

您可以在 jquery 中创建一个array，因此，每当您从自动完成框中选择一个选项时..将该值放在 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']然后分解您的数组并根据您的要求使用它。