fabio fabio - 5 months ago 6
HTML Question

JavaScript don't read the text in multiselect

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:

My model:

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)


My form:

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


My MyModelMultipleChoiceField:

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


So the html for resources in my page:

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


and finally my javascript in crea_region.html:

<input type="button" value="Create" id="CreateButton" />

<script type="text/javascript">
<!--
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 > -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 < 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

//-->
</script>


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

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

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

document.write("risorse: " + selectedresources)
give=> risorse:

EDIT



My new script:

...
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 < risorse.length; i++) {
document.write("risorse: " + risorse[i].nextSibling.innerHTML);
if (risorse[i].selected) selectedresources.push(risorse[i].nextSibling.innerHTML);
}
document.write("risorse: " + selectedresources);


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

console.log(risorse)
give =>
RadioNodeList [ <input#id_resources_0>, <input#id_resources_1>, <input#id_resources_2>, <input#id_resources_3>, <input#id_resources_4>, <input#id_resources_5>, <input#id_resources_6>, <input#id_resources_7> ]


console.log(risorse[1].nextSibling.innerHTML)
give=> undefined

Answer

Sorry, but checkbox doesn't have a text attribute, according to this link, the only attributes are: checked, name, required, value.

You will need to update your code, probably have an object somewhere in your app with key=>text so you can find the text that correspond to specific key, something like this:

var _texts = {'1': 'Text 1', '2': 'Text 2'};
var risorse = myform.resources;

for (var i = 0; i < risorse.length; i++) {
    document.write("risorse: " + _texts[risorse[i].value]);
}

Fill free to validate if risorse[i].value exist in texts, you can use the hasOwnProperty function.

Or, you can take advantage of you current html and use the nextSibling:

var risorse = myform.resources;

for (var i = 0; i < risorse.length; i++) {
    document.write("risorse: " + risorse[i].nextSibling.innerHTML);
}
Comments