I have a form which is generated from a database. In the database I have strings such as 'Española' which will become options in a drop down menu.
A the moment my html looks like:
<option value="Española">Española</option>
I am using these values for a dynamic part of the form from which I need to send AJAX requests.
I can see that, when using IE, the header is like so:
GET /collections/find_island?island_group=Espa�ola HTTP/1.1" 500 63206
when it should be:
GET /collections/find_island/?island_group=Espa%C3%B1ola HTTP/1.1" 200 164
As generated by other browsers.
Is there some way I can get this output in my template:
<option value="Espa%C3%B1ola">Española</option>
Any help much appreciated.
EDIT:
My form:
def form(forms.Form):
...
island_group = forms.ModelChoiceField(
required=False,
label=ugettext_lazy('Island Group'),
initial=None,
queryset=Localityonline.objects.values_list('islandgroup', flat=True).distinct('islandgroup').order_by('islandgroup'),
empty_label=ugettext_lazy("Not Specified"),
widget=forms.Select(attrs={"class":'searchfield', "onChange":'getIslandName()'})
)
the javascript:
function getIslandName(lang) {
var islandGroup = document.getElementById("id_island_group").value;
if (islandGroup == '') {
// if Not Specified re-selected then set data to null and bypass updatePage()
var data = null;
update_select($('select[name=island_name]'), data);
}
else {
var url = "../collections/find_island?island_group=" + islandGroup;
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);
}
}