0

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

Edited by janicemurby

3
Contributors
4
Replies
49
Views
6 Months
Discussion Span
Last Post by AndrisP
0

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>

Edited by AndrisP

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.