Dependent drop down displaying value id instead of displaying name on post submit

Question

I have 3 columns

Country (id, country_name)
State (id, country_id, state_name)
files_dev (id,country_name,state_name)

Country and State i am using onchange event handler to select element, then have it fire off an AJAX request to my PHP script every time the user selects country it will show related state names.

Problem is on POST SUBMIT i want to insert country name instead of its value id

This is the code i am using

<?php
        if ($country_result->num_rows > 0) {
        // output data of each row
        while($row = $country_result->fetch_assoc()) {
?>
    <option value="<?php echo $row["id"]; ?>">
<?php echo $row["country_name"]; ?></option><?php

I tried changing the $row["id"] to $row["country_name"], Any help here would be highly appreciated

index.php

<form class="form-horizontal" method="post" id="signin" enctype="multipart/form-data">

                            <div class="control-group">
                                    <label class="control-label" for="inputPassword"  placeholder="Select Gram Panchayat" ><strong>Select Gram Panchayat</strong></label>
                                        <div class="controls">
                                        <?php
                                        require_once('../admin/lib/db.php');
                                        $country_result = $conn->query('select * from countries');
                                        ?>
                                            <select name="country" class="chzn-select" id="countries-list" required>

                                        <?php
                                            if ($country_result->num_rows > 0) {
                                        // output data of each row
                                        while($row = $country_result->fetch_assoc()) {
                                            ?>
                                            <option value="<?php echo $row["id"]; ?>"><?php echo $row["country_name"];?></option>
                                            <?php

                    echo "<option value='". $row['id']."'>".$row['country_name'] .'</option>';

                                        }

                                    }
                                    ?>
                                            </select>
                                    </div>
                          </div>

                                    <div class="control-group">
                                    <label for="inputPassword" class="control-label"  placeholder="Select Village" ><strong><strong>Select Village</strong></strong></label>
                                        <div class="controls">
                                            <select name="state" id="states-list" required>


                                            </select>
                                        </div>
                          </div>

                                            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
                                            <script>
                                    $('#countries-list').on('change', function(){
                                        var country_id = this.value;
                                        $.ajax({
                                        type: "POST",
                                        url: "village_dev.php",
                                        data:'country_id='+country_id,
                                        success: function(result){
                                            $("#states-list").html(result);
                                        }
                                        });
                                    });
                                    </script>

village_dev.php

    <?php
   require_once('../admin/lib/db.php');
   error_reporting(0);
   $country_id = mysql_real_escape_string($_POST['country_id']);
   if($country_id!='')
   {
    $states_result = $conn->query('select * from states where country_id='.$country_id.'');
    $options = "<option value=''>Select Village</option>";
    while($row = $states_result->fetch_assoc()) {
    $options .= "<option value='".$row['state']."'>".$row['state']."</option>";
    }
    echo $options;
   }

   ?>

Let me know if i am missing anything here, i want to submit the value name not the id to the database.

if (isset($_POST['save'])){ $gp = $_POST['country']; $query = mysql_query("select * from files_dev where file = '$file' ")or die(mysql_error()); $count = mysql_num_rows($query); if ($count > 0){ ?> <script> alert('Files already Exist'); window.location = "upload_files_dev.php"; </script> <?php }else{ if(move_uploaded_file($file_loc,$folder.$final_file)){ mysql_query("insert into files_dev (id,gp,village,year,rec_type,file,type,size) values('','$gp','$village','$year','$rec_type','$file','$file_type','$file_size')")or die(mysql_error()); — manjoo
Sorry if u can understand my query there, i am inserting other records too. — manjoo
Hi Ankit bro i have pasted all the code needed kindly help see if we can display the name instead of passing the id to the database — manjoo

Ankit Singh Ankit Singh · Accepted Answer · 2018-01-17T12:44:30

Try data- attribute of html5:

change your country dropdown code to this:

<?php
require_once('../admin/lib/db.php');
$country_result = $conn->query('select * from countries');
?>
<select name="country" class="chzn-select" id="countries-list" required>
<?php
if ($country_result->num_rows > 0) {
    // output data of each row
    while($row = $country_result->fetch_assoc()) {
        echo '<option value="'.$row["country_name"].'" data-countryID="'.$row["id"].'">'.$row["country_name"].'</option>';
    }
}
?>
</select>

and change your ajax script with the following:

<script>
    $('#countries-list').on('change', function(){
        var country_id = $('#countries-list option:selected').data( 'countryID' );
        $.ajax({
            type: "POST",
            url: "village_dev.php",
            data:'country_id='+country_id,
            success: function(result){
                $("#states-list").html(result);
            }
        });
    });
</script>

Dependent drop down displaying value id instead of displaying name on post submit

2 Answers