JavaScript don't read the text in multiselect
<p>I want to capture the values of a form to elaborate them in some function before to record them in the DB. I think I should use JavaScript so here we are:</p>

<p>My model:</p>

<pre><code>class Region(models.Model):
    number = models.CommaSeparatedIntegerField(max_length=9, unique=True)
    city = models.OneToOneField(Community, blank= True, null=True)
    resources = models.ManyToManyField(Resource, blank=True)
</code></pre>

<p>My form:</p>

<pre><code>class Crea_RegionForm(forms.ModelForm):
    quantity = forms.IntegerField(initial=1)
    resources=MyModelMultipleChoiceField(Resource.objects.all(), 
        widget=forms.CheckboxSelectMultiple, label='Risorse')

    class Meta:
        model = Region
        fields = ('number', 'city', 'resources')

    def __init__(self, *args, **kwargs):
        super(Crea_RegionForm, self).__init__(*args, **kwargs)
        quantity = self.fields['quantity'] #costum field
</code></pre>

<p>My MyModelMultipleChoiceField:</p>

<pre><code>class MyModelMultipleChoiceField(forms.ModelMultipleChoiceField):
    def label_from_instance(self, obj):
        return format_html(
            '&lt;span style="font-weight:normal"&gt;{}&lt;/span&gt;', obj.name)
</code></pre>

<p>So the html for resources in my page:</p>

<pre><code>Risorse
&lt;ul id="id_resources"&gt;
    &lt;li&gt;
        &lt;label for="id_resources_0"&gt;
            &lt;input id="id_resources_0" name="resources" type="checkbox" value="1" /&gt; 
            &lt;span style="font-weight:normal"&gt;Turism&lt;/span&gt;
        &lt;/label&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;label for="id_resources_1"&gt;
            &lt;input id="id_resources_1" name="resources" type="checkbox" value="2" /&gt; 
            &lt;span style="font-weight:normal"&gt;Agricole&lt;/span&gt;
        &lt;/label&gt;
    &lt;/li&gt;
    &lt;li&gt;
        #others
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>and finally my javascript in crea_region.html:</p>

<pre><code>&lt;input type="button" value="Create" id="CreateButton" /&gt;

  &lt;script type="text/javascript"&gt;
    &lt;!--
    var myform = document.getElementById("crea_region_form");
    var number = myform.number.value;

    var city_index = document.getElementById("id_city").selectedIndex;
    var city;
    if (city_index &gt; -1) {
    city = document.getElementById("id_city").options[city_index].text;
    document.write("city: " + city);
    }

    var risorse = myform.resources;
    var selectedresources = [];
    for (var i = 0; i &lt; risorse.length; i++) {
      document.write("risorse: " + risorse[i].text);
      //document.write("risorse: " + risorse[i].value);
      if (risorse[i].selected) selectedresources.push(risorse[i].value);
    }
    document.write("risorse: " + selectedresources);

    var quantity = myform.quantity.value;

    var button = document.getElementById("CreateButton");
    // to be completed

    //--&gt;
  &lt;/script&gt;
</code></pre>

<p>The problem is in resources: a costum ModelMultipleChoiceField that create a list of checkbox. My script can't read the textual and the lines</p>

<p><code>document.write("risorse: " + risorse[i].text)</code> give=> risorse: undefined</p>

<p><code>document.write("risorse: " + risorse[i].value)</code> give=> risorse: 1</p>

<p><code>document.write("risorse: " + selectedresources)</code> give=> risorse: </p>

<h2>EDIT</h2>

<p>My new script:</p>

<pre><code>...
var risorse = myform.resources;
document.write("risorse: " + risorse[1].nextSibling.innerHTML)
console.log(risorse)
console.log(risorse[1].nextSibling.innerHTML)
var selectedresources = [];
for (var i = 0; i &lt; risorse.length; i++) {
      document.write("risorse: " + risorse[i].nextSibling.innerHTML);
      if (risorse[i].selected) selectedresources.push(risorse[i].nextSibling.innerHTML);
}
document.write("risorse: " + selectedresources);
</code></pre>

<p><code>document.write("risorse: " + risorse[1].nextSibling.innerHTML)</code> give=> undefined</p>

<p><code>console.log(risorse)</code> give => <code>RadioNodeList [ &lt;input#id_resources_0&gt;, &lt;input#id_resources_1&gt;, &lt;input#id_resources_2&gt;, &lt;input#id_resources_3&gt;, &lt;input#id_resources_4&gt;, &lt;input#id_resources_5&gt;, &lt;input#id_resources_6&gt;, &lt;input#id_resources_7&gt; ]</code></p>

<p><code>console.log(risorse[1].nextSibling.innerHTML)</code> give=> undefined</p>