TransWikia.com

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

Stack Overflow Asked by user12584812 on December 27, 2021

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 a a dict, with 3 key-value pairs.

2 Answers

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?

Answered by user12584812 on December 27, 2021

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

Answered by Pruthvi Barot on December 27, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP