Below, thank you.
Here's what I have on that page:
<script>
function getCountryData(list) {
var listOption = list.options[list.selectedIndex];
var countryID = listOption.getAttribute("data-country-id");
var countryName = listOption.getAttribute("data-country");
document.getElementById("tmsacountryID").value = countryID;
document.getElementById("showCountry").innerHTML = countryName;
}
</script>
<div class="form-group">
<label for="tmsaregionID" class="col-sm-2 control-label">Region:</label>
<div class="col-sm-6">
<select id="tmsaregionID" name="tmsaregionID" class="form-control" onchange="getCountryData(this)">
<option value="0">Please select</option>
<?php
while(!$rsREGIONS->atEnd()) {
?>
<option value="<?php echo($rsREGIONS->getColumnVal("tmsaregionID")); ?>" data-country-id="<?php echo($rsREGIONS->getColumnVal['tmsacountryID']); ?>" data-country="<?php echo($rsREGIONS->getColumnVal['tmsacountry']); ?>"><?php echo($rsREGIONS->getColumnVal("tmsaregion")); ?></option>
<?php
$rsREGIONS->moveNext();
}
$rsREGIONS->moveFirst(); //return RS to first record
?>
</select>
</div>
</div><!-- end form-group -->
<div class="form-group">
<label for="tmsacountryID" class="col-sm-2 control-label">Country:</label>
<div class="col-sm-6">
<span id="showCountry"></span>
<input type="text" class="form-control" id="tmsacountry" name="tmsacountry" readonly>
<input type="text" id="tmsacountryID" name="tmsacountryID" value="">
</div>
</div><!-- end form-group -->
I changed this in your example:
document.getElementById("countryID").value = countryID;
To this...
document.getElementById("tmsacountryID").value = countryID;
..as I felt that must match the id of the form field. I've un-hidden them as well just so I can check they're working correctly.
Also, whilst I understand that <span id="showCountry"></span> will (should) display the country name, how do I get that value into my readonly form field?
Really appreciate the help, thank you. Was messing about with dynamic dropdowns for aaages before you pointed out the obvious!
NJ
