Refresh Craft for loop with form parameters

Question

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 %}
        <h2>Name:{{vehicle.name}}</h2>
        <p>color:{{vehicle.color}}</p>
        <p>Number of doors:{{vehicle.numofdoors}}</p>
    {% else %}
        <h2>No content</h2>
    {% endif %}
{% endfor %}

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

    <input type="submit" value="Go">
</form> 

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.

Answer 1

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 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 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 ;)