If no value selected from dropdown, allow textbox to add to mysql table using php, mysql, javascript

Question

hi i'm working on triple dropdown for country, state, city using ajax and the reference link is : http://roshanbh.com.np/2008/01/populate-triple-drop-down-list-change-options-value-from-database-using-ajax-and-php.html. It successfully working but i need if a state has no city in db table then a new text box is appear and the entered values is store in php mysql. what coding i'm implement that. please give some ideas.

code:

Ajax:

<script language="javascript" type="text/javascript">
  function getXMLHTTP() {
    var xmlhttp = false;

    try {
      xmlhttp = new XMLHttpRequest();
    } catch (e) {
      try {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {
        try {
          xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e1) {
          xmlhttp = false;
        }
      }
    }

    return xmlhttp;
  }

  function getState(countryId) {
    var strURL = "findState.php?country=" + countryId;
    var req = getXMLHTTP();

    if (req) {
      req.onreadystatechange = function () {
        if (req.readyState == 4) {
          // only if "OK"
          if (req.status == 200) {
            document.getElementById('statediv').innerHTML = req.responseText;
          } else {
            alert("There was a problem while using XMLHTTP:\n" + req.statusText);
          }
        }
      }

      req.open("GET", strURL, true);
      req.send(null);
    }
  }

  function getCity(countryId, stateId) {
    var strURL = "findCity.php?country=" + countryId + "&state=" + stateId;
    var req = getXMLHTTP();

    if (req) {
      req.onreadystatechange = function () {
        if (req.readyState == 4) {
          // only if "OK"
          if (req.status == 200) {
            document.getElementById('citydiv').innerHTML = req.responseText;
          } else {
            alert("There was a problem while using XMLHTTP:\n" + req.statusText);
          }
        }
      }

      req.open("GET", strURL, true);
      req.send(null);
    }
  }
</script>

Form:

<form method="post" action="" name="form1">
<table width="60%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="150">Country</td>
    <td  width="150"><select name="country" onChange="getState(this.value)">
    <option value="">Select Country</option>
    <option value="1">USA</option>
    <option value="2">Canada</option>
        </select></td>
  </tr>
  <tr style="">
    <td>State</td>
    <td ><div id="statediv"><select name="state" >
    <option>Select Country First</option>
        </select></div></td>
  </tr>
  <tr style="">
    <td>City</td>
    <td ><div id="citydiv"><select name="city">
    <option>Select State First</option>
        </select></div></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</form>

findstate.php

<?php
  include('config.php');
  $country = intval($_GET['country']);
  $query = "SELECT id,statename FROM state WHERE countryid='$country'";
  $result = mysql_query($query);
?>

<select name="state" onchange="getCity(<?php echo $country?>,this.value)">
  <option>Select State</option>
  <?php while($row=mysql_fetch_array($result)) { ?>
    <option value=<?php echo $row['id']?>><?php echo $row['statename']?></option>
  <?php } ?>
</select>

findcity.php

<?php
  include('config.php');
  $countryId = intval($_GET['country']);
  $stateId = intval($_GET['state']);
  $query = "SELECT id,city FROM city WHERE  stateid='$stateId'";
  $result = mysql_query($query);
?>

<select name="city">
  <option>Select City</option>
  <?php while($row=mysql_fetch_array($result)) { ?>
    <option value><?php echo $row['city']?></option>
  <?php } ?>
</select>

I want to show if there is no city in any state then a textbox will appear and it's value store to db.

Answer 1

Your findstate.php becomes this

<?php
include('config.php');
$country=intval($_GET['country']);
$query="SELECT id,statename FROM state WHERE countryid='$country'";
$result=mysqli_query($query);
if(mysqli_num_rows($result)==0):?>
  <input type="text" name="state" value="" />
<? endif; ?>

<select name="state" onchange="getCity(<?=$country ?>,this.value)">
   <option>Select State</option>
   <?php while($row=mysqli_fetch_array($result)): ?>
     <option value=<?= $row['id']?>><?= $row['statename']?></option>
   <?php endwhile; ?>
</select>

Similarly change your findcity.php aswell.

Suggestions

Never use mysql* anymore use mysqli* or PDO as mysql* is depricated. Link

Answer 2

Put this inside findcity.php file

<?php
include('config.php');
$countryId=intval($_GET['country']);
$stateId=intval($_GET['state']);
$query="SELECT id,city FROM city WHERE  stateid='$stateId'";
$result=mysql_query($query);
if(mysql_num_rows($result) == 0) // no cities found
{
  echo '<input type="textbox" name="city" />';
}
else // show select box
{
?>
<select name="city">
<option>Select City</option>
<?php while($row=mysql_fetch_array($result)) { ?>
<option value><?php echo $row['city']?></option>

<?php } ?>
</select>
<?php
 }
 ?>