hi ive done a piece of code for if select a region the postcodes pop up for that region all works on a seperate file but if i put on my working script it doesnt work any help would be much appreciated here is test code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
  <head> 
    <meta http-equiv="content-type" content="text/xhtml; charset=utf-8" /> 
    <title>Dynamic Select Statements</title> 
<script type="text/javascript">
 //<![CDATA[ 
 // array of possible countries in the same order as they appear in the event_postalcode selection list 
 var postcodeLists = new Array(4) 
 postcodeLists["empty"] = ["Select a Region"]; 
 postcodeLists["Channel Islands"] = ["Please Choose", "GY", "JE"]; 
 postcodeLists["East Midlands"] = ["Please Choose", "CB", "CO", "DE", "DN", "IP", "LE", "LN", "NG", "NR", "PE", "S"]; 
 postcodeLists["Greater London"] = ["Please Choose", "BR", "CR", "DA", "E", "EC", "EN", "HA", "IG", "KT", "N", "NW", "RM", "SE", "SM", "SW", "TW", "UB", "W", "WC", "WD"]; 
 postcodeLists["Isle of Man"] = ["Please Choose", "IM"]; 
 postcodeLists["North East"] = ["Please Choose", "DH", "DL", "HG", "HU", "LS", "NE", "SR", "TS", "WF", "YO"]; 
 postcodeLists["North West"] = ["Please Choose", "BB", "BO", "BL", "CA", "CH", "CW", "FY", "HX", "L", "LA", "M", "OL", "PR", "SK", "WA", "WN"]; 
 postcodeLists["Northern Ireland"] = ["Please Choose", "BT"]; 
 postcodeLists["Scotland"] = ["Please Choose", "AB", "DD", "DG", "EH", "FK", "GH", "SI", "VK", "AK", "WK", "YM", "LP", "AP", "MT", "D", "ZE"]; 
 postcodeLists["South East"] = ["Please Choose", "AL", "BN", "CM", "CT", "GU", "HP", "LU", "ME", "MK", "OX", "PO", "RG", "RH", "SG", "SL", "SO", "SS", "TN"]; 
 postcodeLists["South West"] = ["Please Choose", "BA", "BH", "BS", "DT", "EX", "GL", "PL", "SN", "SP", "TA", "TQ", "TR"]; 
 postcodeLists["Wales"] = ["Please Choose", "CF", "LD", "LL", "NP", "SA", "SY"]; 
postcodeLists["West Midlands"] = ["Please Choose", "B", "CV", "DY", "HR", "NN", "ST", "TF", "WR", "WS", "WV"]; 
 /* event_postalcode() is called from the onchange event of a select element. 
 * param selectObj - the select object which fired the on change event. 
 */ 
 function event_postalcode(selectObj) { 
 // get the index of the selected option 
 var idx = selectObj.selectedIndex; 
 // get the value of the selected option 
 var which = selectObj.options[idx].value; 
 // use the selected option value to retrieve the list of items from the postcodeLists array 
 cList = postcodeLists[which]; 
 // get the event_postalcode select element via its known id 
 var cSelect = document.getElementById("event_postalcode"); 
 // remove the current options from the event_postalcode select 
 var len=cSelect.options.length; 
 while (cSelect.options.length > 0) { 
 cSelect.remove(0); 
 } 
 var newOption; 
 // create new options 
 for (var i=0; i<cList.length; i++) { 
 newOption = document.createElement("option"); 
 newOption.value = cList[i];  // assumes option string and value are the same 
 newOption.text=cList[i]; 
 // add the new option 
 try { 
 cSelect.add(newOption);  // this will fail in DOM browsers but is needed for IE 
 } 
 catch (e) { 
 cSelect.appendChild(newOption); 
 } 
 } 
 } 
//]]>
</script>
</head>
<body>
  <noscript>This page requires JavaScript be available and enabled to function properly</noscript>
  <h1>Dynamic Select Statements</h1>
  <label for="event_region">Select Region</label>
  <select id="event_region" onchange="event_postalcode(this);">
    <option value="empty">Select a Continent</option>
    <option value="Channel Islands">Channel Islands</option>
    <option value="East Midlands">East Midlands</option>
    <option value="Greater London">Greater London</option>
    <option value="Isle of Man">Isle of Man</option>
                <option value="North East">North East</option>
                <option value="North West">North West</option>
                <option value="Northern Ireland">Northern Ireland</option>
                <option value="Scotland">Scotland</option>
                <option value="South East">South East</option>
                <option value="South West">South West</option>
                <option value="Wales">Wales</option>
                <option value="West Midlands">West Midlands</option>
                </select>
  <br/>
  <label for="county">Select a Region</label>
  <select id="event_postalcode">
    <option value="0">Select a Postalcode</option>
  </select>
</body>
 </html>

and heres inside the form

<form action="" name="input" method="post">
                <p style="font-size: 150%">
                <b>Add an Organised Event</b></p>
                <div class="field">
                <label for="event_type"><div class="profl_txt_2">Type:</div></label><br>
                <select id="event_type" name="event_type">
                <option value="">Choose meet type...</option>
                <option value="Club night"<?php if(!empty($event_type)) {?><?php if($_POST['event_type']=="Club night") { echo "selected"; } ?><?php }?>>Club night</option>
                <option value="Organised social"<?php if(!empty($event_type)) {?><?php if($_POST['event_type']=="Organised social") { echo "selected"; } ?><?php }?>>Organised social</option>
                <option value="Organised adult party"<?php if(!empty($event_type)) {?><?php if($_POST['event_type']=="Organised adult party") { echo "selected"; } ?><?php }?>>Organised adult party</option>
                </select>
                </div>
                <div class="field">
                <label for="event_date"><div class="profl_txt_2">When:</div></label><br>
                <input type="date" id="myDate" value="2018-03-09">
                </div>
                <div class="field">
                <<<<this section starts <label for="event_region"><div class="profl_txt_2">Country/Region:</div></label><br>
   <select id="event_region" onchange="event_postalcode(this);">
    <option value="empty">Select a Continent</option>
    <option value="Channel Islands">Channel Islands</option>
    <option value="East Midlands">East Midlands</option>
    <option value="Greater London">Greater London</option>
    <option value="Isle of Man">Isle of Man</option>
                <option value="North East">North East</option>
                <option value="North West">North West</option>
                <option value="Northern Ireland">Northern Ireland</option>
                <option value="Scotland">Scotland</option>
                <option value="South East">South East</option>
                <option value="South West">South West</option>
                <option value="Wales">Wales</option>
                <option value="West Midlands">West Midlands</option>
                </select>
  <br/>
  <label for="county">Select a Region</label>
  <select id="event_postalcode">
    <option value="0">Select a Postalcode</option>
  </select> >>>this section ends
                </div>
                <div class="field">
                <label for="event_title"><div class="profl_txt_2">Title:</div></label><br>
                <input id="event_title" name="location" maxlength="40" size="40" value="<?php  if(!empty($event_title)) { ?><?php echo $_POST['event_title']?><?php } ?>">
                </div>
                <div class="field">
                <label for="event_description"><div class="profl_txt_2">Description:</div></label><br>
                <textarea id="event_description" name="event_description" rows="5" cols="47"><?php  if(!empty($event_description)) { ?><?php echo $_POST['event_description']?><?php } ?></textarea></div>
                <div class="field">
                <label for="event_ltm">
                    <div class="profl_txt_2">Who is invited?</div>
                </label>
                <br>
                <table border="0" cellpadding="0" cellspacing="1">
                <tr>
                  <td><input type="checkbox" id="event_ltm" name="event_ltm[]" value="1"></td>
                  <td>&nbsp;<label for="event_ltm">MF Cpl</label></td>
                  <td>&nbsp;</td><td>&nbsp;</td>
                  <td><input type="checkbox" id="event_ltm" name="event_ltm[]" value="1"></td>
                  <td>&nbsp;<label for="event_ltm">MM Cpl</label></td>
                  <td>&nbsp;</td><td>&nbsp;</td>
                  <td><input type="checkbox" id="event_ltm" name="event_ltm[]" value="1"></td>
                  <td>&nbsp;<label for="event_ltm">FF Cpl</label></td>
                  <td>&nbsp;</td><td>&nbsp;</td>
              </tr>
              <tr><td>&nbsp;</td></tr>
              </table>
              </div>
              <input type="submit" name="AddEvent" id="AddEvent" value="Add Organised Event">
              </form>

i havent including javasript with form as nothing has changed and it in same place as with test file

Recommended Answers

All 4 Replies

I'm not quite sure what the problem you're having is.

I have put your code in a codepen and it looks ok (selecting a region updates the postcode prefix dropdown).

What isn't happening that should be?

its not showing postcodes after selecting regions

Try to rename JS function to different from select element ID.
And a few more tips:
if you declare XHTML document then always close tags. The XHTML syntax does not allow unclosed <br> or <input type="checkbox" id="event_ltm" name="event_ltm[]" value="1"> etc elements
Good practice defines an object that is once declared not to be redeployed e.g. declare it in php

<?php

$postcodeLists = array(
    "Select a Region" => [],
    "Channel Islands" => [ "GY", "JE"],
    "East Midlands" => ["CB", "CO", "DE", "DN", "IP", "LE", "LN", "NG", "NR", "PE", "S"],
    "Greater London" => ["BR", "CR", "DA", "E", "EC", "EN", "HA", "IG", "KT", "N", "NW", "RM", "SE", "SM", "SW", "TW", "UB", "W", "WC", "WD"],
    "Isle of Man" => ["IM"],
    "North East" => ["DH", "DL", "HG", "HU", "LS", "NE", "SR", "TS", "WF", "YO"],
    "North West" => ["BB", "BO", "BL", "CA", "CH", "CW", "FY", "HX", "L", "LA", "M", "OL", "PR", "SK", "WA", "WN"],
    "Northern Ireland" => ["BT"],
    "Scotland" => ["AB", "DD", "DG", "EH", "FK", "GH", "SI", "VK", "AK", "WK", "YM", "LP", "AP", "MT", "D", "ZE"],
    "South East" => ["AL", "BN", "CM", "CT", "GU", "HP", "LU", "ME", "MK", "OX", "PO", "RG", "RH", "SG", "SL", "SO", "SS", "TN"],
    "South West" => ["BA", "BH", "BS", "DT", "EX", "GL", "PL", "SN", "SP", "TA", "TQ", "TR"],
    "Wales" => ["CF", "LD", "LL", "NP", "SA", "SY"],
    "West Midlands" => ["B", "CV", "DY", "HR", "NN", "ST", "TF", "WR", "WS", "WV"]
);

?>

and pass it to JS e.g.

<script type="text/javascript">
 //<![CDATA[ 
 // array of possible countries in the same order as they appear in the event_postalcode selection list 
var postcodeLists = <?=json_encode($postcodeLists);?>;
 /* event_postalcode() is called from the onchange event of a select element. 
 * param selectObj - the select object which fired the on change event. 
 */ 
function change_postalcode(selectObj) {
    cList = postcodeLists[selectObj.value];
    // get the event_postalcode select element via its known id
    var cSelect = document.getElementById("event_postalcode");
    // remove the current options from the event_postalcode select
    while (cSelect.options.length > 0) {
        cSelect.remove(0); 
    } 
    var newOption; 
    if(cList[0] != "Select a Postalcode"){
        cList.unshift("Select a Postalcode");
    }
    for (var i=0; i<cList.length; i++) {
        newOption = document.createElement("option"); 
        if(i){ // empty value on "0" - first element is "Select a Postalcode"
            newOption.value = cList[i];  // assumes option string and value are the same
        }
        newOption.text=cList[i]; 
        // add the new option 
        try {
            cSelect.add(newOption);  // MSIE 8.0
        }
        catch (e) {
            cSelect.appendChild(newOption); // other browsers
        }
    }
}
/**/
function fillRegion(){
    var sel = document.getElementById("event_region");
    for(var i in postcodeLists){
        var opt = document.createElement("option");
        opt.value=opt.text=i;
        try {
            sel.add(opt);  // MSIE 8.0
        }
        catch (e) {
            sel.appendChild(opt); // other browsers
        }
    }
}
//]]>
</script>

both select boxes fill dynamically from passed object look up function fillRegion

        <body onload="fillRegion()">
        ...
        ...
        ...
        <div class="field">
            <label for="event_region">
                <div class="profl_txt_2">Country/Region:</div>
            </label>
            <br/>
            <select id="event_region" onchange="change_postalcode(this);"></select>
            <br/>
            <label for="county">Select a Region</label>
            <select id="event_postalcode"></select>
        </div>
        ...
        ...
        ...

and other more dynamical output

            <select id="event_type" name="event_type">
                <option value="">Choose meet type...</option>
                <?php $meets = array("Club night","Organised social","Organised adult party");
                $event_type = filter_input(INPUT_POST, 'event_type');
                foreach($meets as $type){
                $selected = ( $type == $event_type ? ' selected="selected"' : '' );
                echo '<option value="'.$type.'"'.$selected.'>'.$type.'</option>';
                }
                ?>
            </select>

notice XHTML does not allow HTML attributes without value like <option value="example" selected>example</option> - should be <option value="example" selected="selected">example</option>

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.