Populating Dropdown dynamically with each dowpdown using ajax PHP

Question

This is my php CodeIgniter Code which is generating 30 Dropdowns which is also populated from database and that is workig absolutly fine. here is the preview of my dropdown list. every list will be populated with the related paraller field.

<?php for($i=1; $i<=30; $i++){ ?>
<div class="form-group c">
    <div class="col-sm-12">
        <div class="input-group">
            <div class="col-xs-12 col-sm-12 <?php if (form_error('iat_code_'.$i)) { echo "has-error";} ?>">
                <?php
                          $itm_iat_codes = $itm_iat_code_1.$i;
                          if(isset($itm_iat_codes)){$itm_iat_codes;}else{$itm_iat_codes = "";}
                          echo form_dropdown(
                              'iat_code_'.$i,
                              $ProductAttributeTitle,'',
                              'class="col-xs-12 col-sm-6 required-field form-control"  
                              id="iat_code_'.$i.'" placeholder="IAT Code" tabindex="1" data-style="form-control" required');
                ?>
            </div>
            <?php echo form_error('iat_code_'.$i, '<div for="iat_code_'.$i.'" class="alert-danger">', '</div>'); ?>
        </div>
    </div>
</div>
<?php    }?>

Here is another Code which is also generating 30 emppty dropdowns and these will be filled up by using ajax. PHP Code

`<?php for($i=1; $i<=30; $i++){ ?>
<div class="form-group c">
    <div class="col-xs-12 col-sm-12">
        <div class="input-group">
            <select name="istbs_code_<?php echo $i; ?>" class="col-xs-12 col-sm-6 required-field form-control" id="istbs_code_<?php echo $i; ?>" placeholder="ISTBS Code" tabindex="1" data-style="form-control">
                <option value="">Select Option</option>
            </select>
        </div>
    </div>
</div>
<?php } ?>`

Here is my ajax code that populates other dropdown from database.

$("#iat_code_1").change(function(){
        var json = {};
        var abc = json['iat_code_1'] = $(this).val();
        var request = $.ajax({
            url: "<?php echo base_url($controller.'/get_product_attributes'); ?>",
            type: "POST",
            data: json,
            dataType: "html",
            success : function(response){
                $("#istbs_code_1").html(response);
            }
        });   
    });

Now problem is that which i'm facing is in ajax, if i'm populating all 30 dropdown with each related for that purpose i've to make 30 ajax functions but i want to make it with only one ajax function, is it posible to do it? if any one know please help.

Why don't u fetch all the options list for those 30 drop-down lists in that single Ajax call & parse those in client-side then place them in respective drop-down lists? — Suresh
– Suresh, Commented May 3, 2017 at 5:28
I didn't got your point will you please clear it more? Thanks — Salman Khan Sohoo
– Salman Khan Sohoo, Commented May 3, 2017 at 5:33
Shared a sample code with you. Check that once. Hope that'll help you out. — Suresh
– Suresh, Commented May 3, 2017 at 6:49

Ashish Mashru · Accepted Answer · 2017-05-03 05:36:30Z

1

Here you can fetch all the dropdown data by using single ajax call but after that you need to do client side validation as per requirnment.

answered May 3, 2017 at 5:36

Ashish Mashru

113 bronze badges

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

4 Comments

Salman Khan Sohoo Over a year ago

where to fetch?

Ashish Mashru Over a year ago

on load you can make ajax call and after that you need to validate all the data in client side.

Salman Khan Sohoo Over a year ago

Tried all but i want to use one function only to which works on all 30 dropdowns, otherwise its working fine with each seperate function.

Ashish Mashru Over a year ago

You can make one function but still after that every time on select you have to call this function which is similler to 30 ajax call.

Gauri Bhosle · Accepted Answer · 2017-05-03 06:46:26Z

You don't have to write ajax call 30 times . Just create one function which calls ajax and on change event call that function as shown below. and even you don't have to write change event 30 time just add one common class (here eg.dropchange ) to all dropdown as shown below and change dropdown change event accordingly

`<?php for($i=1; $i<=30; $i++){ ?>
<div class="form-group c">
    <div class="col-xs-12 col-sm-12">
        <div class="input-group">
            <select name="istbs_code_<?php echo $i; ?>" class="dropchange col-xs-12 col-sm-6 required-field form-control" id="istbs_code_<?php echo $i; ?>" placeholder="ISTBS Code" tabindex="1" data-style="form-control">
                <option value="">Select Option</option>
            </select>
        </div>
    </div>
</div>
<?php } ?>`

        $(document).on("change",".dropchange ",function(){
           var thisid=this.id;
            var json = {};
            var abc = json['iat_code_1'] = $(this).val();
            var request = callajax(thisid);
        });

    function callajax(thisid){
    $.ajax({
                url: "<?php echo base_url($controller.'/get_product_attributes'); ?>",
                type: "POST",
                data: json,
                dataType: "html",
                success : function(response){
                    $("#"+thisid).html(response);
                }
            });   
    }

Suresh · Accepted Answer · 2017-05-03 06:48:25Z

Here is a sample code which fetching data by single Ajax call & repopulate those data in the dynamically created dropdown list.

client Side file(index.php)

<?php
error_reporting(E_ALL);
ini_set('display_errors', '1');
?>

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript">
    $( document ).ready(function() {
        console.log( "ready!" );

        $.ajax({
            method: "GET",
            url: "dropDownList.php",
        }).done(function( response ) {
            console.log('Response Data', response);

            $.each( response, function( key, value ) {

                $.each( value, function( key1, value1 ) {
                    console.log( "KEY1 : "+key1+", VALUE1 : " + value1['value'] );

                    var option_value = value1['value'];
                    var option_text = value1['text'];
                    var dd_option_list = "<option value='"+option_value+"'>"+option_text+"</option>";

                    $('#dropdown_'+key).append(dd_option_list);
                });
            });
        });

    });
</script>
</head>
<body>

<?php

    $noOfDropDownList = 3;

    for ($i=1; $i <= 3 ; $i++) {
        echo "<select id='dropdown_$i' name=''>";
        echo "</select><br>";
    }
?>

</body>
</html>

Server Side FIle (dropDownList.php)

<?php
$dropdownList[1][] = array('value' => 'apple','text' => 'apple');
$dropdownList[1][] = array('value' => 'mango','text' => 'mango');
$dropdownList[1][] = array('value' => 'bananan','text' => 'bananan');

$dropdownList[2][] = array('value' => 'cat','text' => 'cat');
$dropdownList[2][] = array('value' => 'dog','text' => 'dog');
$dropdownList[2][] = array('value' => 'rat','text' => 'rat');

$dropdownList[3][] = array('value' => 'google','text' => 'google');
$dropdownList[3][] = array('value' => 'apple','text' => 'apple');
$dropdownList[3][] = array('value' => 'microsoft','text' => 'microsoft');

header('Content-Type: application/json');
echo json_encode($dropdownList);

Hope, it'll help you fig. out how to impliment such functionality in your context.

Collectives™ on Stack Overflow

Populating Dropdown dynamically with each dowpdown using ajax PHP

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related