Prepopulate Values in token input textbox from database using PHP

Question

Below is my code For adding number of choices in text as tag using tokeninput.After Selecting tags while save button i will make selection as array and save it in database as US,Ireland in country column.After saving want to prepopulate save data as tag using jquery method.Below is a reference code for this process.

     <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"/>
      <link rel="stylesheet" href="styles/token-input.css" type="text/css" />
      <script type="text/javascript" src="src/jquery.tokeninput.js"></script>
<script>
      var country_list=[ 
{id: 1, name: "UK"}, 
{id: 2, name: "CANADA"}, 
{id: 3, name: "IRELAND"}, 
{id: 4, name: "SINGAPORE"}, 
{id: 5, name: "AUSTRALIA"}, 
{id: 6, name: "NEWZEALAND"}, 
{id: 7, name: "SWITZERLAND"}, 
{id: 8, name: "CYPRUS"}, 
{id: 9, name: "FRANCE"}, 
{id: 10, name: "MALAYSIA"}, 
{id: 11, name: "ITALY"}, 
{id: 12, name: "SWEDEN"}, 
{id: 13, name: "GERMANY"}, 
{id: 14, name: "USA"}, 
{id: 15, name: "DUBAI"}, 
{id: 16, name: "SPAIN"}, 
{id: 17, name: "LITHUANIA"}, 
{id: 18, name: "NETHERLANDS"}, 
{id: 19, name: "LATVIA"}, 
{id: 20, name: "SOUTH AFRICA"}, 
{id: 21, name: "OTHERS"} 
]; 
var selected_countries=<?php echo json_encode(explode(",",$country));?>; 
//alert(selected_countries);
var populate_list=[]; 
var index; 
for (index = 0; index < country_list.length; ++index) { 
console.log(country_list[index]); 
if(selected_countries.indexOf(country_list[index].name)>-1){ 

populate_list.push(country_list[index]); 
} 
} 
var prepopulate = { 
prePopulate : populate_list 
}; 

$("#country").tokenInput(country_list,prepopulate);
</script>

HTML Code

 <input type="text" name="country"  id="country">

And For saving result all selected text in database i used

AJAX code

var arr1 = $('#country').tokenInput("get");
            var names1 = [];
            $.each(arr1, function(i, obj)
            {
             names1.push(obj.name);
            });
            var country=names1.join();

And result Database Side AND UI Side

George Pant · Accepted Answer · 2016-05-06 12:20:25Z

1

From http://loopj.com/jquery-tokeninput/

prePopulate Prepopulate the tokeninput with existing data. Set to an array of JSON objects, eg: [{id: 3, name: "test"}, {id: 5, name: "awesome"}] to pre-fill the input.

var country_list=[ 
{id: 1, name: "UK"}, 
{id: 2, name: "CANADA"}, 
{id: 3, name: "IRELAND"}, 
{id: 4, name: "SINGAPORE"}, 
{id: 5, name: "AUSTRALIA"}, 
{id: 6, name: "NEWZEALAND"}, 
{id: 7, name: "SWITZERLAND"}, 
{id: 8, name: "CYPRUS"}, 
{id: 9, name: "FRANCE"}, 
{id: 10, name: "MALAYSIA"}, 
{id: 11, name: "ITALY"}, 
{id: 12, name: "SWEDEN"}, 
{id: 13, name: "GERMANY"}, 
{id: 14, name: "USA"}, 
{id: 15, name: "DUBAI"}, 
{id: 16, name: "SPAIN"}, 
{id: 17, name: "LITHUANIA"}, 
{id: 18, name: "NETHERLANDS"}, 
{id: 19, name: "LATVIA"}, 
{id: 20, name: "SOUTH AFRICA"}, 
{id: 21, name: "OTHERS"} 
]; 

var selected_countries=<?php echo json_encode(explode($country));?>; 
var populate_list=[]; 
var index; 
for (index = 0; index < country_list.length; ++index) { 

if(selected_countries.indexOf(country_list[index].name)>-1){ 
populate_list.push(country_list[index]); 
} 
} 
var prepopulate = { 
prepopulate : populate_list 
}; 

 $("#country").tokenInput(country_list,prepopulate);

edited May 6, 2016 at 12:20

answered May 6, 2016 at 10:23

George Pant

2,1171 gold badge11 silver badges15 bronze badges

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

8 Comments

Kavya Shree Over a year ago

Ya thts correct but i want to prepopulate from database value how can i do this.

George Pant Over a year ago

You should just use json_encode() to encode your data from php.If you want details on that just give me your php code

Kavya Shree Over a year ago

Nothing special with php code. i just got value from ajax as UK,Ireland and i insert that value in country field

Kavya Shree Over a year ago

if(isset($_POST['country'])) { $country = $_POST['country']; } else { $country=""; } $l2 = "UPDATE details SET career_aspiring = '$career_aspiring' , subject_want_study='$subject_want_study', level = '$level', country = '$country', specific_location ='$specific_location', specific_institution = '$specific_institution' , comments ='$comments' WHERE per_email='$per_email'";

George Pant Over a year ago

First of all is a bad idea to save all countries in the same column because then you cannot use this field in JOINS.But if you eventually decide to leave database structure as it is at least you should save id not name so you can use it later to prepopulate the input field

|

sacgro · Accepted Answer · 2016-05-06 11:00:21Z

1

Change your input text box to following:

<input type="text" name="country"  id="country" value='<?php echo  $country; ?>' data-country='<?php echo  $country; ?>'>

Then add prePopulate parameter like following:

prePopulate: $('#country').data('country')

edited May 6, 2016 at 11:00

answered May 6, 2016 at 10:34

sacgro

4592 silver badges6 bronze badges

6 Comments

Kavya Shree Over a year ago

I want to take that value from database.As i shown in picture. I want to retrieve UK and Ireland from database and prepopulate it dynamically

sacgro Over a year ago

It can be done in jquery itself but you are saving country name instead of id's in database. this will not match at frontend. Token matches id's

Kavya Shree Over a year ago

Then how can i do this. Give me some suggestion

Kavya Shree Over a year ago

Now i change it.i jsut saving id of corresponding data.and i tried with above code but its not prepopulated

sacgro Over a year ago

did you checked your browser console if there is any error

|

Collectives™ on Stack Overflow

Prepopulate Values in token input textbox from database using PHP

2 Answers 2

8 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related