How to share a list object with custom form - html

Question

Am trying to share posted objects on list view but each time that I click on the share button which redirect me to share_form.html after typing into the shared textarea and submit the form it doesn't submit the shared object form, unless I use context variable {{ form }} before the object could be shared, why is it that when I use my custom form it doesn't submit the shared post? but rather when i do say {{ form }} then it's able to share the post?
Here is my view to share post
def share_post(request, pk):
original_post = Post.objects.prefetch_related('postimage_set').get(pk=pk)
form = ShareForm(request.POST, request.FILES)
if form.is_valid():
new_post1 = Post(
shared_body = request.POST.get('description'),
description = original_post.description,
username = original_post.username,
date_posted = original_post.date_posted,
video = original_post.video,
shared_on = datetime.now(),
shared_user = request.user)
new_post1.save()
for image in original_post.postimage_set.all():
new_post = PostImage(post=new_post1,
username=original_post.username,
image=image.image)
new_post.save()
return redirect('feed:feed')
ctx = {'form':form,'original_post':original_post}
return render(request,'feed/share_form.html', ctx)
My django form model to share post!
class ShareForm(forms.Form):
body = forms.CharField(label='',widget=forms.Textarea(attrs={
'rows': '3',
'placeholder': 'Say Something...'
}))
My html form to share post
<div class="main_content">
<div class="mcontainer">
<div class="md:flex md:space-x-6 lg:mx-16">
<div class="space-y-5 flex-shrink-0 md:w-7/12">
<div class="card lg:mx-0 uk-animation-slide-bottom-small">
<form method="POST" action="" enctype="multipart/form-data">
<div class="flex space-x-4 mb-5 relative">
<img src="{{ request.user.profile_image.url }}" alt="" class="rounded-full shadow w-12 h-12">
<div class="flex-1">
<form action="" method="POST" for='id_shared_body' enctype="multipart/form-data" >
{% csrf_token %}
<div class="grid md:grid-cols-2 gap-4">
<div class="col-span-2">
<textarea name="shared_body" id="id_shared_body" cols="30" rows="6" class="bg-gradient-to-b from-gray-100 to-gray-100"></textarea></div>
<a href="#" type="submit" class="flex items-center px-3 py-2 hover:bg-gray-200 hover:text-gray-800 rounded-md dark:hover:bg-gray-800">
<div class="uil-share-alt mr-1" type="submit"></div><button>Share Post</button></a>
</div>
</form>
</div>
</div>
<!-- post header-->
<div class="flex justify-between items-center lg:p-4 p-2.5">
<div class="flex flex-1 items-center space-x-4">
<a href="#">
<img src="{{original_post.username.profile_image.url }}" class="bg-gray-200 border border-white rounded-full w-10 h-10">
</a>
<div class="flex-1 font-semibold capitalize">
{{original_post.username.get_full_name}}
<div class="text-gray-700 flex items-center space-x-2"> <span> {{ original_post.date_posted|timesince }} </span> <ion-icon name="people"></ion-icon></div>
</div>
</div>
<div>
<i class="icon-feather-more-horizontal text-2xl hover:bg-gray-200 rounded-full p-2 transition -mr-1 dark:hover:bg-gray-700"></i>
<div class="bg-white w-56 shadow-md mx-auto p-2 mt-12 rounded-md text-gray-500 hidden text-base border border-gray-100 dark:bg-gray-900 dark:text-gray-100 dark:border-gray-700"
uk-drop="mode: click;pos: bottom-right;animation: uk-animation-slide-bottom-small">
<ul class="space-y-1">
<li>
<a href="#" class="flex items-center px-3 py-2 hover:bg-gray-200 hover:text-gray-800 rounded-md dark:hover:bg-gray-800">
<i class="uil-edit-alt mr-1"></i> Edit Post
</a>
</li>
<li>
<a href="#" class="flex items-center px-3 py-2 hover:bg-gray-200 hover:text-gray-800 rounded-md dark:hover:bg-gray-800">
<i class="uil-comment-slash mr-1"></i> Disable comments
</a>
</li>
<li>
<a href="#" class="flex items-center px-3 py-2 hover:bg-gray-200 hover:text-gray-800 rounded-md dark:hover:bg-gray-800">
<i class="uil-favorite mr-1"></i> Add favorites
</a>
</li>
<li>
<hr class="-mx-2 my-2 dark:border-gray-800">
</li>
<li>
<a href="#" class="flex items-center px-3 py-2 text-red-500 hover:bg-red-100 hover:text-red-500 rounded-md dark:hover:bg-red-600">
<i class="uil-trash-alt mr-1"></i> Delete
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="p-3 border-b dark:border-gray-700">
{{ original_post.description }}
</div>
{% if original_post.video %}
<div class="w-full h-full">
<video width="650" height="200" controls>
<source src="{% static original_post.video.url %}" >
</video>
</div>
{% endif %}
<div class="grid grid-cols-2 gap-2 p-2">
{% for p in original_post.postimage_set.all %}
{% if forloop.counter == 1 %}
<a href="{{ p.image.url }}" class="col-span-2">
<img src=" {{ p.image.url }} " alt="" class="rounded-md w-full lg:h-71 object-cover" >
</a>
{% endif %}
{% if forloop.counter == 2 %}
<a href="{{ p.image.url }}">
<img src="{{ p.image.url }} " alt="" class="rounded-md w-full h-full">
</a>
{% endif %}
{% if forloop.counter == 6 %}
<a href="{{ p.image.url }}" class="relative">
<img src=" {% if forloop.counter == 6 %}{{ p.image.url }}{% endif %}" alt="" class="rounded-md w-full h-full">
<div class="absolute bg-gray-900 bg-opacity-30 flex justify-center items-center text-white rounded-md inset-0 text-2xl"> + {{ forloop.counter }} more </div>
</a>
{% else %}
<a href="{{ p.image.url }}" class="relative" hidden>
<img src=" {% if forloop.counter == 3 %}{{ p.image.url }}{% endif %}" alt="" class="rounded-md w-full h-full">
<div class="absolute bg-gray-900 bg-opacity-30 flex justify-center items-center text-white rounded-md inset-0 text-2xl"> + {{ forloop.counter }} more </div>
</a>
{% endif %}
{% endfor %}
</div>
<div class="p-4 space-y-3">
<div class="flex space-x-4 lg:font-bold">
<a href="#" class="flex items-center space-x-2">
<div class="p-2 rounded-full text-black lg:bg-gray-100 dark:bg-gray-600">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="22" height="22" class="dark:text-gray-100">
<path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z" />
</svg>
</div>
<div> Like</div>
</a>
<a href="#" class="flex items-center space-x-2 flex-1 justify-end">
<div class="p-2 rounded-full text-black lg:bg-gray-100 dark:bg-gray-600">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="22" height="22" class="dark:text-gray-100">
<path fill-rule="evenodd" d="M18 5v8a2 2 0 01-2 2h-5l-5 4v-4H4a2 2 0 01-2-2V5a2 2 0 012-2h12a2 2 0 012 2zM7 8H5v2h2V8zm2 0h2v2H9V8zm6 0h-2v2h2V8z" clip-rule="evenodd" />
</svg>
</div>
<div> Comment</div>
</a>
</div>
{% for comment in original_post.g_comments.all %}
<div class="border-t py-4 space-y-4 dark:border-gray-600">
<div class="flex">
<div class="w-10 h-10 rounded-full relative flex-shrink-0">
<img src="" alt="" class="absolute h-full rounded-full w-full">
</div>
<div>
<div class="text-gray-700 py-2 px-3 rounded-md bg-gray-100 relative lg:ml-5 ml-2 lg:mr-12 dark:bg-gray-800 dark:text-gray-100">
<p class="leading-6">{{comment}} <i class="uil-grin-tongue-wink-alt"></i> </p>
<div class="absolute w-3 h-3 top-3 -left-1 bg-gray-100 transform rotate-45 dark:bg-gray-800"></div>
</div>
<div class="text-xs flex items-center space-x-3 mt-2 ml-5">
<i class="uil-heart"></i> Love
Replay
<span> 3d </span>
</div>
</div>
</div>
</div>
Veiw 8 more Comments
<div class="bg-gray-100 rounded-full relative dark:bg-gray-800 border-t">
<input placeholder="Add your Comment.." class="bg-transparent max-h-10 shadow-none px-5">
<div class="-m-0.5 absolute bottom-0 flex items-center right-3 text-xl">
<a href="#">
<ion-icon name="happy-outline" class="hover:bg-gray-200 p-1.5 rounded-full"></ion-icon>
</a>
<a href="#">
<ion-icon name="image-outline" class="hover:bg-gray-200 p-1.5 rounded-full"></ion-icon>
</a>
<a href="#">
<ion-icon name="link-outline" class="hover:bg-gray-200 p-1.5 rounded-full"></ion-icon>
</a>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</form>

Answer 1

So after i had taken sometime to carefully analyzed the issue i had stable on a solution, actually the problem was coming from the form model:
this where the problem was
class ShareForm(forms.Form):
body = forms.CharField(label='',widget=forms.Textarea(attrs={
'rows': '3',
'placeholder': 'Say Something...'
}))
Instead i should have than something like this, i had omitted the description field, which was where my problem was !
class ShareForm(forms.Form):
description = forms.CharField(
label='',
widget=forms.Textarea(attrs={
'rows': '3',
'placeholder': 'Say Something...'
}))