How to pass an ajax selected dependent dropdown option to mysql database in codeigniter

Question

I have two dependent dropdown box in a form. From them, I will use one dependent dropdown box's selected option to update a column's fields in a table in the DB. But, I really can't figure out, how exactly can I fetch the selected option from this dependent dropdown box and pass it to the database after I press the submit button of the form.

I am using ajax to do this task. I've followed some tutorials, but they only show, how to add options dynamically in a dependent dropdown box without any submit button. But, I need to pass a dependent dropdown option's value which I've selected from the dropdown box, to DB to update a column after pressing the submit button.

Here's my controller:

public function fetch_session() {


                if($this->input->post('subject'))
                {
                    echo $this->Result_Model->fetch_session($this->input->post('subject'));
                }

                if($this->input->post('syllabus'))
                {
                    echo  $this->Result_Model->fetch_syllabus($this->input->post('syllabus'));
                } 

            }

Here's my Model:

public function fetch_session($subject) {
                $this->db->select('session');
                $this->db->group_by('session');
                $this->db->from('student');
                $this->db->where('subject',$subject);
                $query = $this->db->get();

             $output = '<option value="">Select Session</option>';
        foreach ($query->result() as $row) {
  $output .= '<option value="'.$row->subject.'">'.$row->session.'</option>'; 
              }
              return $output;
             }


        public function fetch_syllabus($syllabus) {
            $this->db->select('profile');
            $this->db->group_by('profile');
            $this->db->from('syllabus');
            $this->db->where('subject',$syllabus);
            $query = $this->db->get();
            $output = '<option value="">Select Syllabus</option>';
            foreach ($query->result() as $row) {
  $output .= '<option value="'.$row->subject.'">'.$row->profile.'</option>';
              }
              return $output;
        }

Here's my View:

<body>
    <div class = "container" align = "center">
    <br><br>

    <?php echo form_open('Result_Controller/fetch_session'); ?> 

    <label>Subject</label>

    <select class="col-sm-2 custom-select custom-select-sm" 
        name="subjects" id="subjects">
    <option value = "">Select Subject</option>
    <option value = "CSE">CSE</option>
        <option value = "Fisheries">Fisheries</option>
        <option value = "Agriculture">Agriculture</option>
    <option value = "NFS">NFS</option>
        </select>                   
        <br><br>

  <label>Session</label>
   <select class="col-sm-2 custom-select custom-select-sm" name="session" id="session">
    <option value="">Select Session</option>  
  </select>
    <br><br>

      <label>Syllabus</label>
      <select class="col-sm-2 custom-select custom-select-sm" name="syllabus" id="syllabus">
      <option value="">Select Syllabus</option> 
      </select>
      <br><br>
      <input type="submit" value="Submit">
       </form>
</div>

<script src = "<?php echo base_url('/js/jquery-3.js') ?>"></script>
<script src = "<?php echo base_url('bootstrap/js/bootstrap.min.js') ?>"></script>

</body>
</html>

<script>
$(document).ready(function() {
    $('#subjects').change(function() {
        var subject = $('#subjects').val();

        if(subject != '')
        {
            $.ajax({
    url:"<?php echo base_url();?>/Result_Controller/fetch_session",
    method: "POST",
    data:{subject:subject},
    success:function(data)
    {                
            $('#session').html(data);
            }
        });
    }

    if(subject != '')
    {
         $.ajax({
        url:"<?php echo base_url();>/Result_Controller/fetch_session",
        method: "POST",
        data:{syllabus:subject},
        success:function(data)
        {
        $('#syllabus').html(data);
          }
        });
            } 
    });
});
</script>

I've done as far as I could understand and may be wasted my last 10 hours. I know it's an incomplete and even may be a wrong code . But I need to know, what I should do further. I'm working in CI for a while but I'm completely new in Ajax. So, if anyone thinks that, I may need to read some resource first, please share some. I've already read a bunch of articles regarding this problem but nothing has helped much till now.

Thanks in advance...

Keith · Answer 1 · 2019-08-28T02:29:31.340

0

In your view you should remove this part as you trigger the ajax post from your script:

<?php echo form_open('Result_Controller/fetch_session'); ?> </form

And then in your script change your submit button to a <input type="button id="submitbtn" value="Submit"> and since you want to trigger your update after pressing submit button change the event that holds the ajax post to click event of the submitbtn button.

edited Aug 28 '19 at 02:29

answered Aug 28 '19 at 00:49

Keith

276
2
14

Well, the options of first dropdown box(subject) can be easily posted to controller and I can print it in controller too, as the options are inserted in static way. But, I can't post the options of dependent dropdown box to the controller. They are dynamically fetched from the database, not statically. Can you just tell me, how can I just print the selected option from the dependent dropdown box in the controller? In this case, it's the session and syllabus box. – Ashik Aug 28 '19 at 08:59
you can do `$('#optionID :selected').text()` to get the selected value from your select component. – Keith Aug 28 '19 at 09:22
Sorry but I really can't get this thing inside my head. Can you please give some code snippet? – Ashik Aug 28 '19 at 14:36
You can check this link on how to get the selected option in a dropdown using jquery https://stackoverflow.com/questions/10659097/jquery-get-selected-option-from-dropdown – Keith Aug 29 '19 at 00:13
Oh man!! I've finally made it work. The solution was not that tough. But as I'm new in ajax, it was a bit tough for me to find the problem. And your given link has really helped me. Many many thanks to you. :-D – Ashik Aug 31 '19 at 17:26
@Drowning_Prince no worries glad that I helped. – Keith Sep 01 '19 at 12:54
Keith bro, I'm facing a new problem similar to this. This time, I've a dependent dropdown box in another page. What I need to do is, I've to fetch value from my current page's dependent dropdown box and send that value to that another page when I click 'Submit'. And when I click Submit, I also will be redirected to that another page. Now the other page's dependent dropdown box will use this fetched value as condition and get its own options from database. – Ashik Sep 04 '19 at 18:04
I can simply post data from ajax using ` $('#submitbtn').click(function() ` But I when I redirect to that page, I can't find the values that I just posted from ajax while clicking 'Submit'. And for this, the other page's dropdown box doesn't fetch any value from database. What is the reason? – Ashik Sep 04 '19 at 18:09
I can help you with that but it is much better if you post that problem properly here in SO they might have much better answers than I have. – Keith Sep 05 '19 at 00:15

How to pass an ajax selected dependent dropdown option to mysql database in codeigniter

1 Answers1