'Create Dynamically table and save data in database on django
if i'm Create Dynamically table using jquery this is working
This is my .html file code.
<!DOCTYPE html>
<html>
<head>
<title>test page</title>
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
<script>
$(document).ready(function () {
// Denotes total number of rows
var rowIdx = 0;
// jQuery button click event to add a row
$('#addBtn').on('click', function () {
// Adding a row inside the tbody.
$('#tbody').append(`<tr id="R${++rowIdx}">
<td class="row-index text-center">
<p>${rowIdx}</p>
</td>
<td class="row-index text-center">
<input type="text" name="organization">
</td>
<td class="row-index text-center">
<input type="text" name="designation">
</td>
<td class="row-index text-center">
<input type="date" name="date_from">
</td>
<td class="row-index text-center">
<input type="date" name="date_to">
</td>
<td class="text-center">
<button class="btn btn-danger remove"
type="button">Remove</button>
</td>
</tr>`);
});
// jQuery button click event to remove a row.
$('#tbody').on('click', '.remove', function () {
// Getting all the rows next to the row
// containing the clicked button
var child = $(this).closest('tr').nextAll();
// Iterating across all the rows
// obtained to change the index
child.each(function () {
// Getting <tr> id.
var id = $(this).attr('id');
// Getting the <p> inside the .row-index class.
var idx = $(this).children('.row-index').children('p');
// Gets the row number from <tr> id.
var dig = parseInt(id.substring(1));
// Modifying row index.
idx.html(`Row ${dig - 1}`);
// Modifying row id.
$(this).attr('id', `R${dig - 1}`);
});
// Removing the current row.
$(this).closest('tr').remove();
// Decreasing total number of rows by 1.
rowIdx--;
});
});
</script>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div class="container">
<form method="post">
{% csrf_token %}
<div class="row pt-3">
<div class="col-md-6">
<input type="text" class="form-control" placeholder="first name" name="first_name">
</div>
<div class="col-md-6 " >
<input type="text" class="form-control" placeholder="last name" name="last_name">
</div>
</div>
<div class="row pt-5">
<div class="col-md-4">
<input type="email" class="form-control" placeholder="Email Address" name="email_id">
</div>
<div class="col-md-4">
<input type="text" class="form-control" placeholder="Mobile No" name="mobile_no">
</div>
<div class="col-md-4">
<input type="date" class="form-control" name="dob">
</div>
</div>
<h3>Qualification</h3>
<select id="inputState" class="form-select" name="qualification">
<option>Choose...</option>
<option>B.A</option>
<option>B.tech.</option>
<option>BBA</option>
<option>BCA</option>
<option>M.tech</option>
<option>MBA</option>
<option>MCA</option>
<option>Other</option>
</select>
<div class="pt-3">
<table class="table table-bordered">
<thead>
<tr>
<th>S.N</th>
<th class="text-center">Organization Name </th>
<th class="text-center">Designation</th>
<th class="text-center">From </th>
<th class="text-center">To</th>
<th class="text-center">Remove Row</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
<button class="btn btn-md btn-primary"
id="addBtn" type="button">
Add experince
</button>
</div>
<div class="col-12 pt-3">
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</form>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
This is my Views.py file code
from django.shortcuts import render
from .models import *
Create your views here.
def home(request):
if request.method == 'POST':
detail(first_name = request.POST['first_name'],
last_name = request.POST['last_name'],
email_id = request.POST['email_id'],
mobile_no = request.POST['mobile_no'],
dob = request.POST['dob'],
qualification = request.POST['qualification'],
organization = request.POST['organization'],
designation = request.POST['designation'],
date_from = request.POST['date_from'],
date_to = request.POST['date_to']).save()
return render(request,"home.html")
This is model.py files code..
from django.db import models
# Create your models here.
class detail(models.Model):
first_name = models.CharField(max_length=96)
last_name = models.CharField(max_length=96)
email_id = models.CharField(max_length=96)
mobile_no = models.CharField(max_length=96)
dob = models.CharField(max_length=96)
qualification = models.CharField(max_length=96)
experince = models.CharField(max_length=96)
organization = models.CharField(max_length=96)
designation = models.CharField(max_length=96)
date_from = models.CharField(max_length=96)
date_to = models.CharField(max_length=96)
def __str__(self):
return self.first_name
I am working on a project which requires me to create a table of every workng company experince.The columns in the table are same for every experince.
if i'm submit the data on database. Than save only last table row data if i'm create one or more rows....
Solution 1:[1]
That happened because the values are sent always to the same experince Field so django will alwasy take the latest value you entered. Your detail model is the problem.
You must have a seperate model for Experince and experience field with relation on the detail model. then you can store any number of
experince you want
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Abdelrahman Moustafa |