CODEWITHSUNDEEP
pythonhtmlcssdjangodjango-forms
Asusoft
Asusoft

Reputation: 362

How to put django model form in a ready made template

I have a model form that allows user to post and upload pics. It works normally on a blank template. So now i want to put the form in a ready made template that has field for creating posts and upload pics. The page looks like this: The page looks like this:

My models.py:

class Post(models.Model):
    post = models.CharField(max_length=3000)
    pic = models.ImageField(blank=True)
    user = models.ForeignKey(User, on_delete=models.DO_NOTHING)
    created = models.DateTimeField(auto_now_add=True)
    updated = models.DateTimeField(auto_now=True)

Forms.py

class PostForm(forms.ModelForm):
    post = forms.CharField(widget=forms.TextInput())

views.py

class BaseView(TemplateView):
    template_name = 'base.html'

    def get(self, request):
        form = PostForm()
        posts = Post.objects.all().order_by('-created')
        users = User.objects.exclude(id=request.user.id)

        args = {'form': form,'users': users, 'posts': posts}
        return render(request, self.template_name, args)
    
    def post(self, request):
        form = PostForm(request.POST, request.FILES)
        if form.is_valid():
            post = form.save(commit=False)
            post.user = request.user
            post.save()
            
            pics = form.cleaned_data['pic']
            text = form.cleaned_data['post']
            form = PostForm()
            return redirect('base')

        args = {'form': form, 'text': text, 'pics':pics}
        return render(request, self.template_name, args)

And in the template i want to use the fields is like this:

<div class="create-post">
                <div class="row">
                    <div class="col-md-7 col-sm-7">
                  <div class="form-group">
                    <img src="images/users/user-1.jpg" alt="" class="profile-photo-md" />
                    <textarea name="texts" id="exampleTextarea" cols="30" rows="1" class="form-control" placeholder="Write what you wish"></textarea>
                  </div>
                </div>
                    <div class="col-md-5 col-sm-5">
                  <div class="tools">
                    <ul class="publishing-tools list-inline">
                      <li><a href="#"><i class="ion-images"></i></a></li>
                    </ul>
                    <button class="btn btn-primary pull-right">Publish</button>
                  </div>
                </div>
                </div>
            </div>

help please if you know how i can solve this. Thank you.

Upvotes: 0

Views: 1006

Answers (2)

Ceetified_karma
Ceetified_karma

Reputation: 368

Get the form fields id by using the normal {{ form }} tag, Inspect with browser developer tool and get the field name and id Add the name and id to the ready made form respective input Eg if your rendered field id for text area is id_post , add id_post as text area id ..... Also change your post modelform widget to text area to Mach your ready made form

 class PostForm(forms.ModelForm):
         post = forms.CharField(widget=forms.Textarea())

<textarea name="post" id="id_post" cols="30" rows="1" class="form- 
     control" placeholder="Write what you wish"></textarea>

Upvotes: 1

Peter Galfi
Peter Galfi

Reputation: 374

You would need to render the form fields manually as per the docs here: https://docs.djangoproject.com/en/3.0/topics/forms/#rendering-fields-manually

So for your template this would look something like this (sketched):

<div class="create-post">
    <div class="row">
        <form action="{ url .... }" method="post">
            <div class="col-md-7 col-sm-7">
                <div class="form-group">
                    {{ form.pic }}
                    {{ form.post }}
                </div>
            </div>
            <div class="col-md-5 col-sm-5">
                <div class="tools">
                    <ul class="publishing-tools list-inline">
                        <li><a href="#"><i class="ion-images"></i></a></li>
                    </ul>
                    <button class="btn btn-primary pull-right">Publish</button>
                </div>
            </div>
        </form>
    </div>
</div>

You can specify the widgets (e.g. textarea for the post field) in your ModelForm. You can see examples here: https://docs.djangoproject.com/en/3.0/ref/forms/widgets/#specifying-widgets

Upvotes: 1

Related Questions