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, c'est que dans le formulaire permettant de facturer des frais de service aux utilisateurs, lorsqu'un frais est sélectionné dans le menu déroulant, les deux valeurs de amount y extends_membership sont mises à jour dans le formulaire en fonction de la charge sélectionnée.

Mon formulaire 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')

Puis 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'étais en train d'essayer un peu de jQuery mais je me suis retrouvé bloqué après avoir récupéré 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

Pour ce faire, j'effectuerais un appel AJAX au serveur pour obtenir le montant et l'affiliation étendue associés aux frais sélectionnés, puis je mettrais à jour les champs html à l'aide des données récupérées.

Pour ce faire, vous devez ajouter quelque chose comme ceci à 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");

Côté serveur, vous devez ajouter une vue pour gérer les appels ajax. Cela peut 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 le modèle d'url approprié à votre urls.py et cela devrait fonctionner.

J'espère que cela vous aidera.

BTW, je suppose que vous ne voulez pas permettre aux utilisateurs de modifier le prix d'un ServiceCharge sélectionné. Si c'est le cas, vous pouvez les afficher comme des valeurs en lecture seule et non comme des champs de formulaire modifiables.