Dynamic Country - city select on form

Question

newbie alert, I am really enjoying perl Catalyst, however, i have googled and cant find a solution for Country - City dynamic selection. when i select a country from the dropdown, i would like the cities to change to that coutries cities only. How can i achieve this in Perl, Catalyst using HTML::FormHandler.

PS The data is coming from mysql db with a one to many relatioship

has_field 'city_id' => (
    label            => 'City',
    type             => 'Select',
    empty_select     => 'Choose city',
    required         => 1,
    required_message => 'Please enter city.',
);

has_field 'country_code' => (
    label            => 'Country',
    type             => 'Select',
    empty_select     => 'Choose country',
    required         => 1,
    required_message => 'Please enter your country.',
);

has_field 'submit'  => ( 
    type => 'Submit', 
    value => 'Save', 
    element_class => ['btn'] 
);

sub options_country_code {
    my $self = shift;
    return unless $self->schema;
    my @countries = $self->schema->resultset('Country')->all;
    my @options = map { { value => $_->country_code, label => $_->country_name } } @countries;
    unshift @options, { value => 0, label => 'Choose Country' };
    return @options;
}

__PACKAGE__->meta->make_immutable;
1;

This is no perl problem. The user selects the country within his browser. You have to use javascript on the client side to limit the cities after a country has been selected. — dgw, Oct 02 '17 at 19:10
@dgw and the question is how to do that when using HTML::FormHandler — ysth, Oct 02 '17 at 19:36
It depends on how much data there is. You have two options. Either you create all the data in a large data structure and include it in the page as json or similar, or create an endpoint in your application that will handle AJAX calls. You don't really need the FormHandler for either of them. — simbabque, Oct 02 '17 at 19:51
i completely agree with the comments, could someone share some code on how this can be achieved? i have not found sample code on the matter hence the post. — Njugu, Oct 03 '17 at 05:30

score 0 · Answer 1 · edited Oct 03 '17 at 09:21

I found exactly what I was looking for, thank you for the effort, I appreciate it very much.

The solution I needed is here

I am using this code as my base:

<html>
<head>
<script type="text/javascript">
function setmenu2() {
  var menu1 = document.getElementById('menu1');
  var sel   = menu1.options[menu1.selectedIndex].text;
  var menu2 = document.getElementById('menu2');

  if (sel == "Foo") {
    menu2.innerHTML = "<option>Foo-1</option>"
                     +"<option>Foo-2</option>";
  } else {
    menu2.innerHTML = "<option>Bar-1</option>"
                     +"<option>Bar-2</option>"
                     +"<option>Bar-3</option>";
  }
}
</script>
</head>

<body>

<select id="menu1" onchange="setmenu2()">
<option>please select...</option>
<option>Foo</option>
<option>Bar</option>
</select>

<select id="menu2">
<option>- ?? -</option>
</select>

</body>
</html>

So far this is what I have:

<script type="text/javascript">
function setcities() {
  var country_select = document.getElementById('country_code');
  var sel   = country_select.options[country_select.selectedIndex].value;
  var city_select = document.getElementById('city_id');

  if (sel == "AFG") {
    city_select.innerHTML = "<option value='1' id='city_id.1'>Kabul</option>"
                     +"<option value='2' id='city_id.2'> Qandahar</option>";
  } else if (sel == "AGO"){
    city_select.innerHTML = "<option value='56' id='city_id.1'>Luanda</option>"
                     +"<option value='57' id='city_id.2'>Huambo</option>"
                     +"<option value='58' id='city_id.3'>Lobito</option>";
  } else {
    city_select.innerHTML = "<option>nothing</option>";
  }
}
</script>


<select id="country_code" onchange="setcities()">
  <option value="" id="country_code.0">please select...</option>
  <option value="AFG" id="country_code.1">Afghanistan</option>
  <option value="AGO" id="country_code.2">Angola</option>
  <option value="AIA" id="country_code.3">Anguilla</option>
</select>


<select id="city_id">
  <option>- ?? -</option>
</select>

Please edit this answer to include a citation of the relevant parts, or include your own solution. Stack Overflow is meant to provide future readers with solutions to their problems, and we don't know how long the third party resources will be around. Thanks. — simbabque, Oct 03 '17 at 07:35

Dynamic Country - city select on form

1 Answers1