jackyjoy

Joined

1,560 Experience
0 Lessons Completed
2 Questions Solved

Activity

Hello,

I would like some help on how to build a dynamic dropdown menu with Rails Simple form.

I'm really new to programming so any help will be appreciated.

Many Thanks,

SS

Here is my Simple Form code.

<%= f.input :country : collection: ["Canada", "United States"] %>
<%= f.button :submit %>
Here's is some code in HTML and JS. This works, but I was wondering if Rails can do something similar.

<br> function select_countries(selectElem) {<br> var regionCode = selectElem.options[selectElem.selectedIndex].value;</p> <pre><code> if (regionCode == &#39;us&#39;) { document.getElementById(&quot;us_region&quot;).style.display = &#39;block&#39;; document.getElementById(&quot;ca_region&quot;).style.display = &#39;none&#39;; } else if (regionCode == &#39;can&#39;) { document.getElementById(&quot;ca_region&quot;).style.display = &#39;block&#39;; document.getElementById(&quot;us_region&quot;).style.display = &#39;none&#39;; } } function select_region(selectElem) { var cityCode = selectElem.options[selectElem.selectedIndex].value; if (cityCode == &quot;on&quot;) { document.getElementById(&quot;on_cities&quot;).style.display = &#39;block&#39;; document.getElementById(&quot;qc_cities&quot;).style.display = &#39;none&#39;; } else if (cityCode == &quot;qc&quot;) { document.getElementById(&quot;qc_cities&quot;).style.display = &#39;block&#39;; document.getElementById(&quot;on_cities&quot;).style.display = &#39;none&#39;; } else if (cityCode == &quot;ny&quot;) { document.getElementById(&quot;ny_cities&quot;).style.display = &#39;block&#39;; document.getElementById(&quot;ca_cities&quot;).style.display = &#39;none&#39;; } else if (cityCode == &quot;ca&quot;) { document.getElementById(&quot;ca_cities&quot;).style.display = &#39;block&#39;; document.getElementById(&quot;ny_cities&quot;).style.display = &#39;none&#39;; } } </code></pre> <p>

  <form name="form1" method="post" action="">
      <p>
      <label for="countries">Countries:</label>
      <select id="countries" name="countries" onChange="select_countries(this);">
      <option disabled selected value>No Country Selected</option>
      <option value="can">Canada</option>
      <option value="us">United States</option>
      </select>
      </p>

      <p id="ca_region">
      <label for="provinces">Provinces:</label>
      <select id="provinces" name="provinces" onChange='select_region(this);'>
      <option disabled selected value>No Province Selected</option>
      <option value="on">Ontario</option>
      <option value="qc">Quebec</option>
      </select>
      </p>

      <p id="us_region">
      <label for="states">States:</label>
      <select id="states" name="states" onChange='select_region(this);'>
      <option disabled selected value>No State Selected</option>
      <option value="ny">New York</option>
      <option value="ca">California</option>
      </select>
      </p>

      <p class="cities" id="on_cities">
      <label for="on_cities">Cities:</label>
      <select id="on_cities" name="on_cities" onChange='select_cities("on_cities");'>
      <option value="hamilton">Hamilton</option>
      <option value="toronto">Toronto</option>
      </select>
      </p>

      <p class="cities" id="qc_cities">
      <label for="qc_cities">Cities:</label>
      <select id="qc_cities" name="qc_cities" onChange='select_cities("qc_cities");'>
      <option value="montreal">Montreal</option>
      <option value="quebec">Quebec City</option>
      </select>
      </p>

      <p class="cities" id="ny_cities">
      <label for="ny_cities">Cities:</label>
      <select id="ny_cities" name="ny_cities" onChange='select_cities("ny_cities");'>
      <option value="newyork">New York City</option>
      <option value="albany">Albany</option>
      </select>
      </p>

      <p class="cities" id="ca_cities">
      <label for="ca_cities">Cities:</label>
      <select id="ca_cities" name="ca_cities" onChange='select_cities("ca_cities");'>
      <option value="losangeles">Los Angeles</option>
      <option value="sanfrancisco">San Francisco</option>
      </select>
      </p>

    </form>

Chris Oliver
Chris Oliver 260,700 XP ยท on Mar 10, 2017
Hey Stephen!

Rails doesn't have anything built-in to support this kind of feature. It doesn't make many decisions on how you should handle the frontend for you which makes sense since it's a backend framework more or less.

As far as what you've got, I'd say it's definitely not bad. There are some improvements you could make by having it become more dynamically created.

For example, you could store a Hash of all the data in Javascript or somewhere in the HTML and load that up into the JS. Once you had the data in an object in JS, you can then dynamically create the select options and everything from there. An example of that would look something like this: http://stackoverflow.com/a/6601129/277994 Yours would need to be a little more complex because you have different groups of data to show, but the concept is similar.

You can imagine having an object in JS that looks like this full of data (you could structure this any way you wanted):

var regions = {
"us": {
"name": "United States",
"states": [
"ca": {
"name": "California",
"cities": {
"losangeles": "Los Angeles",
"sanfrancisco": "San Francisco"
}
}
]
}
}
And if you had all the data like this, you could then grab out portions of it to fill out your fields. Such as you could gather all the name values of the top level regions to populate the region select. Once a region was selected, you could grab the states from it and populate the state/province level from there and so on.

It would require a lot of work to change, so don't feel like you need to clean it up right away. You can always improve this code later once it's working.

thanks
jackyjoy

Posted in How to build a chat app with Ruby on Rails ?.

Hello,

I recently put together a chat build tutorial where strangers can connect with each other via advanced group chats. I wanted to run it here and see if there's any suggestion or feedback to make it better.

thanks
jackyjoy

Hello,

I'm curious as to what people think is the best to create a new record, or save an existing record... as a template. The template would be used as a starting point to duplicate that record easily and quickly in the future (with associated records).

For example, let's say I have a survey application with surveys, which have many questions, which have many answers. Each user creates their own surveys, but each user might have a few different survey templates (pre-populated questions and answers) they'd like to start from and then edit... rather than creating an entirely new survey each time from scratch.

I see two different approaches for this...

The first is to save existing surveys as templates (still not sure how though), and then create survey's from those.

The second is to create the templates first, then create surveys from those templates.

I think both approaches are useful and I'd like to get advice on how to implement both of them.

thanks
jackyjoy

logo Created with Sketch.

Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

© 2021 GoRails, LLC. All rights reserved.