How can I add javascript file to my ModelForm in django?

Question

I want to display a separate div tags based on the selection of dropdown, I am using ModelForm to create my template. I am not sure how to add a javascript in my ModelForm.

forms.py

class CustomerForm(forms.ModelForm):
    name = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Customer Name '}))
    address = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Customer Address'}))
    phone_number = forms.IntegerField(widget=forms.TextInput(attrs={'placeholder': 'Customer Phone Number '}))
    email = forms.EmailField(widget=forms.TextInput(attrs={'placeholder': 'Customer Email'}))
    contact_person = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Contact person'}))
    # amc = forms.BooleanField(widget=forms.TextInput(attrs={'placeholder': 'type "amc" if the customer is in AMC'}))
    amc_date = forms.DateField(widget=forms.TextInput(attrs={'placeholder': 'ex: Jan 20, 1996','id':'disabledInput'}))
    amc_product = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Products listed in AMC'}))
    # warranty = forms.BooleanField(widget=forms.TextInput(attrs={'placeholder': 'Type "warranty" if the customer is in Warranty'}))
    warranty_date = forms.DateField(widget=forms.TextInput(attrs={'placeholder': 'ex: Jan 20, 1996'}))
    warranty_product_list = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Products listed in warranty'}))
    # on_call = forms.BooleanField(widget=forms.TextInput(attrs={'placeholder': 'Type "oncall/on call" if it is On Call'}))
    # support = forms.CharField(widget=forms.TextInput(attrs={'placeholder':'Enter: amc/warranty/oncall'}))
    support = forms.ChoiceField(choices=support_choice, required=True, widget = forms.Select(attrs={'onchange' : 'customer()'}))

class Meta:
    model = Customer
    fields = ['name','address','phone_number','email','contact_person','support','amc_date','amc_product','warranty_date',
              'warranty_product_list']

I want to display the 'amc_date' & 'amc_product' when amc is selected from the options of 'support' and 'warranty_date' & 'warranty_product_list' when 'warranty' is selected from the options of 'support'.

customer_detail.html

<script type="text/javascript" src="{% static 'js/customer_detail.js' %}"></script>

<form method="post" action="" enctype="multipart/form-data">
   {% csrf_token %}
   {{ form|crispy }}
   <input type="submit" class="btn btn-default " value="Submit">
</form>

I am not sure how to use Javascript in my ModelForm, please help.

This question is way too broad. You'd use JavaScript in the same way you would if you were creating a static HTML form. Target elements by ID or `name`, and show/hide them as needed. — rnevius, Mar 14 '16 at 14:22

Satyajeet · Answer 1 · 2016-03-14T15:20:01.743

12

Django way will be

class CustomerForm(forms.ModelForm):
    .
    .
    class Media:
        js = ('js/customer_detail.js',)

and then include it like {{<yourformname>.media}} in your template, And write your javascript code inside that customer_detail.js

edited Mar 14 '16 at 15:20

answered Mar 14 '16 at 14:53

Satyajeet

2,004
15
22

This is something new. I didn't knew it. Thanks. – Parag Tyagi Mar 14 '16 at 15:18
@itsecurity what is not working..! you need to write all that javascript inside that JS file like one of answer is suggesting. – Satyajeet Mar 15 '16 at 10:56
Its working, I linked the js file located in my app directory but my static files are located in staic directory which is outside my app directory. thanks for the help. – itsecurity Mar 16 '16 at 07:18
I have another html template and it do not have a model form just a view, i included the staticfiles and its not working. – itsecurity Mar 16 '16 at 11:53
I have a modal window for all my forms and this is realy awesome, I didn't know it – cwhisperer May 25 '21 at 09:58

score 3 · Answer 2 · answered Mar 14 '16 at 14:40

I have not tested this but this is how it should be (I am using jQuery here).

forms.py

class CustomerForm(forms.ModelForm):
    name = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Customer Name '}))
    address = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Customer Address'}))
    phone_number = forms.IntegerField(widget=forms.TextInput(attrs={'placeholder': 'Customer Phone Number '}))
    email = forms.EmailField(widget=forms.TextInput(attrs={'placeholder': 'Customer Email'}))
    contact_person = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Contact person'}))
    # amc = forms.BooleanField(widget=forms.TextInput(attrs={'placeholder': 'type "amc" if the customer is in AMC'}))
    amc_date = forms.DateField(widget=forms.TextInput(attrs={'placeholder': 'ex: Jan 20, 1996','id':'disabledInput'}))
    amc_product = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Products listed in AMC'}))
    # warranty = forms.BooleanField(widget=forms.TextInput(attrs={'placeholder': 'Type "warranty" if the customer is in Warranty'}))
    warranty_date = forms.DateField(widget=forms.TextInput(attrs={'placeholder': 'ex: Jan 20, 1996'}))
    warranty_product_list = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Products listed in warranty'}))
    # on_call = forms.BooleanField(widget=forms.TextInput(attrs={'placeholder': 'Type "oncall/on call" if it is On Call'}))
    # support = forms.CharField(widget=forms.TextInput(attrs={'placeholder':'Enter: amc/warranty/oncall'}))
    support = forms.ChoiceField(choices=support_choice, required=True)

class Meta:
    model = Customer
    fields = ['name','address','phone_number','email','contact_person','support','amc_date','amc_product','warranty_date',
              'warranty_product_list']

customer_detail.html

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    </head>

    <form method="post" action="" enctype="multipart/form-data">{% csrf_token %}
        {{ form|crispy }}
       <input type="submit" class="btn btn-default" value="Submit">
    </form>

    <script>
    $(function(){
        function hideInputs() {
            $("#id_amc_date").hide();
            $("#id_amc_product").hide();
            $("#id_warranty_date").hide();
            $("#id_warranty_product_list").hide();
        }

        $("#id_support").on('change', function(){
            var val = $("#id_support").val();
            if (val == 'amc') {
                $("#id_amc_date").show();
                $("#id_amc_product").show();
            } else if (val == 'warranty') {
                $("#id_warranty_date").show();
                $("#id_warranty_product_list").show();
            } else {
                hideInputs();
            }
        });

        hideInputs();
    });
    </script>
</html>

With this, it will only work if using a singe instance of the form on the page because we're fetching html elements by their ids. Is there a way to modify the solution so that it will work with multiple forms of the same type in the same page? Maybe by including the form prefix? — Algorithmatic, Mar 29 '17 at 01:16

How can I add javascript file to my ModelForm in django?

2 Answers2