I have to show some data base on selection drop down list, the form is dynamic, here is my teplates
function imeiInfo () {
$('select').change(function(e) {
e.stopImmediatePropagation();
let elm = $(this);
data = {};
data[elm.attr("name")] = elm.val();
$.ajax({
url:'/ajax/return_back_imei_plusinfo/',
data:data,
success:function(data){
console.log(data.price)
if (data.price){
elm.closest("div.child_imeiforms_row").find("input.nrx").val(data.price);
}
if (data.mobile){
elm.closest("div.child_imeiforms_row").find("input.mobile-type").val(data.mobile);
}
}
})
})
}
imeiInfo(); <form action="" method="POST" id="create-permcustomer-invoice">{% csrf_token %}
<div class="row">
<div class="col-md-6">
<div class="form-group">
<i class="fas fa-file-signature"></i>
<label>customer</label>
{{ main_form.customer | add_class:'form-control' }}
</div>
<p class="text-danger text-center" hidden id="collection_date_error"></p>
</div>
<div class="col-md-2">
<div class="form-group">
<i class="fas fa-box-usd"></i>
<label>balance</label>
<input type="number" disabled class="form-control" id="balance_cus">
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
<div class="col-md-4 pull-right">
<div class="form-group">
<i class="far fa-clock"></i>
<label>date</label>
{{main_form.created | add_class:'form-control text-center'}}
</div>
<p class="text-danger text-center" hidden id="company_error"></p>
<!-- /.form-group -->
</div>
</div>
<div class="row no-gutters title_info text-center table-bordered text-white">
</div>
{{imei_forms.management_form}}
<div id="form-imeilists">
{% for imei in imei_forms %}
{{imei.id}}
<div class="child_imeiforms_row">
<div class="row no-gutters table-bordered">
<div class="col-md-3">
<div class="form-group">
{{imei.item | add_class:'form-control choose'}}
<div class="text-danger text-center" hidden></div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<input type="text" disabled class="form-control mobile-type" placeholder='mobile type '>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
{{imei.price | add_class:'nrx'}}
<div class="text-danger text-center" hidden></div>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
{{imei.discount | add_class:'dis'}}
<div class="text-danger text-center" hidden></div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
{{imei.cash | add_class:'cash'}}
<div class="text-danger text-center" hidden></div>
</div>
</div>
{% endfor %}
</div>
<div id="empty-imei-invoiceform" class="hidden">
<div class="row no-gutters table-bordered">
<div class="col-md-3">
<div class="form-group">
{{imei_forms.empty_form.item | add_class:'form-control choose'}}
<div class="text-danger text-center" hidden></div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<input type="text" disabled class="form-control mobile-type" placeholder='mobile type'>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
{{imei_forms.empty_form.price | add_class:'nrx'}}
<div class="text-danger text-center" hidden></div>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
{{imei_forms.empty_form.discount | add_class:'dis'}}
<div class="text-danger text-center" hidden></div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
{{imei_forms.empty_form.cash | add_class:'cash'}}
<div class="text-danger text-center" hidden></div>
</div>
</div>
<button type="button" class="btn btn-lg btn-info" id="add-more-invoice">add new row</button>
<div class="card-footer">
<div class="row justify-content-center">
<button type="submit" class="btn btn-lg btn-success">save</button>
</div>
</div>
</form>but it only works well for the first form, after the form, i’ve to select the drop down list in order to return the data !
and here is my views.py
@login_required
def return_back_imei_plusinfo(request):
query = request.GET
for item in query:
if item.startswith("imei-") and item.endswith("-item"):
item_id = query.get(item)
break
selling_price= Imei.objects.get(id=item_id).mobile.selling_price,
mobile=Imei.objects.get(id=item_id).mobile.mobile.model,
data = {
'price' : selling_price,
'mobile':mobile,
}
return JsonResponse(data)
and here is my forms.py
class ImeiModelChoiceField(ModelChoiceField):
def label_from_instance(self,obj):
return str(obj.imei)
class ImeiInvoiceForm(forms.ModelForm):
item = ImeiModelChoiceField(queryset=Imei.objects.filter(status=True),widget=forms.Select(attrs={'onchange':'imeiInfo();'}))
class Meta:
model = ImeiInvoice
fields = ['item','price','cash','discount']
widgets = {
'price':forms.NumberInput(attrs={'class':'form-control','onkeyup':'totalSum()'}),
'cash':forms.NumberInput(attrs={'class':'form-control','onkeyup':'totalSum()'}),
'discount':forms.NumberInput(attrs={'class':'form-control','onkeyup':'totalSum()'}),
}
is there another way achieve that please !?
thank you in advance ..