I'm currently working on a project that involves creating a dynamic list using radio buttons. While I have been successful in retrieving the values for the list, I am facing difficulty in displaying it on the webpage.
Below is the JavaScript code snippet:
$(document).ready(function() {
$("select[name=city]").change(function() {
if ($(this).val() == '') {
$("select[name=term]").html("<option>Select a frequency</option>");
$("select[name=term]").attr('disabled', true);
}
else {
var url = "/locality/city/" + Number($(this).val());
console.log(url)
$.getJSON(url, function(frequency_list) {
var li = '<ul id="id_term"><li><label><input id="id_term_0" type="radio" value="-1" name="term"></input>None</label></li>'
for (var i = 0; i < frequency_list.length; i++) {
// console.log(frequency_list[i][0],frequency_list[i][0]);
var id = "id_term_" + String(i)
li += '<li><label><input id='+String(id)+ ' type="radio" value='+frequency_list[i][0]+ ' name="term"></input>'+frequency_list[i][1]+'</label></li>'
console.log(li);
}
li +='</ul>'
$("select[name=term]").html(li);
// $("select[name=term] li:first").attr('selected', 'selected');
$("select[name=term]").attr('disabled', false);
});
}
});
$("select[name=term]").change(function(vent) {
if ($(this).val() == -1) {
return;
}
});
});
Here are the form definitions:
class CityForm(forms.Form):
city = forms.ModelChoiceField(queryset=City.objects.all().filter(tagged=True))
class FrequencyForm(CityForm):
"""
Generates a form consisting of a list of trigrams, bigrams and unigrams in ratio 8:8:2
"""
def __init__(self, *args, **kwargs):
super(FrequencyForm, self).__init__(*args, **kwargs)
self.frequency_list = [('-1','None')]
self.fields['term'] = forms.ChoiceField(choices=self.frequency_list, required=True, widget=forms.RadioSelect())