Rails: if certiain value in form is selected, then populate another text_field

Question

There is probably a simple solution for this, however, I couldn't find it.

I have a simple form where I have state select box & site text_field:

_form.html.erb

<div class="field">
  <%= f.label :state, 'State' %><br>
  <%= f.select :state, [['NSW'], ['VIC'], ['SA'], ['WA'], ['QLD']] %>
</div>
<div class="form-group">
  <%= f.label :site, 'Site'%><br>
  <%= f.text_field :site %>
</div>

I would really like to be able to select "VIC" (a state in Australia) and then due to the fact that "VIC" was selected, the :site text_field is automatically populated with another value such as a site name.

For example: "VIC" state is selected -> "Melbourne" site is populated in the text_field on the form (in :site)

I have played around a bit with some example javascript that I have found on the web which seems to update some text on the screen when a certain value is chosen in a select box, however, I cannot seem to form an "if" argument that states: if "VIC" selected, then populate text_field of :site with "Melbourne".

Thanks in advance.

code for javascript that changes to the value selected:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>

<div id="text_to_be_changed"><%= @day_of_week %></div>
<%= select_tag :days, options_for_select(["Monday", "Tuesday"]), :id => "select_days" %>

<script>
$(document).ready(function(){
    $('#select_days').change(function() {
        $('#text_to_be_changed').html($(this).val());
    });
});
</script>

Answer 1

You will need the javascript to "know" the relationship between "VIC" and "Melbourne", or more generally between states and their capital cities. This can be stored in a variety of ways, eg as an array or map in your js code. eg

html:

<div class="field">
  <%= f.label :state, 'State' %><br>
  <%= f.select :state, [['NSW'], ['VIC'], ['SA'], ['WA'], ['QLD']], :id => "state-select" %>
</div>
<div class="form-group">
  <%= f.label :site, 'Site'%><br>
  <%= f.text_field :site, :id => "city-select" %>
</div>

js:

$(document).ready(function(){
  var stateDefaultCities = {
    "VIC": "Melbourne", 
    "NSW": "Sydney",
    "WA": "Perth"
    //etc
  }
  $('#state-select').change(function() {
      $('#city-select').val(stateDefaultCities[$(this).val]);
  });
});

EDIT: this solution is a bit fragile since the states are repeated in the markup and html: eg if you were to add an option to the select you'd need to add a corresponding line to the stateDefaultCities object. But it's just an example.

Answer 2

You can try this:

<script>
  $(document).ready(function(){
    $('#select_days').change(function() {
      $('#text_to_be_changed').html($(this).val());
    });
    // adding pre-populate data
    $("#configfile_state").change(function(){
      var selected = $(this).val();
      if(selected == "VIC") {
        $("#configfile_site").val("Melbourne");
      }
    });
  });
</script>

I hope this help you.