如何从自动完成中获取单击的输入单选值以将表单发送到 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'];

现在单击的输入 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() {&nbsp; //checking if checkbox is check put it in array&nbsp;&nbsp; if ($(this).is(':checked')) {&nbsp; &nbsp; index.push($(this).val());&nbsp; &nbsp; console.log(index)&nbsp; } else {&nbsp; &nbsp; //if uncheck remove the element from array&nbsp; &nbsp; if ((index1 = index.indexOf($(this).val()) !== -1)) {&nbsp; &nbsp; &nbsp; index.splice($.inArray(index1, index), 1);&nbsp; &nbsp; &nbsp; console.log("remove");&nbsp; &nbsp; }&nbsp; }});//when insert button is click$("button").click(function() {&nbsp; //clear the p tag content&nbsp; $("p#selecionados").html("");&nbsp; for (var i = 0; i < index.length; i++) {&nbsp; &nbsp; //append all selected check box&nbsp; &nbsp; $("p#selecionados").append(index[i] + "<br />");&nbsp; &nbsp; console.log("userid & username" + index[i]);&nbsp; }&nbsp; if (index != '') {&nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; url: "yourphp_page_name",&nbsp; &nbsp; &nbsp; method: "POST",&nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; //sending array to php&nbsp; &nbsp; &nbsp; &nbsp; data: index&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; success: function(data) {&nbsp; &nbsp; &nbsp; &nbsp; //do something&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; error: function(error) {&nbsp; &nbsp; &nbsp; &nbsp; //do something&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; }});<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']然后分解您的数组并根据您的要求使用它。