CODEWITHSUNDEEP
djangopostdata
Hasnain
Hasnain

Reputation: 679

Unable to send multiple entries to database in Django

My aim is to send all the Added items to my database. There is no error while posting data to the database but my form populates the database with only one entry, i.e., "The value of the last input among all inputs". I am new to Django development, please guide me on where I am doing wrong.

My Html looks like this: enter image description here

Tables in my database:

Primary key Table: enter image description here

Foreign Key Table: enter image description here

  1. Table that already contains items.
  2. Table that is made to receive the items from table one. I am just trying to learn how to post data of multiple inputs, otherwise there isn't any logic behind this operation.

From models.py:

class Item(models.Model):
    Id = models.AutoField(primary_key=True)
    itemName  = models.CharField(max_length=30,unique=True)
    cId = models.ForeignKey(Category,on_delete=CASCADE)
    def __str__(self):
        return self.itemName

class TransferedItems(models.Model):
    Id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
    item = models.ForeignKey(Item, on_delete=CASCADE)

From views.py:

def transfer(request):
    if request.method == "POST":
        a = request.POST.get("a");
        obj = TransferedItems(item_id = a);
        obj.save();
        return HttpResponse("sent")
    else:
        return HttpResponse("form submission failed")

From HTML:

<html lang="en">
<body>

    <div class="maindiv">
        <div class="divA">
            <label for="coffee">Coffee</label>
            <select name="coffee" id="coffee">
                {% for opt in opts %}
                <option value="{{opt.Id}}"> {{opt.itemName}} </option>
                {% endfor %}
            </select>
            <button onclick="addtocart()">ADD</button>
        </div>
        <div class="divB">
            <form method="post" id="cart-screen-form" action="transfer">
                {% csrf_token %}
                <label>ADDED ITEMS:</label>

              <!--Every click to addtocart() results in the creation 
               of a new div that contains a label and an input -->
               <!--Please see Javascript code-->

                <button type="submit">SEND TO DB</button>
            </form>

        </div>
    </div>

</body>

</html>

From JS:

function addtocart() {
    let selectbox_os = document.getElementById("coffee");

    let csform = document.getElementById("cart-screen-form");
    let container = document.createElement("div");
    let item = document.createElement("input");
    let item_label = document.createElement("label");
    container.className = "container";

    item_label.className = "csf-labels";
    item_label.innerText = selectbox_os.options[selectbox_os.selectedIndex].text;
    item.type = "text";
    item.className = "csf-items";
    item.value = selectbox_os.options[selectbox_os.selectedIndex].value;
    item_label.setAttribute("for","a")
    item.setAttribute("name", "a");
    csform.appendChild(container);
    container.append(item_label,item);

}

Upvotes: 0

Views: 114

Answers (1)

Ben
Ben

Reputation: 21

The main reason for only one input data being saved is because in the js file you have created an element of input and set its attributes to name "a" . By this all the input fields that are being created by js are been set to name "a". So when your submitting the form data the request in your views will only able to take one input "a" as there is one request in veiws.

Upvotes: 0

Related Questions