EDIT: the below code now works!

I have two select inputs, the choice of 1 should populate the second. I have an external twig file (data.twig) (MAKE SURE TO PUT THIS IN YOUR TEMPLATES FOLDER) that loads the options of the second field.

 {% set allBrands = craft.entries()

{% set brands = allBrands.all() %}      

<div class="modal-page-display w-container">
  <div class="modal-page-wrapper text-left" style="min-width: 500px;">
  <h3 class="heading">test form</h3>

    <select id="first-choice" class="select-1">
        <option selected value="base">Please Select</option>
        {% for entry in brands %}
        <option value="{{ entry.brandName }}">{{ entry.brandName }}</option>
        {% endfor %}

    <select id="second-choice" class="select-1">
        <option>Please choose from above</option>


Then for the javascript:

$(function() {

        $("#first-choice").change(function() {
          $("#second-choice").load("{{ siteUrl }}data.twig?brand=" + $("#first-choice").val());


And lastly the data.twig:

{% set brand = craft.request.getParam('brand') %}

{% set allModels = craft.entries()
{% set models = allModels.all() %}  
{% for entry in models %}   
<option>{{ entry.modelName }}</option>
{% endfor %}

Your code looks fine and worked for me when testing locally. However it could be failing due to the fact that you're not url-encoding the parameter before you send the request. If the values contain spaces or other special characters, for example, this would make it fail. To fix that issue, try using encodeURI() like this:

$("#second-choice").load("{{ distUrl }}data.twig?brand=" + encodeURI($("#first-choice").val()));

This works for me when testing with values that contain spaces at least.

  • Thank you so much for having a look, you wouldn't believe the time I've spent on this already.. I can't believe it works for you! I added your suggestion, but still just get the full twig code pulled, instead of them being executed beforehand.. When I inspect the second <select> after choosing a first-choice, I see the whole {% set brand %} etc. being pulled in the form document.. – Niels May 18 '20 at 19:18
  • I've found out what I did wrong.. I had put the data.twig file outside of my templates folder... (I used JSON first, then replaced the contents of the file to make it work with craft entries, and forgot to move the file).. Still a huge thanks for helping me, because the fact that it worked for you kept me pushing through! – Niels May 18 '20 at 20:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.