<p>You will need to use JavaScript, either AJAX calling to a template that re-runs a new Twig <code>for</code> loop and returns the results in HTML, or a framework like Vue or React in conjunction with P&amp;T's <a href="https://github.com/craftcms/element-api" rel="nofollow noreferrer">Element API</a> that will create an endpoint of your section's entries in JSON format. </p>

<hr>

<p>If you don't mind a page refresh, you can filter your entries dynamically using <a href="https://craftcms.com/docs/templating/craft.request" rel="nofollow noreferrer"><code>craft.request</code></a> to grab pretty much whatever you want: a segment from the URL, query string, post data, etc. So basically, when the form submits, your redirect url should go to that page and either you add submitted data to the url via <code>get</code> or grab the data via <code>post</code>.</p>

<hr>

<p>Also, fyi, you have a syntax error in your code: missing a <code>)</code> at the end of your <code>.relatedTo</code> ;)</p>

CC BY-SA 3.0
2017-09-20T22:26:41.230Z
So there is no easy or simple way to do something such as onSubmit(); {{% set related = craft.entries.section('vehicles').relatedTo("**FormVariable**")%}}
Matthew Dillon
CC BY-SA 3.0
2017-09-20T22:51:39.313Z
Twig is a templating language that compiles down to PHP on the server, which then compiles down to an HTML file that is sent out to the browser requesting it.  If you press submit on a form, you yourself are working from the browser (not from the server), and either you are sending something back to the server to process and then receiving a response from said server, or you are running some javascript in the browser to do any number of things.  So you're wanting to run a client-side process on server-side code.  That's not how it works.  The "easy/simple" way(s) is mentioned above.
Ryan
CC BY-SA 3.0
2017-09-20T03:24:43.310Z
2017-09-20T13:34:23.723Z
2017-09-20T13:34:23.723Z
Ryan
<p>Recently new to Craft and Twig although I have used Expression Engine in the past. I am looking for a way to update a for loop that is pulling entries from a defined category based on the current entry/page category by using a dropdown list with all categories available.</p>

<p>Entries: Vehicles</p>

<p>Categories: Truck, Suv, Compact, Economy</p>

<p>Fields: Color, numofDoors, passangers, gasmileage</p>

<p>Example of code:</p>

<pre><code>{% set related = craft.entries.section('vehicles').relatedTo(entryVehicleCategories%}

{% for vehicle in related %}

    {% if related|length %}
        &lt;h2&gt;Name:{{vehicle.name}}&lt;/h2&gt;
        &lt;p&gt;color:{{vehicle.color}}&lt;/p&gt;
        &lt;p&gt;Number of doors:{{vehicle.numofdoors}}&lt;/p&gt;
    {% else %}
        &lt;h2&gt;No content&lt;/h2&gt;
    {% endif %}
{% endfor %}

&lt;form action="{{ url('search/results') }}"&gt;
    &lt;select name="vehicle-search" placeholder="Search"&gt;
        &lt;option value="Truck"&gt;Truck&lt;/option&gt;
        &lt;option value="Suv"&gt; Suv &lt;/option&gt;
        &lt;option value="Compact"&gt; Compact &lt;/option&gt;
        &lt;option value="Economy"&gt; Economy &lt;/option&gt;
    &lt;/select&gt;

    &lt;input type="submit" value="Go"&gt;
&lt;/form&gt; 
</code></pre>

<p>Upon form submit I am hoping I can change/set related to something new.</p>

<p>Example: Current loop is looping and showing all related truck entries.</p>

<p>Action wanted: User selects suv and div reloads suv entries on page without reloading page.</p>

<categories><form><craft-features>
Refresh Craft for loop with form parameters
# Refresh Craft for loop with form parameters

(Asked by: username_0 on 2017-09-20)

Recently new to Craft and Twig although I have used Expression Engine in the past. I am looking for a way to update a for loop that is pulling entries from a defined category based on the current entry/page category by using a dropdown list with all categories available.
Entries: Vehicles
Categories: Truck, Suv, Compact, Economy
Fields: Color, numofDoors, passangers, gasmileage
Example of code:
{% set related = craft.entries.section('vehicles').relatedTo(entryVehicleCategories%}

{% for vehicle in related %}

    {% if related|length %}
        Name:{{vehicle.name}}
        color:{{vehicle.color}}
        Number of doors:{{vehicle.numofdoors}}
    {% else %}
        No content
    {% endif %}
{% endfor %}


    
        Truck
         Suv 
         Compact 
         Economy 
    

    
 

Upon form submit I am hoping I can change/set related to something new.
Example: Current loop is looping and showing all related truck entries.
Action wanted: User selects suv and div reloads suv entries on page without reloading page.

**Tags:** categories, form, craft-features


---

## 1 answers

### Answer by username_1 on 2017-09-20. Score: 1 | Accepted answer

You will need to use JavaScript, either AJAX calling to a template that re-runs a new Twig `for` loop and returns the results in HTML, or a framework like Vue or React in conjunction with P&T's [Element API](https://github.com/craftcms/element-api) that will create an endpoint of your section's entries in JSON format.

---

If you don't mind a page refresh, you can filter your entries dynamically using [`craft.request`](https://craftcms.com/docs/templating/craft.request) to grab pretty much whatever you want: a segment from the URL, query string, post data, etc. So basically, when the form submits, your redirect url should go to that page and either you add submitted data to the url via `get` or grab the data via `post`.

---

Also, fyi, you have a syntax error in your code: missing a `)` at the end of your `.relatedTo` ;)

> **Comments:**
> **username_0**: So there is no easy or simple way to do something such as onSubmit(); {{% set related = craft.entries.section('vehicles').relatedTo("**FormVariable**")%}}  
> **username_1**: Twig is a templating language that compiles down to PHP on the server, which then compiles down to an HTML file that is sent out to the browser requesting it.  If you press submit on a form, you yourself are working from the browser (not from the server), and either you are sending something back to the server to process and then receiving a response from said server, or you are running some javascript in the browser to do any number of things.  So you're wanting to run a client-side process on server-side code.  That's not how it works.  The "easy/simple" way(s) is mentioned above.  

---

