How can i get {{form}} value with javascript?

Question

there is a piece of my html code:

 <!-- STEP 1: class .active is switching steps -->
  <div data-step="1" class="">
    <h3>Załóż fundację:</h3>
    <div class="form-group form-group--inline">
      <label> Nazwa <input type="text" name="name" id="name" /> </label>
      <label> Opis <input type="text" name="description" id="description" /> </label>
    </div>
    <div class="form-group form-group--buttons">
      <button type="button" class="btn next-step">Dalej</button>
    </div>
  </div>

      <!-- STEP 2 -->
      <div data-step="2">
        <h3>Podaj typ fundacji</h3>
        <div class="form-group form-group">
          {{form1}}
        </div>
        <div class="form-group form-group--buttons">
          <button type="button" class="btn prev-step">Wstecz</button>
          <button type="button" class="btn next-step">Dalej</button>
        </div>
      </div>

In the step1, i am able to get the values from inputs by id, like:

var name = document.getElementById('name').value;

How can i do such a thing with the {{form1}}, it is kind of select field:

class AddFundationTypeForm(forms.Form):
    type = forms.ChoiceField(choices=type_of_organization) 

type_of_organization is aa dict, with 3 key-value pairs.

Answer 1

you can do this with any form field by adding prefix id_ so for your type field:

var type = document.getElementById('id_type').value;

django by default makes id for each field by using 'id_'+ your_field_name

and you want to obtain whole form then you should do this in your template.html

Template

<form id="myForm" action="" method="post">
    {{form1}}
</form>

and then in javascript:

var form = document.getElementById('myForm')

Answer 2

Thanks, however, i've added new field to my form:

class AddFundationForm(forms.Form):
    type = forms.ChoiceField(choices=type_of_organization)
    categories = forms.MultipleChoiceField(choices=category_choices, widget=forms.CheckboxSelectMultiple)

JS:

var type = document.getElementById('id_type').value; (that works)
var category = document.getElementById('id_categories').value; (it doesn't)

Could you tell me what's the difference between defining two variables above?