adds php data with ajax

Question

I have this code:

My mysql table 'countries' contains the columns: id and name

<input type="text" name="country" id="country" class="form-control input-lg" autocomplete="off" placeholder="Type Country Name" />
   
<input type="hide" name="id_country" id="id_country" />

<script>
$(document).ready(function(){
 
    $('#country').typeahead({
        source: function(query, result)
        {
            $.ajax({
                url:"fetch.php",
                method:"POST",
                data:{query:query},
                dataType:"json",
                success:function(data)
                {
                    result($.map(data, function(item){
                            return item;
                        }));
                }
            })
        }
    });
});
</script>

<?php
//fetch.php
$request = mysqli_real_escape_string($connect, $_POST["query"]);
$query = "
 SELECT * FROM countries WHERE name LIKE '%".$request."%'
";

$result = mysqli_query($connect, $query);

$data = array();

if(mysqli_num_rows($result) > 0)
{
    while($row = mysqli_fetch_assoc($result))
    {
        $data[] = $row["name"];
    }
    echo json_encode($data);
}

?>

The above code is a demo, the full version is here

How can I import the country id and insert it into the id_country input?

Thank you!

Jan Wendland · Accepted Answer · 2018-03-15 11:30:09Z

2

Try adding a change listener and use it to assign the ID when a change fires on the typeahead input element.

$('#country').change(function(ev){
    var id = ($(this).typeahead("getActive") || {}).id;
    $('#id_country').val(id);
});

PS: You also have to change

$data[] = $row["name"];

to

$data[] = $row;

so that the ID is also part of the JSON encoded data which then should look like:

[{ "id": 1, "name": "Australia"}, { "id": 2, "name": "Germany"}]

edited Mar 15, 2018 at 11:30

answered Mar 6, 2018 at 13:22

Jan Wendland

1,45010 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Hexman Over a year ago

Where do I add your code and how do I get the id for the php country? Thank you!

Jan Wendland Over a year ago

The first part needs to be added in the $(document).ready block

Hexman Over a year ago

I made the suggested changes but the console is red: Uncaught TypeError: it.toLowerCase is not a function at Typeahead.matcher (bootstrap3-typeahead.min.js:1) at bootstrap3-typeahead.min.js:1 at Function.grep (jquery.min.js:2) at Typeahead.process (bootstrap3-typeahead.min.js:1) at e (jquery.min.js:2) at Object.success (full_page.php:195) at i (jquery.min.js:2) at Object.fireWith [as resolveWith] (jquery.min.js:2) at A (jquery.min.js:4) at XMLHttpRequest.<anonymous> (jquery.min.js:4)

Jan Wendland Over a year ago

Can you check in the network tab of your developer tools what is being returned by fetch.php and post the contents here?

Hexman Over a year ago

I solved I added to the result result($.map(data, function(item){ var id = data["Id"]; $('#id_autoritate_contractanta').val(id); return item;

|

T0wn3R · Accepted Answer · 2018-03-06 13:11:03Z

0

You can do everything in the same query

$query = "INSERT INTO table (country_id) SELECT id FROM table";

just change the table value

answered Mar 6, 2018 at 13:11

T0wn3R

117 bronze badges

Comments

Sathishkumar · Accepted Answer · 2018-03-06 13:32:59Z

0

Try this one

$('#id_country').val(<country-code>);

For this you have to return both country name and id from PHP. When user selects the country you can trigger the click event to insert the selected country id value into input.

answered Mar 6, 2018 at 13:32

Sathishkumar

3,7932 gold badges36 silver badges39 bronze badges

Collectives™ on Stack Overflow

adds php data with ajax

3 Answers 3

13 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

13 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related