Using django form within custom html template

Question

I have a html file that I wanna use this template to render my form and save it to my database How to do this? HTML code:

    <div class="container-contact100">
        <div class="wrap-contact100">
            <form class="contact100-form validate-form" enctype="multipart/form-data" method="POST">
                {% csrf_token %}
                <span class="contact100-form-title">
                    Add Item!
                </span>

                <div class="wrap-input100 validate-input" data-validate="Name is required">
                    <span class="label-input100">Title</span>
                    <input class="input100" type="text" name="name" placeholder="Enter food name">
                    <span class="focus-input100"></span>
                </div>

                <div class="wrap-input100 validate-input">
                    <span class="label-input100">Price</span>
                    <input class="input100" type="number" name="price" placeholder="Enter food price">
                    <span class="focus-input100"></span>
                </div>

                <div class="wrap-input100 validate-input" data-validate = "Message is required">
                    <span class="label-input100">Description</span>
                    <textarea class="input100" name="message" placeholder="Your description here..."></textarea>
                    <span class="focus-input100"></span>
                </div>

                <div class="wrap-input100 validate-input" data-validate="Image is required">
                    <input type="file" class="custom-file-input" id="customFile" name="filename">
                    <label class="custom-file-label" for="customFile">Choose file</label>
                    <span class="focus-input100"></span>
                </div>

                <div class="container-contact100-form-btn">
                    <div class="wrap-contact100-form-btn">
                        <div class="contact100-form-bgbtn"></div>
                        <button class="contact100-form-btn" type="submit">
                            <span>
                                Add
                                <i class="fa fa-long-arrow-right m-l-7" aria-hidden="true"></i>
                            </span>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>



    <div id="dropDownSelect1"></div>

and here is my forms.py :

from django import forms
from .models import Product

class AddItemForm(forms.ModelForm):
    class Meta:
        model = Product
        fields = '__all__'

even you can access my project from this link via github:

https://github.com/imanashoorii/FoodMenu.git

SLDem · Accepted Answer · 2021-01-09 12:19:43Z

2

You have to set the name attributes in your form in your html according to field names of your Porudct model like this (using data from your GitHub link):

add_product.html

<form method="post" enctype="multipart/form-data"> # here define enctype attribute so your form can accept images
    {% csrf_token %}
    <input type="text" name="title">
    <input type="text" name="description">
    <input type="number" name="price">
    <input type="file" name="image">
    <button type="submit">Submit</button>
</form>

Or instead of manually defining each field you can just pass a {{ form.as_p }} to your html to render each field inside a <p> tag like this:

<form method="post" enctype="multipart/form-data"> 
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Submit</button>
</form>

Then here is how you would save it in a view:

views.py

def add_product(request):
    if request.method == 'POST':
        form = AddItemForm(request.POST, request.FILES) # request.FILES is so your form can save images
        if form.is_valid()
            form.save()
            return redirect('home') # redirect to a valid page
    else:
        form = AddItemForm()
    return render(request, 'add_product.html', {'form': form})

edited Jan 9, 2021 at 12:19

answered Jan 9, 2021 at 11:45

SLDem

2,2021 gold badge13 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Iman Ashoori Over a year ago

please ignore add_product.html and see index.html , I want to use form fields within index.html template for each element ...

SLDem Over a year ago

add_product.html is just an example, you can use any template you want my friend

Iman Ashoori Over a year ago

dude thxx to your response and your help :* , but just right now I made some changes to my views.py add_product and just fix my problem .

SLDem Over a year ago

so your problem is fixed?

Iman Ashoori Over a year ago

yep thnx ,,, add it as an answer here

|

Iman Ashoori · Accepted Answer · 2021-01-09 12:20:36Z

0

I have fixed my problem by changing views.py to this and fix it :

if form.is_valid():
    title = request.POST.get('title')
    description = request.POST.get('description')
    price = request.POST.get('price')
    image = request.POST.get('image')
    form.save()
    return redirect("food:home")

answered Jan 9, 2021 at 12:20

Iman Ashoori

548 bronze badges

1 Comment

SLDem Over a year ago

you dont have to request data to each field here, since you're not using it anywhere in your view function, just form.save() is enough after validation :)

Collectives™ on Stack Overflow

Using django form within custom html template

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related