CODEWITHSUNDEEP
phpjquerydatabasecodeigniterfetch
user3458883
user3458883

Reputation: 27

How to fetch the data from database while selecting a select option from jquery

I am using codeigniter for my project and I am passing array values on view.

Let me elaborate by giving a proper look to the view, controller and model structure.

Model:

public function getTournament() {
    $this->db->select('tourn_id,tourn_name,tourn_teams');
    $this->db->from('tournaments');
    $query = $this->db->get();
    return $query->result_array();
}

Controller

public function index() {
    $result['tournament']=$this->matches_model->getTournament();
    $this->template->set_layout('admin')->enable_parser(FALSE)->title('Add Matches - Cricnepal Live Update')->build('admin/add/matches_view', $result);
}

View:

<select name="tournament_match" class="form-control" id="tournament_match">
    <option value=''>--- Select Tournament ---</option>
    <?php 
        foreach ($tournament as $row):
            $match_TournamentName=$row['tourn_name'];
            $match_TournamentID=$row['tourn_id'];
            $teamlist=$row['tourn_teams'];
            echo '<option value='.$match_TournamentID.'>'.$match_TournamentName.'</option>'; 
        endforeach;
    ?>
</select>

Problem:

<select name="tournament_match" class="form-control" id="tournament_match">
      <option value="">--- Select Tournament ---</option>
      <option value="1">Cricnepal Cricket Tournament</option>
      <option value="2">Nepal Cricket Tournament</option>
</select>

I want to display a new select option field below it which shows the data of respected selected option value.

For example, if I select "Cricnepal Cricket Tournament" then I need to get all the associated data related to it from the database instantly using jQuery or other method so it can be added as a new option element.

Upvotes: 1

Views: 5105

Answers (2)

Mubashar Abbas
Mubashar Abbas

Reputation: 5673

Here is how your html will go:

<select name="tournament_match" class="form-control" id="tournament_match">
      <option value="">--- Select Tournament ---</option>
      <option value="1">Cricnepal Cricket Tournament</option>
      <option value="2">Nepal Cricket Tournament</option>
</select>
<select name="second_select" id="second_select"></select>

And your js will be:

$('#tournament_match').change(function() {
   var selected_option = $(this).val();
   $.ajax({
      url: <YOUR URL TO HANDLE THE REQUEST>+"/"+selected_option,
      type: 'post',
      cache: false,
      success: function(return_data) {
         $('#second_select').html(return_data);
      }
   });
});

And the php to handle the ajax request will be like this:

$newoptions = ['apples','oranges','bananas']; //values from the db or some api source.
$ret_val = '';
foreach($newoptions as $option) {
   $ret_val .= "<option>$option</option>";
}
echo $ret_val;

There you go buddy. I don't think you should have a problem anymore.

Upvotes: 1

Mubashar Abbas
Mubashar Abbas

Reputation: 5673

You can use a jquery 'ajax' call like below:

$('#tournament_match').change(function() {
   var selected_option = $(this).val();
   $.ajax({
      url: <YOUR URL TO HANDLE THE REQUEST>+"/"+selected_option,
      type: 'post',
      cache: false,
      success: function(return_data) {
         $('#second_select').html(return_data);
      }
   });
});

Where 'second_select' is the id of the second drop down.

Upvotes: 3

Related Questions