get field value on its change in django models

Hi everyone, I hope you are fine.
I have two fields with the name of price and discountedPrice in a model.
The thing that I want is to get the values of these two fields on their change to calculate the discount percent from them before the admin clicks on the save button.
I will thank anyone to give me a piece of guidance about this matter.

To confirm that I understand what you’re asking for -

You have a form being displayed in the browser.

The form has two fields, price and discountedPrice.

When the user updates something (what? Either field?) you want another field on the page to calculate the percentage of those two values and update the page - without having to click a button.

If this is correct, then this needs to be done in JavaScript. You can catch the “blur” or the “keyup” events for those two fields, perform your calculation, and put the result value into your third field.

Excuse me, I don’t mean that.
I mean I have an ecommerce website that the admin can see a product model in the database and the product model includes two fields with the names of price and discountedPrice.
I want when the admin types the prices in these two fields, the discount percent be calculated before clicking the save button.
Now can you understand what I mean?

Oh, ok, I understand you now.

You assign the value of the calculation to the field in the model where it’s going to be stored.

It’s no different than assigning any other value to a field.

It would be a lot easier to explain if you posted your model and your view here.

Ok off course, here is the picture of my model in the admin panel:


I want to calculate discount percent and put the percent in the discount percent field when the admin types two values for price and discount price and I want to do this before clicking on the save button and doing this challenge is really important for me.

This gets back to the JavaScript suggestion above.

Which one is it?

Do you want the calulations to be performed before the save button is clicked (requiring JavaScript), or do you want the calculations to be performed to save the discount percent in the model after the button is clicked? (Which can be done in the model, the model form, or the admin class)

Dear Mr. Whitesell, I want the calulations to be performed before the save button is clicked and I know that it requires JavaScript.
And here is my model admin code:

@admin.register(ProductList)
class ProductListAdmin(admin.ModelAdmin):
    list_display = ["name", "assortment", "image", "price", "discounted_price", "created_by"]
    search_fields = ["name"]
    list_filter = ["assortment", DiscountPercentFilter]
    readonly_fields = ["discount_percent", "created_by"]

    class Media:
        js =( "admin/js/discount.js")

    def save_model(self, request, obj, form, change):
        obj.created_by = request.user
        super().save_model(request, obj, form, change)

But I have a problem that I want the discount.js file to be loaded when the admin wants to add a product but now discount.js file is also be loaded when showing the queryset of the productList.

Why would that be a problem?

The problem is that the only time that I want the discount.js to be executed is when admin click on the plus or add button to add a product to calculate the discount percent but now the discount.js is also loaded on the page which all of the products are showing.

You’re worried about a non-problem. If your code is listening for the right events to be triggered, then it’s not going to execute on a page that doesn’t fire those events.

Please wait a minute to send you the pictures to tell you better that I mean

I understand what you’re saying. I’m just trying to explain to you that loading extra JavaScript that isn’t going to be used isn’t a problem to worry about.

For example I have put a simple alert in discount.js.
The two below pictures show that if admin wants to see all of products in the product page this file is loaded and the alert is showing and then the list of all products will be showed that I don’t want to be like this.



The only thing that I want is to loading discount.js when the admin clicks on the add product lists button that is in the right side and left side of this page.

Your problem isn’t that the file is being loaded. The problem is that you have a totally unnecessary alert box being shown at the file level. Do this right and you have no problem.

New related title:
“realtime django model field to calculate and show text before saving”
body:
“I have two fields with the name of price and discountedPrice in a model. The thing that I want is to get the values of these two fields on their change to calculate the discount percent from them and showing the discount percent before the admin clicks on the save button. I will thank you to give me a piece of guidance about this matter.”

It seems to me that this question is addressed above.

What information are you looking for that isn’t already covered?

Dear Mr. Whitesell the previous time that we were chatting to solve the problem I did not come up with the solution that you have told because I have explained my question incorrectly.So please forget the previous details of my question.
Right now I mean I want to have two model fields that when the admin enter a text in one of them, the other field show the realtime text of that, such as this codepen example
Ho can I have this item in django models in the admin panel?

As the codepen shows - you need to add the JavaScript to your admin page to do that.

Django has no control over the browser once the page has been rendered and sent. Every UI enhancement that you wish to implement in the browser must be done using JavaScript that gets added to the page.

It doesn’t matter what that enhancement is - whether it’s a calculation or other display modification. It’s all addressed using JavaScript.

OK that’s right.
So can I use a js file to control the admin page of adding an object ?

You can add a JS file to your admin page, yes. See ModelAdmin asset definitions