'PHP drop down list using array's and foreach (else and for) code

I'm taking a course called "Dynamic Web Development with PHP" and after getting an F for an exercise, I wish if you could help me with the following.

I have a php file and an inc file (that shows the form).

What I can't figure out how to resolve is the drop-down lists of the country and state / province, which should work like this:

If country USA is selected populate US states. If country CAN is selected populate Canadian provinces. I've made to array's one is states_list (USA) and province_list (CAN)

My teacher asking me to use the if statement to show the drop-down field. Exemple:

foreach($labels as $field => $label)
{
  if($field == "state")
  {
      echo html code for the drop-down list
   }
   else
   {
      echo html code for a text field
   }
}

My inc file:

<?php
 /*  Program name: form_data.inc
  *  Description:  Defines the form that collects a user's 
  *                personal information.
  */
$labels = array( "firstName" => "First Name",
                 "lastName" => "Last Name",
                 "street" => "Street",
                 "city" => "City",
                 "zip" => "Postal Code",
                 "country" => "Country",
                 "state" => "State",
                 "email" => "E-mail",
                 "phone" => "Phone",);
                 
$country_list = array("USA" => "United States",  
                      "CAN" => "Canada",);
                      
$state_list = array( "AL"=>"AL",  
                     "AK"=>"AK",  
                     "AZ"=>"AZ",  
                     "AR"=>"AR",  
                     "CA"=>"CA",  
                     "CO"=>"CO",  
                     "CT"=>"CT",  
                     "DE"=>"DE",  
                     "DC"=>"DC",  
                     "FL"=>"FL",  
                     "GA"=>"GA",  
                     "HI"=>"HI",  
                     "ID"=>"ID",  
                     "IL"=>"IL",  
                     "IN"=>"IN",  
                     "IA"=>"IA",  
                     "KS"=>"KS",  
                     "KY"=>"KY",  
                     "LA"=>"LA",  
                     "ME"=>"ME",  
                     "MD"=>"MD",  
                     "MA"=>"MA",  
                     "MI"=>"MI",  
                     "MN"=>"MN",  
                     "MS"=>"MS",  
                     "MO"=>"MO",  
                     "MT"=>"MT",
                     "NE"=>"NE",
                     "NV"=>"NV",
                     "NH"=>"NH",
                     "NJ"=>"NJ",
                     "NM"=>"NM",
                     "NY"=>"NY",
                     "NC"=>"NC",
                     "ND"=>"ND",
                     "OH"=>"OH",
                     "OK"=>"OK",
                     "OR"=>"OR",
                     "PA"=>"PA",
                     "RI"=>"RI",
                     "SC"=>"SC",
                     "SD"=>"SD",
                     "TN"=>"TN",
                     "TX"=>"TX",
                     "UT"=>"UT",
                     "VT"=>"VT",
                     "VA"=>"VA",
                     "WA"=>"WA",
                     "WV"=>"WV",
                     "WI"=>"WI",
                     "WY"=>"WY");

$province_list = array( "AB"=>"AB",
                        "BC"=>"BC",
                        "MB"=>"MB",
                        "NB"=>"NB",
                        "NL"=>"NL",
                        "NS"=>"NS",
                        "NT"=>"NT",
                        "NU"=>"NU",
                        "ON"=>"ON",
                        "PE"=>"PE",
                        "QC"=>"QC",
                        "SK"=>"SK",
                        "YT"=>"YT");
                    
$radios = array( "New", "Changed");
$submit = "Submit Data";
?>
<html>
<head>
<title>Form</title>
  <style type='text/css'>
   <!--
      body {
        background: #242523;
        font-family: Tahoma, Geneva, sans-serif;
      }
      form {
        width: 500px;
        margin: auto;
        padding: 10px 0 25px 0;
        -webkit-border-radius: 7px/9px; 
        -moz-border-radius: 7px/9px; 
        border-radius: 7px/9px; 
        background-color: #fff;
      }
      .field {padding-bottom: 1em;
         font-weight: normal;
         font-size:14px;
      }
      label {
        font-weight: normal;
        font-size:14px;
        float: left;
        width: 20%;
        margin-right: 1em;
        text-align: right;
      }
      input {
        
      }
      h3 {
          color:#C00;
          text-align: center;
          font-size:20px;
          padding-bottom: 10px;
      }
      #submit {
        margin-left: 22%;
      }
   -->
 </style>
</head>
<body>

<br>
<?php
 /* loop that displays the form */
  echo "<form action='$_SERVER[PHP_SELF]' method='POST'>";
  echo "<h3>Personal information</h3>";
  
  foreach($labels as $field => $label)
  {
    echo "<div class='field'><label for='$field'>$label</label>
          <input id='$field' name='$field' type='text' value='".@$$field."'
             size='50%' maxlength='50' /></div>\n";
  }
  
  echo "<div class='field'>
          <input type='radio' name='status' checked='checked'
            value='new' style='margin-left: 25%'/>$radios[0]
          <input type='radio' name='status' 
            value='changed' style='margin-left: 25%' />$radios[1]</div>\n";
            
   echo "<div class='field'>
    <input type='hidden' name='submitted' value='yes' /></div>\n";
   echo "<div id='submit'>
    <input type='submit' name='submitButton' value='$submit'></div>";
    
?>
</form>
</body>
</html>

My PHP file:

<?php
/*  Program name: checkBlank.php 
 *  Description:  Program displays the blank form and checks 
 *  all the form fields for blank fields.
 */
if(isset($_POST['submitted']) and $_POST['submitted'] == "yes")
{
  foreach($_POST as $field => $value)           
  {
    if(empty($value))
    {
      if($field != "firstName")
      {
         $blank_array[] = $field;
      }
    } 
    else                                                    
    {
      $good_data[$field] = strip_tags(trim($value));
    }
    
  }
  
  if(@sizeof($blank_array) > 0) 
  {
  $message = "<p style='color: white; margin-bottom: 0; 
                 font-weight: bold'>
                 You didn't fill in one or more required fields. 
                 You must enter: 
                 <ul style='color: red; margin-top: 0; 
                 list-style: none' >";
 /* display list of missing information */
    foreach($blank_array as $value)
    {
       $message .= "<li>$value</li>";
    }
    $message .= "</ul>"; 
    echo $message;
    extract($good_data);
    include("form_data.inc");   
    exit();    
  }  // endif missing information
   /* format check */
    foreach($_POST as $field => $value)
  {
  if(!empty($value))
  {
    $name_patt = "/^[A-Za-z' -]{1,50}$/";
    $addr_patt = "/^[A-Za-z0-9 .,'-]{1,50}$/";
    $city_patt = "/^[A-Za-z' -]{1,50}$/";
    $postal_patt = "/^[A-Za-z0-9-]{1,10}$/";
    $state_patt = "/^[A-Za-z]{2}$/";
    $province_patt = "/^[A-Za-z]{2}$/";
    $country_patt = "/^[A-Za-z' -]{1,50}$/";
    $email_patt = "/^.+@.+\\..+$/";
    $phone_patt = "/^[0-9)(xX -]{7,20}$/";
    $radio_patt = "/(new|changed)/";
    /* Checks first and last names */
    if(preg_match("/name/i",$field))
    {
      if(!preg_match($name_patt,$value))
      {
        $error_array[] = "$value is not a valid name";
      }
    } 
    /* Checks address */
    if(preg_match("/street/i",$field))
    {
      if(!preg_match($addr_patt,$value))
      {
        $error_array[] = "$value is not a valid address";
      }
    } 
    /* Checks city */
    if(preg_match("/city/i",$field))
    {
      if(!preg_match($city_patt,$value))
      {
        $error_array[] = "$value is not a valid city name";
      }
    }   
    /* Checks postal code */
    if(preg_match("/zip/i",$field))
    {
      if(!preg_match($postal_patt,$value))
      {
        $error_array[] = "$value is not a valid potal code";
      }
    } 
    /* Checks country names*/ 
        if(preg_match("/country/i",$field))
    {
      if(!preg_match($country_patt,$value))
      {
        $error_array[] = "$value is not a valid country";
      }
    } 
    /* Checks state and province names */
    if(preg_match("/state/i",$field))
    {
      if(!preg_match($state_patt,$value))
      {
        $error_array[] = "$value is not a valid state";
      }
    }
    if(preg_match("/province/i",$field))
    {
      if(!preg_match($province_patt,$value))
      {
        $error_array[] = "$value is not a valid province";
      }
    }
    /* Checks email address */
    if(preg_match("/email/i",$field))
    {
      if(!preg_match($email_patt,$value))
      {
        $error_array[] = "$value is not a valid e-mail address";
      }
    } 
    /* Checks phone number */
    if(preg_match("/phone/i",$field))
    {
      if(!preg_match($phone_patt,$value))
      {
        $error_array[] = "$value is not a valid phone number";
      }
    }  // endif formats check
    if(preg_match("/status/i",$field))
    {
      if(!preg_match($radio_patt,$value))
      {
        $error_array[] = "$value is not a valid status";
      }
    }
  } 
  $clean_data[$field] = strip_tags(trim($value));
}
if(@sizeof($error_array) > 0) 
{

  $message = "<ul style='color: red; list-style: none' >";
  foreach($error_array as $value)
  {
   $message .= "<li>$value</li>";
  }
  $message .= "</ul>"; 

   
  echo $message;
  extract($clean_data);
  include("form_data.inc");
  exit();   
}
else
{
 echo "Data is all okay";
}
 /* displays all the information passed from a form */ 
    echo "<ol>";
        foreach($_POST as $field => $value)
        {
             echo "<li> $field = $value</li>";
        }
    echo "</ol>";
}
else
{
  include("form_data.inc");
}   
?>

Solution 1:^[1]

you can make two drop down list one for country and two for states. first drop down list will have three items

select country (as selected)
USA
CAN

second drop down list will be empty and it reload by using ajax only if you select a country ( USA - CAN ) else second down list will return empty again

Solution 2:^[2]

With such a small amount of data, it doesn't really even need to be an Ajax call to fetch the state/province list. Just simply load them into the page as a JSON object and swap the list.

This is a rough draft, not finished or polished code:

<script src="path/to/jquery.js"></script>
<script>

var stateMap = {
    "USA": [ { "AL" : "AL"} .....],
    "CAN": [ { "AB" : "AB" }, .... ]
};

function setStates(country) {
    var newOptions = stateMap[country]; 
    var states = $('#states');
    states.empty();
    $.each(newOptions, function(key, value) {
        $el.append($("<option></option>")
        .attr("value", value).text(key));
        });
    }
}

// initialise on document load...
$(function() {
  setStates( "USA");
});

// set state list on country change....
$('#country').change( function() {
    var country = $( this ).val();

    setStates( country);

}
</script>
<body>
     <select id="country">
         <option value="USA">USA</option>
         <option value="CAN">Canada</option>
     </select>
     <select id="states">
     </select>
</body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	ahmed hamdy
Solution 2

'PHP drop down list using array's and foreach (else and for) code

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]