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

0
votes

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");
}   
?>

Thanks Zsolt

2
phparraysdrop-down-menuforeach
You'd have to build the form in multiple stages - 1) get country selection 2) rebuild form with appropriate states, or use ajax so the JS can swap out the state/province list on the fly whenever the country dropdown is changed. – Marc B
you can use ajax to reload States – ahmed hamdy
As a separate issue, read up on Heredoc syntax - it's useful when you want to output chunks of html without exiting PHP – vogomatix

2 Answers

0
votes

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

0
votes

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>