Что является эквивалентом <input id="id"> в форме Django

Я пытаюсь ввести результаты из автозаполнения в (файл a.js) в форму Django (html).

В настоящее время html-файл выглядит следующим образом:

Шаблон

<input class="field" id="street_number" disabled="true" />

Очевидно, что я не могу напрямую ввести {{form.street_number}}. Я нашел несколько сообщений на эту тему (в частности, вот это: Как получить id полей формы в Django), но я не очень уверен, что понимаю, как это решает проблему.

.js файл

 function initAutocomplete(){  
      autocomplete = new google.maps.places.Autocomplete(document.getElementById("autocomplete"),{
        componentRestrictions: {'country':['uk']},
        fields: ['name','geometry','address_components'],
        types:['establishment','geocode']
      });
    
       autocomplete.addListener('place_changed', fillInAddress );
    }
    
    function fillInAddress(){
        // Get the place details from the autocomplete object.
        var place = autocomplete.getPlace();
        //showsdiffrent address components (click on 'inspect' on webpage to see)
        console.log(place);
    
         document.getElementById('business').value = place.name;
            //loop through address components detailed in consol 
            for (let i = 0; i < place.address_components.length; i++) {
              for (let j = 0; j < place.address_components[i].types.length; j++) {
                ...
                if (place.address_components[i].types[j] === "street_number") {
                document.getElementById('street_number').value = place.address_components[i].short_name;
                } ...

Полагаю, вопрос в том, как мне перевести <input id="id"> в термины django form? Может быть, есть возможность применить id в самом django form.py?

Я попробовал решение, найденное здесь, но получаю ошибку, говорящую, что TextInput не определен. forms.py

 class VenueForm(ModelForm):
        address = forms.CharField(max_length=100, required=True, widget = forms.HiddenInput())
    
        class Meta:
            model = Venue
            fields = ['address']
        
        def __init__(self, *args, **kwargs):
                super(VenueForm, self).__init__(*args, **kwargs)
                self.fields['address'].widget = TextInput(attrs={
                    'id': 'street_number'})

Буду благодарен за любые подсказки!

Я считаю, что вы используете id неправильно:

<input class="field" name="my_test_name" value="my_test_value" id="street_number" disabled="true" />

в данном примере выше:

id работает для ваших html, css и javascript to identify конкретно этого input. Вам не нужен id атрибут с django, только с frontend.

В случае, если вы хотите recieve data in django, например, использовать этот вход в форме с POST запросом, вы можете идентифицировать этот вход через name, и recieve его value (из атрибута value) 

def my_function_name(request):
    my_value = request.POST['my_test_name']
    print(my_value)
    #output will be >> my_test_value

Также вам не нужно переопределять вашу ModelForm, вы можете добавить эту input ниже вашей формы, и она будет работать

Ок, вот решение, которое я разработал.

Читая различные сообщения, вероятно, есть более сложные способы решения проблемы, но этот сработал для меня. Это также может быть более полезным для других новичков, таких как я, поскольку это решение легко понять.

В основном я создал id для каждого поля формы в forms.py. Без этого id в формах, django не устанавливал связь между назначенным ID в .js файле и полем формы в шаблоне.

forms.py

class VenueForm(ModelForm):
    street_number = forms.CharField(max_length=100, label = '', widget = forms.TextInput(attrs={'id':"street_number"}))

шаблон

 <form id="venueform" method="POST">
    {% csrf_token %}
    {{ form|as_crispy_errors }}

    <td class="label">Street Number </td>
    {{form.street_number| as_crispy_field}} </form>

.js файл (без изменений)

function initAutocomplete(){  
      autocomplete = new google.maps.places.Autocomplete(document.getElementById("autocomplete"),{
        componentRestrictions: {'country':['uk']},
        fields: ['name','geometry','address_components'],
        types:['establishment','geocode']
      });
    
       autocomplete.addListener('place_changed', fillInAddress );
    }
    
    function fillInAddress(){
        // Get the place details from the autocomplete object.
        var place = autocomplete.getPlace();
        //showsdiffrent address components (click on 'inspect' on webpage to see)
        console.log(place);
    
         document.getElementById('business').value = place.name;
            //loop through address components detailed in consol 
            for (let i = 0; i < place.address_components.length; i++) {
              for (let j = 0; j < place.address_components[i].types.length; j++) {
                ...
                if (place.address_components[i].types[j] === "street_number") {
                document.getElementById('street_number').value = place.address_components[i].short_name;
                } ...
Вернуться на верх