Obtenir la valeur du champ sélectionné dans une liste déroulante

Question

J'ai cette classe dans mon modèle:

class ServiceCharge(models.Model): 
    name = models.CharField(max_length=30) 
    amount = models.PositiveIntegerField() 
    extends_membership = models.BooleanField(default=False) 

    def __unicode__(self): 
    return str(self.name) 

Ce que je veux avoir est sous la forme pour les utilisateurs de charge les frais de service, lorsqu'une charge est choisie dans le menu déroulant, les deux valeurs pour amount et extends_membership sont mises à jour sur le formulaire en fonction de la charge sélectionnée.

Mon forms.py:

class vModelChoiceField(forms.ModelChoiceField): 
    def label_from_instance(self, obj): 
    return "%s" % obj.name 

class PayServiceChargeForm(PaymentsForm): 
    service_charge = vModelChoiceField(queryset=ServiceCharge.objects.all(), 
     empty_label="  ") 

    class Meta(PaymentsForm.Meta): 
     exclude = ('member', 'payment_type', 'transacted_by', 'description') 

Ensuite, le modèle de formulaire:

<table border="0"> 
    <tr> 
    <td><strong>{% trans "Service Charge" %}</strong></td> 
    <td>{{ form.service_charge }}</td> 
    <td><strong>{% trans "Extends Membership" %}</strong></td> 
    <td>{{ form.extends_membership }}</td> 
    </tr> 
    <tr> 
    <td valign="top"><strong>{% trans "Expiry Date" %}</strong></td> 
    <td valign="top">{{ form.expiry_date }}</td> 
    <td valign="top"><strong>{% trans "Amount" %}</strong></td> 
    <td>{{ form.amount }}</td> 
    </tr> 
</table> 

J'ai essayé quelques-uns, mais jQuery je me suis coincé après avoir obtenu la charge sélectionnée:

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#id_service_charge").change(onSelectChange); 
}); 

function onSelectChange(){ 
    var selected = $("#id_service_charge option:selected");  
    var output = ""; 
    if(selected.val() != 0){ 
     charge = selected.val(); 
     .... (update values) .... 
    } 
} 
</script> 

Answer 1

Je ferais cela en faisant AJAX appel au serveur pour le montant et extended_membership associé à charge sélectionnée et puis mettez à jour les champs html avec les données récupérées.

Pour ce faire, vous devez ajouter quelque chose comme ça à onSelectChange()

$.post(URL_TO_YOUR_VIEW, {charge: charge}, function(data) { 
    //here you can use jquery to insert values to the html like this: 
    $('#id_ammount').val(data.ammount); 
    //also update extended membership you can sth like this: 
    if(data.extended_membership) 
    { 
     $('#id_extended_membership').attr('checked', 'checked'); 
    } 
    else 
    { 
     $('#id_extended_membership').removeAttr('checked'); 
    } 
}, "json"); 

Du côté du serveur, vous devez ajouter en vue de gérer l'appel ajax. Il pourrait ressembler à ceci:

def magic_view_name(request): 
    if request.is_ajax() and request.method == 'POST': 
     charge = request.POST['charge'] 
     ammount = #get ammount somehow 
     extended_memebership = #get ext. memebership somehow 
     data = simplejson.dumps({'ammount': ammount, 
           'extended_membership': extended_membership}, 
           encoding="utf-8", 
           ensure_ascii=False) 
     return HttpResponse(data, mimetype="application/javascript") 

    return HttpResponse(u'No data for you') 

Vous devez également ajouter modèle approprié URL pour votre urls.py et qui devrait fonctionner.

J'espère que cela vous aide. BTW, je suppose que vous ne voulez pas permettre aux utilisateurs de modifier le prix pour ServiceCharge sélectionné. Si tel est le cas, vous pouvez les afficher en tant que valeurs readonly et non en tant que champs de formulaire modifiables.