Pfthb

In my scenario within a form in my template I have two div parts.

In the first div there is a name="products__contains" so I can easily refer to selected item when i deal with a POST request.

 <div class="form-group col-md-12">
 <select id="products__contains" name="products__contains" class="form-control product">
 <option disabled selected>Select Product:</option>
 % for p in products %
 % if p %
 <option value="p"
 % if p == request.GET.products__contains %selected="selected"% endif %>
 p
 </option>
 % endif %
 % endfor %
 </select>
 </div>

In my second div, which implemented based on autocomplete there is no name to refer to.

<div>
 % csrf_token %
 form.product_name 
 </div>
 <script type="text/javascript" src="<script type="text/javascript" src="static/admin/js/vendor/jquery"></script>
 form.media 

My purpose is to create same urls when posting something.

When using the first solution with date and product selected I can create a url looking like:

www.example.com:port/shops/rest_new/?date=2018-11-13&products__contains=10+HERBS+COLON+CLEANSE+30tav

When using the second solution with date and product selected from the autocomplete textfield(loads the list of the products) I can create a url looking like:

www.example.com:port/shops/rest_new/?date=2018-11-13&categories__contains=1.ALFA&csrfmiddlewaretoken=QZmVRfHpFrmDEHsKysX60drdkVgbZWcOrhJTtj5G4u0h9eL1MOdBBt8Xw17iwsMg&product_name=22#

which is not what I want since it has a csrf reference and the product_name refers to id and not to the name of the product as I would like to.

In both examples I searched for the same product and press the submit button of my form.

Visually my site looks like:

In summary how can i change the name and the value of an element when it is autogenerated?