Llamar a ajax en el botón desplegable

I've created a form and populating its value from Category model in drop down box. Its working. I displayed this form in template like this {{ language_form }}.It worked. Now I want to implement onchange event on this drop down with ajax. Function will call on change of drop down value.

Edit:it can be done like this without django forms . <select onchange='ajaxfunction()'></select> But I'm using django forms.

El formulario

from django import forms
from myapp.movie.models import Category
class Language(forms.Form):
     language = forms.ModelChoiceField(queryset=Category.objects.all())

Here is my Ajax function

   function showMovie(str) {
        if (str == "") {
            document.getElementById("txtHint").innerHTML = "";
            return;
        }
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
        else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET", "movie_list?q=" + str, true);
        xmlhttp.send();
    }

preguntado el 08 de noviembre de 11 a las 08:11

2 Respuestas

If you want to just add onchange attr, then:

class Language(forms.Form):
    language = forms.ModelChoiceField(queryset=Category.objects.all(), widget=forms.Select(attrs={'onchange':'ajaxfunction()'}))

Or you can render form manually.

respondido 08 nov., 11:13

Thanks. One this . Is it correct widget=forms.Select(attrs={'onchange':'ajaxfunction(this.value)'}) ? Want to pass selected value. - Sin libertad

@user559744 Yes, it's just a string. - DrTyrsa

oh ok. But I want to send selected drop box value. - Sin libertad

Add this code in the end of your form.

...
</form>

    <script type="text/javascript">
        var ddl = document.getElementById('ddlYourDropDownListID');
        ddl.onchange = function() {
            var str = 'someValue';
            showMovie(str);
        };
    </script>

</body>
</html>

respondido 08 nov., 11:13

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.