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

Question

I have 3 columns

1. Country (id, country_name)
2. State (id, country_id, state_name)
3. 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.

Answer 1

So you are using <option value="<?php echo $country["id"]; ?>"><?php echo $country["name"]; ?></option> and when you submit the form you get the ID in PHP payload. When you receive the id, run a select query to get the name associated with the id. In this way, you do not need to change the javascript for other select as you haven't changed anything in your HTML and Javascript.

Answer 2

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>

Answer 3

The problem here is you want to get some informations outside the value of your input

That's why you will get the id instead of the name of the state !

<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["country_name"]; ?>"><?php echo $row["country_name"];?></option>
                                            <?php

                    echo "<option value='". $row['country_name']."'>".$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>

So now you will be able to post what you need to your db the value of your input will be the name of the state !

Cheers