django forms ajax get client's data from db - ajax

Question

Hello im trying to fill the field "amount" that cointains the price of the payment_plan, and the payment_plan is part of the client information. I've been searching and the way to do it is implementing Ajax, but i have not found an example with django forms, every solution is really diferent from mine.
this is the model:
class Payment_Plans(models.Model):
name = models.CharField(max_length=20, primary_key=True)
price = models.IntegerField(default='0')
def __unicode__(self):
return self.name
class Clients(models.Model):
id = models.IntegerField(max_length=10, primary_key=True, default=0)
payment_plan = models.ForeignKey(Payment_Plans, null=True)
def __unicode__(self):
return self.id
class Payments(models.Model):
client = models.ForeignKey(Clients)
month_from = models.DateField(default='1111-01-01')
month_to = models.DateField(default='1111-01-01')
amount = models.IntegerField(default='0')
def __unicode__(self):
return self.month_from.strftime('%Y-%m-%d')
this is my payment form:
class PaymentsForm(forms.ModelForm):
month_from = forms.DateField(widget=DateTimePicker(options={"format": "YYYY-MM-DD", "pickTime": False}), label="Mes desde")
month_to = forms.DateField(widget=DateTimePicker(options={"format": "YYYY-MM-DD", "pickTime": False}), label="Mes Hasta")
amount = forms.IntegerField(label="Monto")
client = forms.ModelChoiceField(queryset=Clients.objects.all(), label="Cliente")
class Meta:
model=Payments
fields = ('month_from', 'month_to', 'amount', 'client')
This is the template:
{% extends 'base.html' %}
{% load bootstrap %}
{% block titulo %}Realizar Pago{% endblock%}
{% block encabezado %}
<h1>Realizar Pago</h1>
<!-- Para el datepicker -->
{{ form.media }}
{% endblock%}
{% block contenido %}
<form id='form' method='POST' action=''>{% csrf_token %}
<div class="col-sm-4">
</div>
<div class="col-sm-4">
{{ form.client|bootstrap }}
{{ form.month_from|bootstrap }}
{{ form.month_to|bootstrap }}
{{ form.amount|bootstrap }}
{{ form.days_left|bootstrap }}
<input type='submit' name='submit' value='Pagar' class="btn btn-default"/>
</div>
</form>
{% endblock%}
this should work like this:
1) the user selects the Client (right now its just a select box, in future autocomplete field)
2) the form should look into the client's payment_plan and then into the payment_plan price.
3) field should be filled with the price
how can i achive this? is it possible with django forms? shall i write manually the template instead of ussing tags like {{forms.client}}? if thats the case, how do i get the Clients?

Answer 1

You can use AJAX, you just need to know the fields' ids. Set an onchange (or .change() if you're using jquery) event on the 'client' field that sends the client id to a view, for instance, '/client-price' that will use it to query for the other price. Something like:
$( "#client" ).change(function() {
clientID = $(this).val();
$.ajax({
type: "GET", // if you choose to use a get, could be a post
url: "/client-price/?id=" + clientID,
success: function(data) {
$( "#amount" ).val(data.price);
});
The view/url would take the id. This post shows how you'd want to format your view to send back a json response.

Answer 2

Thanks onyeka! after some research with ajax and json the code looks like this:
view: (remember to import from django.http import JsonResponse)
def amount(request):
if request.method == 'GET':
total_amount = model.amount
response_data ={}
response_data['amount'] = total_amount
return JsonResponse(response_data)
ajax.js:
$(document).ready(function() {
$('#id_client').change(function(){
var query = $(this).val();
console.log(query);
$.ajax({
url : "/amount/",
type : "GET",
dataType: "json",
data : {
client_response : query
},
success: function(json) {
document.getElementById('id_amount').value=json.amount;
},
failure: function(json) {
alert('Got an error dude');
}
});
});
});
url.py
add corresponding line:
url(r'^amount/$', 'main.views.amount', name='amount'),