title: Ajax Php dependent dropdown select - How to post name of city instead id into database (submit from data)?
body: <p>Few days I try to solve problem but no luck.
  Problem is next:</p>
  
  <ul>
  <li>Web form with dependent dropdown select box where user can select his
  city, zip and street and that work but.</li>
  <li>When I submit form in my database no <code>city_name</code> (text) - only <code>city_id</code> (number/value).</li>
  </ul>
  
  <p>So, question is - How to post <code>city_name</code> in database? User is from Rome and I Rome (text) is submited not <code>city_id</code> (number). </p>
  
  <p>Select input:</p>
  
  <pre><code>&lt;div class="form-group"&gt;
      &lt;label class="col-md-4 control-label" for="grad"&gt;City:*&lt;/label&gt;
      &lt;div class="col-md-4"&gt;
          &lt;select type="text" name="city_name" id="city_name" class="form-control input-sm"&gt;
                      &lt;option value=""&gt;&lt;/option&gt;
                      &lt;option value="999"&gt;---Enter city yourself---&lt;/option&gt;
                      &lt;?php $sql_query="SELECT * FROM city_table order by city_id asc";
                            $result=mysqli_query($dbconfig,$sql_query);
                            while($row=mysqli_fetch_array($result,MYSQLI_ASSOC)){
                      ?&gt;
                      &lt;option value="&lt;?php echo $row['city_id'].'_'.$row['city_name'];?&gt;"&gt;&lt;?php echo $row['city_name'];?&gt;&lt;/option&gt;
                      &lt;?php }?&gt;
                  &lt;/select&gt;
         &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;!-- Select Basic --&gt;
  &lt;div class="form-group"&gt;
      &lt;label class="col-md-4 control-label" for="post_no"&gt;ZIP code:*&lt;/label&gt;
      &lt;div class="col-md-4"&gt;
          &lt;select name="zip_name" id="zip_name" class="form-control input-sm" onchange="recalculate_price();"&gt;
  
          &lt;/select&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;!-- Select Basic --&gt;
  &lt;div class="form-group"&gt;
      &lt;label class="col-md-4 control-label" for="address"&gt;Street:*&lt;/label&gt;
      &lt;div class="col-md-4"&gt;
          &lt;select name="street_name" id="street_name" class="form-control input-sm" onchange="recalculate_price();"&gt;
  
          &lt;/select&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>get_zip_php</p>
  
  <pre><code>&lt;?php
  include('db_config.php');
  if($_POST['id'])
  {
   $id=$_POST['id'];
  
   $sql_query="SELECT * FROM zip_table where city_id='$id' order by zip_name asc";
   $result=mysqli_query($dbconfig,$sql_query);
   ?&gt;
   &lt;option selected="selected"&gt;Select ZIP code :&lt;/option&gt;&lt;?php
   while($row=mysqli_fetch_array($result,MYSQLI_ASSOC))
   {
    ?&gt;
          &lt;option value="&lt;?php echo $row['zip_id']; ?&gt;-&lt;?php echo $row['limousine']; ?&gt;-&lt;?php echo $row['kombi']; ?&gt;-&lt;?php echo $row['mini_van']; ?&gt;"&gt;&lt;?php echo $row['zip_name']; ?&gt;&lt;/option&gt;
          &lt;?php
   }
  }
  ?&gt;
  </code></pre>
  
  <p>get_street_php</p>
  
  <pre><code>&lt;?php
  include('db_config.php');
  if($_POST['id'])
  {
   $id=$_POST['id'];
  
   $sql_query="SELECT * FROM street_table where zip_id='$id' order by street_name asc";
   $result=mysqli_query($dbconfig,$sql_query);
   ?&gt;
   &lt;option selected="selected"&gt;Select street please :&lt;/option&gt;&lt;?php
   while($row=mysqli_fetch_array($result,MYSQLI_ASSOC))
   {
    ?&gt;
          &lt;option value="&lt;?php echo $row['street_id']; ?&gt;"&gt;&lt;?php echo $row['street_name']; ?&gt;&lt;/option&gt;
          &lt;?php
   }
  }
  ?&gt;
  </code></pre>
  
  <p>Ajax:</p>
  
  <pre><code>    &lt;script&gt;
  $(document).ready(function()
  {
  $("#city_name").change(function()
       {
        var id=$(this).val();
        var data = 'id='+ id;
  
        $.ajax
        ({
         type: "POST",
         url: "get_zip.php",
         data: data,
         cache: false,
         success: function(html)
          {
              $("#zip_name").html(html);
              recalculate_price();
          } 
      });
  });
  
  
  $("#zip_name").change(function()
      {
        var id=$(this).val();
        var data = 'id='+ id;
  
        $.ajax
        ({
         type: "POST",
         url: "get_street.php",
         data: data,
         cache: false,
         success: function(html)
         {
          $("#street_name").html(html);
          recalculate_price();
         } 
         });
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>If I make some changes on "select city part" (I<code>m beginner and really I</code>m lost in all this) I can`t pass zip. </p>
  
  <p>So, please tell me where to make all changes to pass all that things and post <code>city_name</code>, zip (name...I make it as "xxxx - city") and street name. Please help me, I googled and read here about problems few days and can`t continue work on my project until I fix this. Thanks in advance.</p>