时间戳

首页 > 解决方案 > 单击提交按钮或搜索按钮后，在 URL 中动态获取国家/地区的 id

php - 单击提交按钮或搜索按钮后，在 URL 中动态获取国家/地区的 id

问题描述

这是controller.php

 <?php
class Autocomplete extends CI_Controller
{
    public function __construct()
    {
        parent::__construct();
        $this->load->model('datacomplete');
    }
    public function index($id)
    {
        echo $id;
        $this->load->view('view_demo', $data);
    }
    public function GetCountryName()
    {
        $keyword = $this->input->post('keyword');
        $data    = $this->datacomplete->GetRow($keyword);
        echo json_encode($data);
    }
}
?>

这是一个模型

<?php
class Datacomplete extends CI_Model
{

    public function GetRow($keyword)
    {
        $this->db->order_by('id', 'DESC');
        $this->db->like("name", $keyword);

        return $this->db->get('autocomplete')->result_array();
    }

}

这是 view.php

<!DOCTYPE html>
<html>

<head>
    <!-- Latest compiled and minified CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- Latest compiled and minified JavaScript -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
    </script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js">
    </script>
    <script src="<?php echo base_url(); ?>assets/custom.js">
    </script>
    </link>
</head>

<body style="background-color: #000000;">
    <?php echo $id= 1; ?>
    <form action="<?php echo base_url('autocomplete/index/' .$id); ?>" method="post">
        <div class="row">
            <center>
                <h2 style="color: #fff;">
                    AUTOCOMPLETE FORM FROM DATABASE USING CODEIGNITER AND AJAX
                </h2>
            </center>
            <div class="col-md-4 col-md-offset-4" style="margin-top: 200px;">
                <label class="control-lable" style="color: #fff;">
                    Country Name
                </label>
                <input autocomplete="off" class="form-control" id="country" name="country" placeholder="Type to get an Ajax call of Countries" style="height:70px" type="text">
                <ul aria-labelledby="dropdownMenu" class="dropdown-menu txtcountry" id="DropdownCountry" role="menu" style="margin-left:15px;margin-right:0px;">
                </ul>
                <input type="submit">
                </input>
                </input>
            </div>
        </div>
    </form>
</body>

</html>

这是 custom.js 文件

$(document).ready(function() {
    $("#country").keyup(function() {
        $.ajax({
            type: "POST",
            url: "http://localhost/codeajax/autocomplete/GetCountryName",
            data: {
                keyword: $("#country").val()
            },
            dataType: "json",
            success: function(data) {
                if (data.length > 0) {
                    $('#DropdownCountry').empty();
                    $('#country').attr("data-toggle", "dropdown");
                    $('#DropdownCountry').dropdown('toggle');
                } else if (data.length == 0) {
                    $('#country').attr("data-toggle", "");
                }
                $.each(data, function(key, value) {
                    if (data.length >= 0)
                        $('#DropdownCountry').append('<li role="displayCountries" ><a role="menuitem dropdownCountryli" class="dropdownlivalue">' + value['name'] + '</a></li>');
                });
            }
        });
    });
    $('ul.txtcountry').on('click', 'li a', function() {
        $('#country').val($(this).text());
    });
});

单击提交按钮后，我想在 URL 中动态获取国家/地区的 ID。现在我使用静态传递 id 作为 1。该表有两列 id 和国家名称。当我单击提交按钮时，如何将 id 动态传递给 url。我无法从数据库中动态获取 id，即当我点击提交时应该重定向到带有国家 id 的新页面或在新页面中回显 $id 以及它应该向我显示国家 id 的 URL

标签： phpmysqlcodeigniter

解决方案

您可以使用 javascript 来实现它。

首先更改表格： 

<form action="<?php echo base_url('autocomplete/index/' .$id); ?>" method="post">

至 ： 

<form method="post" id="countryForm">

然后更改提交按钮： 

<input type="submit">

至 ： 

<input type="submit" id="submitForm" disabled>

然后应用以下 javascript 代码： 

$(document).ready(function() {
    $("#country").keyup(function() {
        $.ajax({
            type: "POST",
            url: "http://localhost/codeajax/autocomplete/GetCountryName",
            data: {
                keyword: $("#country").val()
            },
            dataType: "json",
            success: function(data) {
                if (data.length > 0) {
                    $('#DropdownCountry').empty();
                    $('#country').attr("data-toggle", "dropdown");
                    $('#DropdownCountry').dropdown('toggle');
                } else if (data.length == 0) {
                    $('#country').attr("data-toggle", "");
                }
                // Assign each country id into each country list `data-` element
                $.each(data, function(key, value) {
                    if (data.length >= 0)
                        $('#DropdownCountry').append('<li role="displayCountries" ><a role="menuitem dropdownCountryli" data-countryid="' + value['id'] + '" class="dropdownlivalue">' + value['name'] + '</a></li>');
                });
            }
        });
    });
    $('ul.txtcountry').on('click', 'li a', function() {
        $('#country').val($(this).text());
        $('#countryForm').attr('action', '<?php echo base_url('autocomplete/index/'); ?>' + $(this).data('countryid'); // set new form action which contain country id
        $('#submitForm').removeAttr('disabled'); // enable the submit button after one country is selected
    });
});

推荐阅读