Problem with save data from popup form in Django

Question

I have a problem with save data from popup form to sqlite database via django.

My part code :

dash.html: BUTTON FOR POPUP FORM

  <div class="card-footer clearfix">
    <a href="" type="button" class="btn btn-primary float-right" data-toggle="modal" data-target="#newItem"><i class="fas fa-plus"></i> Add item</a>
  </div>

POPUP CODE

  <div class="modal-content">

    <div class="card card-success">
          <div class="card-header">
            <h3 class="card-title"><b>Add Item</b></h3>
          </div>
          <div class="card-body">
            <form action="" method="post">
                {% csrf_token %}
                  <div class="row">
                      <div class="col-sm-6">
                          <div class="form-group">
                              <label> Item Name:</label>
                              <input class="form-control form-control-lg" name="item_name" type="text" placeholder="Item name">
                          </div>
                      </div>
                      <div class="col-sm-6">
                        <!-- text input -->
                          <div class="form-group">
                              <label> Item size:</label>
                              <input class="form-control form-control-lg" name="item_size"type="text" placeholder="Item size">
                          </div>
                      </div>

          <!-- /.card-body -->
           <div class="modal-footer">
            <input type="submit" class="btn btn-default" value="submit"></input>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

           </div>
  </div>

</div>

popup Code is a part of dash.html

models.py :

class itemModel(models.Model):
    name = models.CharField(max_length=50)
    size = models.CharField(max_length=20)

    def __str__(self):
        return self.name

I use SQLITE3 as a default database.

forms.py:

from django import forms
from .models import itemModel

class itemForm(forms.ModelForm):
    class Meta:
        model = itemModel
        fields = ["item_name", "item_size"]

views.py:

from django.shortcuts import redirect
from dashboard.models import addItem

    def addItem(request):
        if request.method == "POST":
            name = request.POST['item_name']
            size = request.POST['item_size']
    
            itemModel.objects.create(Name=name, size=size)
    
            return redirect('dashboard')

urls.py:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.dashBoard, name='dashboard'),
    path('addItem/', views.addItem, name='newItem'),
]

How to excute 'views.addItem' when click add button on popup?

Answer 1

There is no such fields item_name and item_size in your model. And, you can add attributes to these fields using django forms:

forms.py

class itemForm(forms.ModelForm):
    class Meta:
        model = itemModel
        fields = ["name", "size"]
        widgets = {
            'name': forms.TextInput(attrs={
                'class': 'form-control form-control-lg',
                'placeholder': 'Item name'
            }),
            'size': forms.TextInput(attrs={
                'class': 'form-control form-control-lg',
                'placeholder': 'Item size'
            }),
        }

On template you are mixing modal and card structure styles. Also, use itemForm to have a cleaner template and view:

views.py

def dashBoard(request):
    return render(request, 'dashboard.html', {'form': itemForm()})

def addItem(request):
    if request.method == "POST":
        form = itemForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect(reverse('dashboard'))

dashboard.html

{% block content %}
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Add Item
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Add Item</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <form action="{% url 'newItem' %}" method="POST">
                <div class="modal-body">
                    {% csrf_token %}
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                {{form.name.label}}
                                {{form.name}}
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                {{form.size.label}}
                                {{form.size}}
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock content %}