Develop Reference

How can i pass the table values to modal in Django?

When the edit option is clicked in the project, I want to transfer all the values in the relevant row into the modal, how can I do this?
here table body
<tbody class="list form-check-all">
{% for x in model %}
<tr>
<td class="id">{{x.name}}</td>
<td class="company_name">{{x.phonenumber}}</td>
<td class="leads_score">{{x.note}}</td>
<td class="phone">{{x.status}}</td>
<td class="location">{{x.callname}}</td>
<td class="date">{{x.dataname}}</td>
<td>
<ul class="list-inline hstack gap-2 mb-0">
<li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Edit">
<a class="edit-item-btn" href="#showModal" data-bs-toggle="modal"><i class="ri-phone-line fs-16"></i></a>
</li>
</ul>
</td>
</tr>
{% endfor %}
</tbody>
and here my modal
<div class="modal fade" id="showModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header bg-light p-3">
<h5 class="modal-title" id="exampleModalLabel"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close-modal"></button>
</div>
<form action="">
<div class="modal-body">
<input type="hidden" id="id-field" />
<div class="row g-3">
<div class="col-lg-12">
<div>
<label for="leadname-field" class="form-label">Name</label>
<input type="text" id="leadname-field" class="form-control" placeholder="Enter Name" required />
</div>
</div>
<!--end col-->
<div class="col-lg-12">
<div>
<label for="company_name-field" class="form-label">Company Name</label>
<input type="email" id="company_name-field" class="form-control" placeholder="Enter company name" required />
</div>
</div>
<!--end col-->
<div class="col-lg-6">
<div>
<label for="leads_score-field" class="form-label">Leads Score</label>
<input type="text" id="leads_score-field" class="form-control" placeholder="Enter lead score" required />
</div>
</div>
<!--end col-->
<div class="col-lg-6">
<div>
<label for="phone-field" class="form-label">Phone</label>
<input type="text" id="phone-field" class="form-control" placeholder="Enter phone no" required />
</div>
</div>
<!--end col-->
<div class="col-lg-12">
<div>
<label for="location-field" class="form-label">Location</label>
<input type="text" id="location-field" class="form-control" placeholder="Enter location" required />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="hstack gap-2 justify-content-end">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Kapat</button>
<button type="submit" class="btn btn-success" id="add-btn">Kaydet</button>
</div>
</div>
</form>
</div>
</div>
</div>
My codes are like this. When the edit option is clicked from here, I want to inherit the values of the relevant row in the table within the modal. How can I do that?

so basically I would do that this way - when you load modal, the element that triggers it has data-id attribute and you send it over AJAX to the Django view. Then, before the modal's fully open, you change html code of the whole div, prepopulated with single-instance template that you send over using JsonResponse.
Something like that should work:
const loadDetails = (e) => {
let btn = $(e.currentTarget);
const modalAjax = $("#modal-ajax");
$.ajax({
url: btn.attr("data-href"),
type: 'GET',
data: {id: <here_you_put_obj_id_using_data_attr>}
dataType: 'json',
beforeSend: function () {
modalAjax.modal("show");
},
success: function (data) {
modalAjax.find('.modal-content').html(data['html_form']);
}
});
};

How to create Django formset from jquery dynamically form?

After user fill a basic form, the data will be showed in table, dynamically created via jquery.
index.html
<form>
<div class="row">
<div class="col-md-6 mb-3">
<label for="sourceip">Source IP:<span> *</span></label>
<input type="text" class="form-control" id="sourceip" placeholder="_._._._ , _._._._ , _._._._" value="" >
<span class="error_form" id="sourceip_error_message"></span>
</div>
<div class="col-md-6 mb-3">
<label for="destip">Destination IP:<span> *</span></label>
<input type="text" class="form-control" id="destip" placeholder="_._._._ , _._._._ , _._._._" value="" >
<span class="error_form" id="destip_error_message"></span>
</div>
</div>
<div class="mb-3">
<label for="service">Service:<span> *</span></label>
<div class="input-group">
<input type="text" class="form-control" id="service" placeholder="" >
<span class="error_form" id="service_error_message"></span>
</div>
</div>
<div class="mb-3">
<label for="comment">Comment: </label>
<textarea type="text" class="form-control" id="comment" placeholder="Add comment"> </textarea>
</div>
<hr class="mb-4">
<input type="button" class="btn btn-primary btn-lg btn-block add" value="Add rule">
</form>
<div id="tabulka" class="table col-md-10">
<form method="POST" action="#" enctype="multipart/form-data">
{% csrf_token %}
<!--{{ formset.management_form }}-->
<table >
<thead class="thead-dark">
<th scope="col">Source IP</th>
<th scope="col">Destination IP</th>
<th scope="col">Service</th>
<th scope="col">Comment</th>
<th scope="col" colspan="2">Action</th>
</thead>
<tbody id="tbody">
</tbody>
</table>
<input type="submit" value="insert record">
</form>
</div>
script.js
$(".add").click(function () {
var SourceIP = CheckIPAdresses($("#sourceip").val());
var DestIP = CheckIPAdresses($("#destip").val());
var Service = CheckService($("#service").val());
var Comment = $("#comment").val();
for (sadd in SourceIP ){
for (dadd in DestIP){
for (srv in Service){
var markup = "<tr class='table-row' > <td class='SourceIP'> <input name='sip' type='text' class='sip' readonly value='"+SourceIP[sadd] + "'> </td> <td class='DestIP'> <input type='text' name='dip' class='dip' readonly value='"+DestIP[dadd] + "'></td><td class='Service'> <input type='text' class='port' name='port' readonly value='"+Service[srv] + "'></td><td class='Comment'> <input type='text' class='comm' name='comm' readonly value='"+Comment + "'></td> <td><a class='btn btn-xs delete'><i class='fas fa-trash-alt'></i></a></td><td><a class='btn btn-xs edit'><i class='fas fa-pencil-alt'></i></a></td></tr>";
$("#tbody").append(markup);
$(".table-row").attr('id', function (index) {
return "rec-" + index;
});
} } } });
views.py
def InsertRecord(request):
form=InsertIPForm(request.POST)
if form.is_valid():
form.save()
return redirect('app')
context = {"InsertIPForm": InsertIPForm}
return render(request, "app.html", context)
Now I need send data from this table to database. There is no problem with one record, but when I have multiple record, only last record is saved to database. I use Django and I think that the FORMSET will be the right solution. But I have no idea how to create formset from dynamically created forms.
Could you please help me? Or do you have any other idea how can I do it?
Thank you.

why the form is invalid on post

I have records in my model. I want to list the existing records and edit and add more records. I successfully got the records to my template and edit. I can add new records also. it is working fine in template. But when I post the form is invalid and print invalid message as per my code http response. I can not figure out what is the mistake. Please advise.
forms.py:
class NewTransForm(forms.ModelForm):
th_no = forms.DecimalField(max_digits=5,error_messages={"max_digits":"Transaction number
should be less than 6 digits.","unique":"Transaction number already exists."})
class Meta:
model = TransHeader
fields = ['th_no','th_dt','th_type', 'th_code','th_cust_code','th_sm_code','th_ref']
...
urls.py:
path('edit_sales_transaction_details/<int:trans_id>/',views.EditSalesTransaction,
name="edit_sales_transaction"),
views.py:
def EditSalesTransaction(request,trans_id):
# template_name= "wstore/edit_sales_transheader_input.html.html"
# trans_id =kwargs['trans_id']
if request.method == "POST":
print(request.POST)
form = NewTransForm(request.POST)
if form.is_valid():
# trans_id =kwargs['trans_id']
exist_trans_header = TransHeader.objects.get(id=int(trans_id))
TransBody.objects.filter(trans_header=exist_trans_header).delete()
exist_trans_header.delete()
obj = form.save()
books = request.POST.getlist('book_code')
quantities = request.POST.getlist('quantity')
prices = request.POST.getlist('price')
for book_code,quantity,price in zip(books,quantities,prices):
try:
book = TextBook.objects.get(code=book_code)
TransBody.objects.create(trans_header_id=obj.id,quantity=quantity,price=price,book=book)
except Exception as e:
print(e)
if request.POST.get('save_home'):
return redirect('saltransactions')
else:
print(NewTransForm.errors)
# return redirect(reverse('view_sales_transaction', kwargs=kwargs['trans_id']))
return HttpResponse("form is invalid.. this is just an HttpResponse object")
else:
form = NewTransForm()
context = {}
# trans_id =kwargs['trans_id']
context['trans_header'] = TransHeader.objects.get(id=int(trans_id))
trans_body = TransBody.objects.filter(trans_header=context['trans_header'])
context['trans_body'] = trans_body
context['total_quantity'] = trans_body.aggregate(Sum('quantity'))
context['total_price'] = trans_body.aggregate(Sum('price'))
context['current_date'] = datetime.datetime.strftime(datetime.datetime.now(),"%Y-%m-%d")
context['form'] = form
return render(request, 'wstore/edit_sales_transheader_input.html', context)
...
edit_sales_transheader_input.html:
{% block content %}
<form action="" method="post" class="w-auto" id="new_trans_form"
xmlns:width="http://www.w3.org/1999/xhtml">
<div class="row mt-1 mb-4" >
<div class="col-md-12">
<div>
<div class="headerctr">
<h3>Sales</h3>
<!-- <div> -->
<!-- <h3 > -->
<!-- </h3> -->
</div>
<div class="card-body">
{% csrf_token %}
<div 38rem class="row style= width:18">
<div class="col">
<label>Transaction Date</label>
<input type="date" class="form-control" name="{{form.th_dt.name}}"
value="{{current_date}}"
readonly>
{% if form.th_dt.errors %}
{% for error in form.th_dt.errors %}
<small class="text-danger">{{error}}</small>
{% endfor %}
{% endif %}
</div>
<div class="col-sm" >
<label>Transaction Number</label>
<input type="number" class="form-control" name="{{form.th_no.name}}"
value="{{trans_header.id}}" readonly>
{% if form.th_no.errors %}
{% for error in form.th_no.errors %}
<small class="text-danger">{{error}}</small>
{% endfor %}
{% endif %}
</div>
<div class="col">
<label>Transaction Type</label>
<input type="hidden" class="form-control" name="{{form.th_type.name}}"
required readonly
value="INV">
{% if form.th_type.errors %}
{% for error in form.th_type.errors %}
<small class="text-danger">{{error}}</small>
{% endfor %}
{% endif %}
<label>Transaction Ref.</label>
<input type="text" class="form-control" name="{{form.th_ref.name}}" required
value="{{trans_header.th_ref}}">
{% if form.th_ref.errors %}
{% for error in form.th_ref.errors %}
<small class="text-danger">{{error}}</small>
{% endfor %}
{% endif %}
</div>
</div>
<div class="row mt-0">
<div class="col">
<label>Transaction Code</label>
<input type="text" class="form-control" name="{{form.th_code.name}}" required
readonly
value="POS INV">
{% if form.th_code.errors %}
{% for error in form.th_code.errors %}
<small class="text-danger">{{error}}</small>
{% endfor %}
{% endif %}
</div>
<div class="col">
<label>Transaction Customer Code</label>
<input type="text" class="form-control" name="{{form.th_cust_code.name}}"
required
value="{{trans_header.th_cust_code}}">
{% if form.th_cust_code.errors %}
{% for error in form.th_cust_code.errors %}
<small class="text-danger">{{error}}</small>
{% endfor %}
{% endif %}
</div>
<div class="col">
<label>Transaction Salesman</label>
<input type="text" class="form-control" name="{{form.th_sm_code.name}}"
required
value="{{trans_header.th_sm_code}}">
{% if form.th_sm_code.errors %}
{% for error in form.th_sm_code.errors %}
<small class="text-danger">{{error}}</small>
{% endfor %}
{% endif %}
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 mt-0">
<div class="card shadow">
<div class="card-header text-center">
<h3 class="headerctr">
Item Details
</h3>
</div>
<div class="card-body">
{% csrf_token %}
<table class="">
<thead class="thead-light">
<tr>
<th>Code</th>
<th class = "text-danger">Description</th>
<th>Quantity</th>
<th class = "text-danger">Price</th>
<th class="text-success">Total Price</th>
<th class = "text-warning">Actions</th>
</tr>
</thead>
<tbody id="books_list" style="margin-bottom: 0">
{% for book in trans_body %}
<tr>
<td>
<input type="text" name="book_code" class="form-control
book_code"
placeholder="Book Code" value="{{book.book.code}}"
required>
</td>
<td>
<input type="text" name="book_name" class="form-control
book_name"
placeholder="Book Name" value="{{book.book.name}}"
readonly>
</td>
<td>
<input type="number" class="form-control quantity"
name="quantity"
placeholder="Quantity" value="{{book.quantity}}"
required>
</td>
<td>
<input type="text" class="form-control org_price"
placeholder="Price"
value="{{book.price}}" readonly >
</td>
<td>
<input type="hidden" class="org_price">
<input type="text" class="form-control price" name="price"
placeholder="Total Price"
value="{{book.price}}" readonly>
</td>
<td>
<div class="btn-group">
<button type="button" id="btnadd" class="btn add_new_row"
title="Add">
<i class="fas fa-plus-square"></i>
</button>
<button type="button" class="btn delete_row"
title="Delete">
<i class="fas fa-trash"></i>
</button>
</div>
</td>
</tr>
{% endfor %}
<tr id="newitem">
<td>
<input type="text" name="book_code" class="form-control book_code"
placeholder="Book Code" required>
</td>
<td>
<input type="text" name="book_name" class="form-control book_name"
placeholder="Book Name" readonly>
</td>
<td>
<input type="number" class="form-control quantity" name="quantity"
placeholder="Quantity" value="0" required>
</td>
<td>
<input type="text" class="form-control org_price" placeholder="Price"
value="0" readonly>
</td>
<td>
<input type="hidden" class="org_price">
<input type="text" class="form-control price" name="price" placeholder="Total Price"
value="0" readonly>
</td>
<td>
<div class="btn-group">
<button type="button" id="btnadd" class="btn add_new_row"
title="Add">
<i class="fas fa-plus-square"></i>
</button>
<button type="button" class="btn delete_row" title="Delete">
<i class="fas fa-trash"></i>
</button>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td class = "text-success">Total Quantity: <strong
id="final_quantity">0</strong></td>
<td></td>
<td class = "text-success"> Total Price: <strong
id="final_price">0</strong></td>
</tr>
</tfoot>
</table>
</div>
<div class="col-md-12 mb-1">
<div class="btn-group">
<a href="{% url 'saltransactions' %}" class="btn btn-info mr-2" >Cancel</a>
{# <input type="submit" class="btn btn-info mr-2" name="save_home"
value="Hold">#}
<input type="submit" class="btn btn-info submit_form" name="save_next"
value="Save&Print">
</div>
</div>
</div>
</div>
</div>
</form>
{% endblock %}
...

Get pk_id using function based view

I'm having a problem in getting the pk in my template. When I select a record it always returns the last pk ID. Btw, I'am using functional base view. Here's my collection.html:
<form method="POST" action="{% url 'single_collection' %}">
{% csrf_token %}
<table class="table" id="dataTables-example">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Status</th>
<th>Download</th>
</tr>
</thead>
<tbody>
{% for collectionlist in collection %}
<tr>
<td>{{ collectionlist.id }}</td>
<td>{{ collectionlist.sqa_name }}</td>
<td>{{ collectionlist.status }}</td>
<td class="center"><center><button type="button" class="btn btn-link" data-toggle="modal" data-target="#myModaldl{{ collectionlist.id }}" ><span class="glyphicon glyphicon-download-alt"></span></button></center></td>
</tr>
<div class="modal fade collectClass" id="myModaldl{{ collectionlist.id }}" role="dialog" tabindex="-1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Single Collect</h3>
</div>
<div class="modal-body form-horizontal">
<div class="form-group">
<label for="inputSQAID" class="col-sm-3 control-label">SQA Name</label>
<div class="col-sm-8">
<input type="hidden" name="pk_id" id="pk_id" value="{{ collectionlist.id }}">
<input type="text" class="form-control" name="singlecollect" value="{{ collectionlist.sqa_name }}" id="inputSQAID">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-success" name="single_dl">Download</button>
</div>
</div>
</div>
</div>
{% endfor %}
</tbody>
</table>
</form>
Here's my views.py:
def collection(request):
context = {
'collection': DataCollection.objects.all(),
'title': 'Data Collection',
}
return render(request, 'data_collection/collection.html', context)
def single_collect(request):
if request.method == 'POST':
pkid = request.POST.get('pk_id')
print(pkid)
all_data = DataCollection.objects.all()
return render(request, 'data_collection/collection.html', {'title' : 'Data Collection', 'data': all_data})
In my views.py, I just want first to print the pk ID of the item/record I selected in my table using the modal. But, it's always getting the last record in my database.

This is because you have a single <form> tag with all the DataCollection rows inside. You should have individual forms for each one, i.e.:
{% for collectionlist in collection %}
<form method="POST" action="{% url 'single_collection' %}">
{% csrf_token %}
...
</form>
{% endfor %}

How to save data entered in a bootstrap modal into another model

I am trying to create a django based load-requirement matching web-app which takes "Load details" in a model called ShipperBoardModel where people(manufacturers) post that they want certain items to be delivered somewhere, and other people(called transporters) who bid on those posts, that they can get that job done, for their chosen price.
ShipperBoardModel
class ShipperBoardModel(models.Model):
From = models.CharField(max_length=100,null=True)
To = models.CharField(max_length=100,null=True)
Type = models.CharField(max_length=100,null=True)
Length = models.CharField(max_length=100,null=True)
Weight = models.CharField(max_length=100,null=True)
Numberoftrucks = models.IntegerField(null=True)
MaterialType = models.CharField(null=True,max_length=100)
Loadingtime = models.DateTimeField(null=True)
def _str_(self):
return self.Origin
I created the first 'loads' table where many people posted their loads on it, and this is being displayed on a page "/loads/" where it shows all active loads available for bidding.
I added a "Bid now" button next to every row, clicking on which opens a form which asks the transporters what price they are willing to bid for that particular load/task.
On clicking 'Bid now', we get a pre-filled form in a bootstrap modal relative to the row it is in. Then, a transporter enters his bid for that task/load, which I want to save into another model called 'SupplierBidModel'.
I just want to figure out how to save that bid price, into that model, along with the BidID, and the transporterID which every transporter already has when they registered.
Here is the form, followed by the model:
class SupplierBidModel(models.Model):
BidID = models.AutoField(primary_key=True)
Load_ID = models.OneToOneField(ShipperBoardModel,on_delete=models.CASCADE)
Supplier_ID = models.OneToOneField(SupplierBoardModel,on_delete=models.CASCADE)
Bid_amount = models.IntegerField(null=True)
I have some data saved in my models.py, and using that model I am rendering a table. Now, for each row I want the user to enter a single entry, which should save that data into another model.
Here is the template :
{% block content %}
<table>
{% for item in data %}
<tr>
<th>From</th>
<th>To</th>
<th>Weight</th>
<th>Length</th>
<th>Type</th>
<th>Material Type</th>
<th>Number of Trucks</th>
<th>Loading Time</th>
</tr>
<tr>
<td>{{ item.From }}</td>
<td>{{ item.To }}</td>
<td>{{ item.Weight }}</td>
<td>{{ item.Length }}</td>
<td>{{ item.Type }}</td>
<td>{{ item.MaterialType }}</td>
<td>{{ item.Numberoftrucks }}</td>
<td>{{ item.Loadingtime }}</td>
<td>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal{{ item.id }}">Bid
now! for id {{ item.id }} </button>
</td>
{# {% endfor %}#}
<div class="modal fade" id="myModal{{ item.id }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<input class="form-control" id="disabledInput" type="text"
placeholder="Disabled input here..." value="{{ item.To }}" disabled>
<input class="form-control" id="disabledInput" type="text"
placeholder="Disabled input here..." value="{{ item.From }}" disabled>
<input class="form-control" id="disabledInput" type="text"
placeholder="Disabled input here..." value="{{ item.Weight }}" disabled>
<input class="form-control" id="disabledInput" type="text"
placeholder="Disabled input here..." value="{{ item.Length }}" disabled>
<input class="form-control" id="disabledInput" type="text"
placeholder="Disabled input here..." value="{{ item.Type }}" disabled>
<input class="form-control" id="disabledInput" type="text"
placeholder="Disabled input here..." value="{{ item.MaterialType }}" disabled>
<input class="form-control" id="disabledInput" type="text"
placeholder="Disabled input here..." value="{{ item.Numberoftrucks }}" disabled>
<input class="form-control" id="disabledInput" type="text"
placeholder="Disabled input here..." value="{{ item.Loadingtime }}" disabled>
<input class="form-control" id="disabledInput" type="text"
placeholder="Disabled input here...">Bid
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</tr>
{% endfor %}
</table>
{% endblock %}
I do not yet know how to render a form, on a page in django, where there exists a form already. The only way to render form I know of, is using the urls.py method :
urlpatterns = [
url(r'supplier', views.supplierboardfun, name='supplierboard'),
url(r'shipper', views.shipperboardfun, name='shipperboard'),
url(r'loads', views.suppliertablefun, name='supplierboardtable')
]
which calls the function suppliertablefun()
def suppliertablefun(request): # function to display shipperboardmodel
data = ShipperBoardModel.objects.all()
return render(request, 'supplierboard/board.html', locals())
I am probably missing on how to render a multiple forms with different models in django, or how to save data from an input box, and save it to the model of my liking along with some relative information.

I figured it out. I was able to do it as such
def suppliertablefun(request): # function to display shipperboardmodel
data = ShipperBoardModel.objects.all()
if request.method == 'POST':
forminput = BiddingForm(request.POST)
if forminput.is_valid():
forminput.save()
forminput = BiddingForm(request.POST)
return render(request, 'supplierboard/board.html', locals(),{'forminput': forminput})