I want to make a dropdown item send data to a form, help needed

I have this dropdown that fills itself with the make of cars inside my database and i want to make each one of the items(when selected) send their name to a dorm (ex: if i press Fiat i want the item to send the name Fiat to the form). I would appreciate any help :)

Also if you saw a post with a similar question let me know, thanks :)

Here is the code i got:

{% extends "layout.html" %}
{% block content %}
{% load static %}
<link rel="stylesheet" href="{% static 'css/styles.css' %}?v=1">
<!-- search bar for advanced search-->
<div class="container-search">
    <br>
    <h1 class="text-center text-white">Search Cars</h1>
    <hr>
    <form method="get" action="{% url 'search' %}">
        <!-- Dropdowns - Side by side -->
        <div class="d-flex justify-content-center mb-3">
            <div class="dropdown me-3">
                <button class="btn btn-danger dropdown-toggle" type="button" id="makeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    Select Make
                </button>
                <ul class="dropdown-menu" aria-labelledby="makeDropdown">
                    {% for make in car_makes %}
                        <post value="{{make.make}}" name="{{ make.make }}" class="text-dark">{{ make.make }}</post>
                        <br>
                    {% endfor %}
                </ul>
            </div>
            <div class="dropdown">
                <button class="btn btn-danger dropdown-toggle" type="button" id="modelDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    Select Model
                </button>
                <ul class="dropdown-menu" aria-labelledby="modelDropdown">
                {% if cars != None %}
                    {% for car in cars %}
                        <option value="{{ car.model }}" class="text-dark">{{ car.model }}</option>
                    {% endfor %}
                {% else %}
                    <option class="text-dark"> Search a make first</option>
                {% endif %}
                </ul>
            </div>
        </div>

        <!-- Search Input (below the dropdowns) -->
        <div class="input-group w-100 mx-auto">
            <input
                type="text"
                class="form-control"
                placeholder="Search by make or model"
                name="query"
                value="{{ request.GET.query }}"
            >
            <button class="btn btn-danger" type="submit">Search</button>
        </div>
        <hr>
    </form>
    <!-- selected search car posts-->
    <div class="car-container">
        {% for car in cars %}
        <div class="car">
            <h2 style="text-align: center">{{ car.make }} {{ car.model }}</h2>
            {% if car.state == "Available" %}
                <h2 style="color: green;">{{ car.state }}</h2>
            {% else %}
                <h2 style="color: red;">{{ car.state }}</h2>
            {% endif %}            
            <hr>
            <div class="container-search">  
            </div>
                {% if car.pictures %}
                    <a href="{% url 'post' id=car.id %}">
                        <img src="{{ car.pictures.url }}" alt="{{ car.make }} {{ car.model }}" style="max-width: 350px; border-radius: 10px; padding: 5px;">
                    </a>
                {% else %}
                    <p>No image available.</p>
                {% endif %}
            <p><strong>Price</strong> ${{ car.price }}</p>
            <hr>
            <p><strong>Description</strong> {{ car.description }}</p>
        </div>
        {% empty %}
        <p>Search for your dream car.</p>
        {% endfor %}
</div>
{% endblock %}

I tried many things like using {{ request.GET.nameOfTheItem }}, trying to give it an individual value, among other things

Вернуться на верх