I want to comment dynamically on a video with jQuery, but when I comment on what I'm doing, the old comment changes and all comments receive the same text. The value I get from the input is written to all comments. How can I fix this?
$(document).ready(function() {
$("#addCommentBtn").click(function() {
var comment = $("#commentText").val();
if (comment === "") {
$("#error-msg").fadeIn();
setTimeout(function() {
$("#error-msg").fadeOut();
}, 3000);
} else {
$('<li class="w-full comment mt-4"><div class="w-full md:w-1/2 comment flex flex-col"><div class="flex gap-4 items-center text-lg font-bold"><img src="assets/media/svg/NoPath - Kopya (75).png" class="rounded-full" alt=""><h1>André Potchinka</h1></div><div class="ml-16 flex flex-col justify-center"><div class=" mt-2 flex gap-1 items-center"><h1 class="comment-content text-gray-500 font-bold"></h1><span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-up" aria-hidden="true"></i>0</span><span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-down" aria-hidden="true"></i>0</span></div><div class="w-full flex flex-col"><input type="text" class="responseText border-b focus:outline-none bg-transparent mt-4" placeholder="Please login to leave a comment..."><ul class="responses p-4 flex flex-col gap-2"> </ul><button class="responseBtn text-right mt-2 text-gray-500">Answer</button></div></div></div></li>').appendTo(".comments");
$(".comment-content").text(comment);
$("#commentText").val("");
$("#valid-msg").fadeIn();
setTimeout(function() {
$("#valid-msg").fadeOut();
}, 3000);
}
});
});
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="comments" class="hidden p-4">
<div class="container mx-auto">
<div class="w-full flex gap-4">
<img src="assets/media/svg/Group 199.png" alt="">
<input type="text" required id="commentText" class="pt-4 flex-1 focus:outline-none border-b border-gray-500 py-1 px-2 bg-transparent" placeholder="Please login to leave a comment...">
</div>
<div class="w-full flex gap-4 justify-end items-center mt-4">
Cancel
<button id="addCommentBtn" class="focus:outline-none bg-black px-6 border border-black py-1 rounded-full text-gray-500 flex items-center pt-3">Comment</button>
</div>
<ul class="w-full comments">
<li class="w-full comment mt-4">
<div class="w-full md:w-1/2 comment flex flex-col">
<div class="flex gap-4 items-center text-lg font-bold">
<img src="assets/media/svg/NoPath - Kopya (75).png" class="rounded-full" alt="">
<h1>André Potchinka</h1>
</div>
<div class="ml-16 flex flex-col justify-center">
<div class=" mt-2 flex gap-1 items-center">
<h1 class="text-gray-500 font-bold">Nice work, congragulations.</h1>
<span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-up"></i>0</span>
<span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-down"></i>0</span>
</div>
<div class="w-full flex flex-col">
<input type="text" class="responseText border-b focus:outline-none bg-transparent mt-4" placeholder="Please login to leave a comment...">
<ul class="responses p-4 flex flex-col gap-2 text-gray-500">
<li>Yoruma yanıt verildi :)</li>
</ul>
<div class="flex justify-end">
<button class="responseBtn mt-2 text-gray-500 w-24 text-center">Answer</button>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
With the selector .comment-content, you are selecting all the elements with that class, so of course all comments' text content will be overwritten. Save your new element into a variable and restrict the class selector on that new element instead:
$(document).ready(function() {
$("#addCommentBtn").click(function() {
var comment = $("#commentText").val();
if (comment === "") {
$("#error-msg").fadeIn();
setTimeout(function() {
$("#error-msg").fadeOut();
}, 3000);
} else {
let newComment = $('<li class="w-full comment mt-4"><div class="w-full md:w-1/2 comment flex flex-col"><div class="flex gap-4 items-center text-lg font-bold"><img src="assets/media/svg/NoPath - Kopya (75).png" class="rounded-full" alt=""><h1>André Potchinka</h1></div><div class="ml-16 flex flex-col justify-center"><div class=" mt-2 flex gap-1 items-center"><h1 class="comment-content text-gray-500 font-bold"></h1><span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-up" aria-hidden="true"></i>0</span><span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-down" aria-hidden="true"></i>0</span></div><div class="w-full flex flex-col"><input type="text" class="responseText border-b focus:outline-none bg-transparent mt-4" placeholder="Please login to leave a comment..."><ul class="responses p-4 flex flex-col gap-2"> </ul><button class="responseBtn text-right mt-2 text-gray-500">Answer</button></div></div></div></li>').appendTo(".comments");
$(".comment-content", newComment).text(comment);
$("#commentText").val("");
$("#valid-msg").fadeIn();
setTimeout(function() {
$("#valid-msg").fadeOut();
}, 3000);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="comments" class="hidden p-4">
<div class="container mx-auto">
<div class="w-full flex gap-4">
<img src="assets/media/svg/Group 199.png" alt="">
<input type="text" required id="commentText" class="pt-4 flex-1 focus:outline-none border-b border-gray-500 py-1 px-2 bg-transparent" placeholder="Please login to leave a comment...">
</div>
<div class="w-full flex gap-4 justify-end items-center mt-4">
Cancel
<button id="addCommentBtn" class="focus:outline-none bg-black px-6 border border-black py-1 rounded-full text-gray-500 flex items-center pt-3">Comment</button>
</div>
<ul class="w-full comments">
<li class="w-full comment mt-4">
<div class="w-full md:w-1/2 comment flex flex-col">
<div class="flex gap-4 items-center text-lg font-bold">
<img src="assets/media/svg/NoPath - Kopya (75).png" class="rounded-full" alt="">
<h1>André Potchinka</h1>
</div>
<div class="ml-16 flex flex-col justify-center">
<div class=" mt-2 flex gap-1 items-center">
<h1 class="text-gray-500 font-bold">Nice work, congragulations.</h1>
<span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-up"></i>0</span>
<span class="flex gap-2 -mt-1"><i class="fas fa-thumbs-down"></i>0</span>
</div>
<div class="w-full flex flex-col">
<input type="text" class="responseText border-b focus:outline-none bg-transparent mt-4" placeholder="Please login to leave a comment...">
<ul class="responses p-4 flex flex-col gap-2 text-gray-500">
<li>Yoruma yanıt verildi :)</li>
</ul>
<div class="flex justify-end">
<button class="responseBtn mt-2 text-gray-500 w-24 text-center">Answer</button>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
Related
I am trying to create a chat like app using tailwind, and I can't seem to get overflow to function properly.
Instead of overflowing, it just stretches the box to fit all the contents.
Please see the code snippet or link below, at line 25 is where the container begins, the top container should span over 5/6 grid rows, and only overflow if the contents exceed the container!
<div class="grid h-screen w-screen grid-rows-6 gap-2 bg-neutral-900 p-1">
<div class="row-span-1 bg-neutral-800">
<div class="h-full w-full p-1">
<div class="mt-5">
<div class="flex flex-wrap justify-between px-5 w-full text-white">
<div>Com</div>
<div>3dub</div>
<div>Prof</div>
</div>
</div>
</div>
</div>
<div class="row-span-5 bg-neutral-800 p-1">
<div class="grid grid-cols-6 w-full h-full gap-1 p-1">
<div class="col-span-1 h-full">
<div class="h-full w-full p-1 bg-neutral-700">
<div class="text-white">Nodes</div>
</div>
</div>
<div class="col-span-5 h-full">
<div class="h-full w-full p-1 bg-neutral-700">
<div class="h-full w-full rounded-lg bg-neutral-600 p-4">
<div class="h-full w-full">
<div class="grid grid-rows-6 h-full w-full gap-y-1">
<div class="row-span-5 w-full rounded-lg bg-neutral-500">
<div class="h-full w-full min-h-0 rounded-lg bg-neutral-500 p-4">
<div class="flex flex-col h-full w-full overflow-y-scroll gap-y-2">
<div class="w-1/2 rounded-lg bg-neutral-400 p-4">Chat Msg</div>
<div class="w-1/2 rounded-lg bg-neutral-400 p-4">Chat Msg</div>
<div class="w-1/2 rounded-lg bg-neutral-400 p-4">Chat Msg</div>
<div class="w-1/2 rounded-lg bg-neutral-400 p-4">Chat Msg</div>
<div class="w-1/2 rounded-lg bg-neutral-400 p-4">Chat Msg</div>
<div class="w-1/2 rounded-lg bg-neutral-400 p-4">Chat Msg</div>
<div class="w-1/2 rounded-lg bg-neutral-400 p-4">Chat Msg</div>
<div class="w-1/2 rounded-lg bg-neutral-400 p-4">Chat Msg</div>
<div class="w-1/2 rounded-lg bg-neutral-400 p-4">Chat Msg</div>
</div>
</div>
</div>
<div class="row-span-1 w-full rounded-lg bg-neutral-500">
<div>Message</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
https://play.tailwindcss.com/2G6f2owRqQ
Edit: Included the wrong play.tailwindcss link
You can just add "overflow-hidden" to line 20.
In line 20 your code must be like below:
<div class="col-span-5 h-full overflow-hidden">
And if you change "overflow-y-scroll" to "overflow-y-auto" in line 28, scrollbar doesn't appear if messages heights don't exceed their parent div.
I am trying to resolve your problem. you can check here
i'm new with Stack Overflow. I don't have enough 10 reputation to embed image. Sorry for this inconvenience but I have some question about iframe tag:
I tried some way to get html element in #document of iframe tag, but somehow it still not work. Can you explain why for me and how can I get element have id = "check". I'm try to learn
There is test.blade.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<iframe src="/login" width="100%" height="100%" id="iframe"></iframe>
<script>
const iframe = $("#iframe");
console.log(iframe);
console.log(iframe.contents());
console.log(iframe.contents().find("#check").html());
</script>
</body>
</html>
There is login.blade.php
<x-common :title="'Login'">
<x-slot name='main'>
<div class="w-full lg:w-4/12 px-4">
<div class="pt-20"></div>
<div
class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-200 border-0">
<div class="rounded-t mb-0 px-6 py-6">
<div class="text-center mb-3">
<h6 class="text-gray-500 text-sm font-bold">
Sign in with
</h6>
</div>
<div class="btn-wrapper text-center">
<button
class="bg-white active:bg-gray-50 text-gray-700 px-4 py-2 rounded outline-none focus:outline-none mr-2 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
type="button">
<img alt="..." class="w-5 mr-1"
src="{{ asset('assets/img/github.svg') }}" />Github</button><button
class="bg-white active:bg-gray-50 text-gray-700 px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
type="button">
<img alt="..." class="w-5 mr-1" src="{{ asset('assets/img/google.svg') }}" />Google
</button>
</div>
<hr class="mt-6 border-b-1 border-gray-300" />
</div>
<div class="flex-auto px-4 lg:px-10 py-10 pt-0">
<div class="text-gray-400 text-center mb-3 font-bold">
<small>Or sign in with credentials</small>
</div>
<x-alert></x-alert>
<form action="login" method="post">
<div class="relative w-full mb-3">
<label class="block uppercase text-gray-600 text-xs font-bold mb-2"
for="grid-password">Email</label><input type="email"
class="border-0 px-3 py-3 placeholder-gray-300 text-gray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
placeholder="Email" name="email" value="{{ old('email') }}" />
</div>
<div class="relative w-full mb-3">
<label class="block uppercase text-gray-600 text-xs font-bold mb-2"
for="grid-password">Password</label><input type="password" autocomplete="on"
class="border-0 px-3 py-3 placeholder-gray-300 text-gray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
placeholder="Password" name="password" value="{{ old('password') }}" />
</div>
<div id="check">
<label class="inline-flex items-center cursor-pointer"><input id="customCheckLogin"
type="checkbox"
class="form-checkbox border-0 rounded text-gray-700 ml-1 w-5 h-5 ease-linear transition-all duration-150"
name="remember" /><span class="ml-2 text-sm font-semibold text-gray-600">Remember
me</span></label>
</div>
<div class="text-center mt-6">
<button
class="bg-gray-800 text-white active:bg-gray-600 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full ease-linear transition-all duration-150"
type="submit">
Sign In
</button>
</div>
#csrf
</form>
<div class="flex flex-wrap">
<div class="w-1/2">
<a href="password/forgot" class="text-gray-500 text-sm font-bold"><small>Forgot
password?</small></a>
</div>
<div class="w-1/2 text-right">
<a href="register" class="text-gray-500 text-sm font-bold"><small>Create new
account</small></a>
</div>
</div>
</div>
</div>
</div>
</x-slot>
</x-common>
Console
Elements
I think the iframe document is not ready when you try to access the nodes. You should wait for the iframe load event after that you can access the child nodes.
$('#iframe').on("load", function() {
// do the stuff here
});
You should try to catch the event 'load' of the iframe using javascript:
document.querySelector("iframe").addEventListener( "load", function() {
console.log("This will appear on the console when the iframe is loaded");
});
Or you can use jquery instead:
$('iframe').on("load", function() {
// content for the iframe when it is loaded
}
I have a that contains some input fields like so:
<div class="px-4 py-6 mb-4 border rounded-lg border-gray-400" id="datarow"
<div class="flex flex-row space-x-4 pb-5">
<div class="relative z-0 w-full mb-5">
<input type="text" id="f_name" name="f_name" placeholder="Enter Name here"
required class="pt-3 pb-2 block w-full px-4 mt-0 rounded bg-white border-0 border-b appearance-none" />
<label for="f_name" class="absolute duration-300 pl-2 text-lg top-3 z-1 origin-0 text-gray-500">Name</label>
</div>
<div class="flex z-0 w-full justify-end">
<input type="text" id="f_dest" name="f_dest" placeholder="Enter Destination here"
required class="pt-3 pb-2 block w-full px-4 mt-0 rounded bg-white border-0 border-b appearance-none" />
<label for="f_dest" class="absolute duration-300 pl-2 text-lg top-3 z-1 origin-0 text-gray-500">Destination</label>
</div>
</div>
And in jQuery I am duplicating the above div (on button click) and just appending to the main html body which would be displayed just below the original #datarow div. Heres the full snippet as how I have in my program.
$("#btn_addsector").click(function () {
var div = document.getElementById("datarow"),
clone = div.cloneNode(true);
//neither of the lines work
$(clone).find("#f_name").text = "Tisha";
$("#maincontent").append(clone);
$(clone).find("#f_name").text = "Tisha";
$(clone).find("#f_name").text("Tisha");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="maincontent" >
<button id="btn_addsector"
class="bg-transparent hover:bg-secondary-dark text-secondary-dark font-semibold hover:text-white py-2 px-4 border border-secondary-dark hover:border-transparent rounded">
Add Sector
</button>
<div class="px-4 py-6 mb-4 border rounded-lg border-gray-400" id="datarow">
<div class="flex flex-row space-x-4 pb-5">
<div class="relative z-0 w-full mb-5">
<input type="text" id="f_name" name="f_name" placeholder="Enter Name here" value="Hannah"
required class="pt-3 pb-2 block w-full px-4 mt-0 rounded bg-white border-0 border-b appearance-none" />
<label for="f_name" class="absolute duration-300 pl-2 text-lg top-3 z-1 origin-0 text-gray-500">Name</label>
</div>
<div class="flex z-0 w-full justify-end">
<input type="text" id="f_dest" name="f_dest" placeholder="Enter Destination here" value="Smallville"
required class="pt-3 pb-2 block w-full px-4 mt-0 rounded bg-white border-0 border-b appearance-none" />
<label for="f_dest" class="absolute duration-300 pl-2 text-lg top-3 z-1 origin-0 text-gray-500">Destination</label>
</div>
</div>
</div>
</div>
I can get the cloned div to appended properly but it does not alter the text of the input field.
There is multiple problem with your code:
1: You can't have multiple elements with the same ID, use class for this. So I've removed the id="f_name" and added it to the class selector class="the previous classes f_name"
2: To set the value of an input, you have to use .val() and not .text()
$(clone).find(".f_name").val("Tisha");
Demo
$("#btn_addsector").click(function() {
var div = document.getElementById("datarow"),
clone = div.cloneNode(true);
//neither of the lines work
$(clone).find(".f_name").val("Tisha");
$("#maincontent").append(clone);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="maincontent">
<button id="btn_addsector" class="bg-transparent hover:bg-secondary-dark text-secondary-dark font-semibold hover:text-white py-2 px-4 border border-secondary-dark hover:border-transparent rounded">
Add Sector
</button>
<div class="px-4 py-6 mb-4 border rounded-lg border-gray-400" id="datarow">
<div class="flex flex-row space-x-4 pb-5">
<div class="relative z-0 w-full mb-5">
<input type="text" name="f_name" placeholder="Enter Name here" value="Hannah" required class="pt-3 pb-2 block w-full px-4 mt-0 rounded bg-white border-0 border-b appearance-none f_name" />
<label for="f_name" class="absolute duration-300 pl-2 text-lg top-3 z-1 origin-0 text-gray-500">Name</label>
</div>
<div class="flex z-0 w-full justify-end">
<input type="text" name="f_dest" placeholder="Enter Destination here" value="Smallville" required class="pt-3 pb-2 block w-full px-4 mt-0 rounded bg-white border-0 border-b appearance-none f_dest" />
<label for="f_dest" class="absolute duration-300 pl-2 text-lg top-3 z-1 origin-0 text-gray-500">Destination</label>
</div>
</div>
</div>
</div>
This is the code for the checkboxes and I would like to limit the choices to 2.
This is going to be used for a pizza application, so the limit number will be different for the different sections in creating a pizza.
const LagDinEgen = () => {
return(
<div>
<form name="størrelse">
<div className="desktop:w-3/4 tablet:w-11/12 w-full mx-auto grid grid-cols-1 tablet:grid-cols-2 desktop:grid-cols-3 rounded-lg overflow-hidden desktop:mt-8 gap-2">
<div className="col-span-1 tablet:col-span-2 desktop:col-span-3 bg-mainBlue py-10 h-auto text-center text-white flex flex-col justify-center items-center">
<h1 class="mb-6 pt-6 mx-auto text-center"> VELG STØRRELSE</h1>
<div class="mx-auto max-w-sm text-center flex flex-wrap justify-center">
<div class="flex items-center mr-4 mb-4">
<input id="radio1" type="checkbox" name="radio" class="hidden"/>
<label for="radio1" class="flex items-center cursor-pointer px-3">
<span class="w-4 h-4 inline-block mr-1 border border-mainGreen rounded-full"></span>
SMALL</label> <label>129,-</label>
</div>
<div class="flex items-center mr-4 mb-4">
<input id="radio2" type="checkbox" name="radio" class="hidden" />
<label for="radio2" class="flex items-center cursor-pointer px-3">
<span class="w-4 h-4 inline-block mr-1 border border-mainGreen rounded-full"></span>
MEDIUM</label> <label>159,-</label>
</div>
<div class="flex items-center mr-4 mb-4">
<input id="radio3" type="checkbox" name="radio" class="hidden" />
<label for="radio3" class="flex items-center cursor-pointer px-3">
<span class="w-4 h-4 inline-block mr-1 border border-mainGreen rounded-full"></span>
LARGE</label> <label>189,-</label>
</div>
</div>
</div>
</div>
</form>
Assuming you plan on adding a button, you can utilize the native HTML5 disabled property on it and maintain the state of which items are currently selected to determine when it should be disabled(eg. an array of selectedItems)
You would pass the selectedItems.length > 2 to the disabled property, so it would effectively become disabled if your array is larger than 3.
Working example: https://codesandbox.io/s/xenodochial-currying-eb8kt?file=/src/Form.js
You should pass necessary datas to LagDinEgen component as props and then you should use array.map() function inside of JSX. This will be something gonna like that;
const LagDinEgen = ({title,options}) => {
return(
<div>
<form name="størrelse">
<div className="desktop:w-3/4 tablet:w-11/12 w-full mx-auto grid grid-cols-1 tablet:grid-cols-2 desktop:grid-cols-3 rounded-lg overflow-hidden desktop:mt-8 gap-2">
<div className="col-span-1 tablet:col-span-2 desktop:col-span-3 bg-mainBlue py-10 h-auto text-center text-white flex flex-col justify-center items-center">
<h1 class="mb-6 pt-6 mx-auto text-center"> {title} </h1>
<div class="mx-auto max-w-sm text-center flex flex-wrap justify-center">
{
options.map((option,index)=>(
<div class="flex items-center mr-4 mb-4">
<input type="checkbox" name="radio" class="hidden"/>
<label class="flex items-center cursor-pointer px-3">
<span class="w-4 h-4 inline-block mr-1 border border-mainGreen rounded-full"></span>
{option.name}</label> <label>{option.price},-</label>
</div>
))
}
</div>
</div>
</div>
</form>
i have used Inlineformset in my django project , but i have to use my own js for increasing forms ! but i didnt find any way to make it work
this is my models.py
class Invoice(models.Model):
seller = models.ForeignKey(User,on_delete=models.CASCADE)
customer = models.CharField(max_length=50)
items = models.ManyToManyField(Item,through='InvoiceItem')
class InvoiceItem(models.Model):
item = models.ForeignKey(Item,on_delete=models.CASCADE)
invoice = models.ForeignKey(CustomerInvoice,on_delete=models.CASCADE,related_name='invoice')
quantity = models.IntegerField()
price = models.DecimalField(max_digits=20,decimal_places=3)
cash = models.DecimalField(max_digits=20,decimal_places=3)
discount = models.DecimalField(max_digits=20,decimal_places=3)
and this code is my views.py , i have used Class Based View
class CreateClientInvoiceView(LoginRequiredMixin,SuccessMessageMixin,CreateView):
model = CustomerInvoice
form_class = ClientInvoiceForm
template_name = 'invoiceapp/create_invoice.html'
def get_context_data(self,*args,**kwargs):
data = super().get_context_data(*args,**kwargs)
if self.request.POST:
data['items'] = CustomerInvoiceInlineFormset(self.request.POST)
data['items'].full_clean()
else:
data['items'] = CustomerInvoiceInlineFormset()
return data
def form_valid(self, form):
res = super().form_valid(form)
self.object = form.save()
context = self.get_context_data()
items = context['items']
with transaction.atomic:
form.instance.seller = self.request.user
if form.is_valid() and items.is_valid() and items.cleaned_data !={}:
items.instance = self.object
items.save()
form.save()
else:
return render(self.request,self.template_name,context)
return super().form_valid(form)
def get_success_url(self):
return reverse_lazy('invoiceapp:customer-invoice',kwargs={'pk':self.object.pk})
this is my html + js code
{% extends 'base.html' %}
{% load widget_tweaks %}
{% load static %}
{% block title %}
create new invoice
{% endblock %}
{% block content %}
<form method="POST">{% csrf_token %}
{{items.management_form}}
<div class="w-full md:w-11/12 mx-auto realative p-2 bg-gray-200 invoice" style="direction: ltr !important;">
<div class="p-1 pr-2 pb-1 text-xs border border-black rounded-lg flex flex-wrap">
<div class="flex w-8/12 lg:w-9/12">
<div class="w-10/12 ml-8 border-b border-gray-600 border-dotted">
{{form.customer | add_class:'bg-transparent w-full text-right focus:outline-none'}}
</div>
<div class="">
: ناو
</div>
</div>
</div>
<!-- table -->
<div class="mt-1 border border-black">
<!-- header -->
<div class="flex flex-wrap grayBG text-sm text-white">
<div class="w-1/12 text-center border-r">
<i class="fas fa-cog"></i>
</div>
<div class="w-2/12 border-r text-center">
total price
</div>
<div class="w-2/12 border-r text-center">
discount
</div>
<div class="w-1/12 border-r text-center">
cash
</div>
<div class="w-1/12 border-r text-center">
loan
</div>
<div class="w-1/12 border-r text-center">
price
</div>
<div class="w-2/12 border-r text-center">
quantity
</div>
<div class="w-2/12 border-r text-center">
product
</div>
</div>
<!-- inputs -->
<div id="allInp">
<div class="flex flex-wrap grayBG text-sm text-black inp">
<div class="w-1/12 border-r">
</div>
<div class="w-2/12 p-2 border-r text-center">
<input type="number" class="totalSumField rounded-lg focus:outline-none py-1 w-full">
</div>
<div class="w-2/12 p-2 border-r text-center">
<input type="text" onkeyup="totalSum()" class="rounded-lg discount focus:outline-none py-1 w-full">
</div>
<div class="w-1/12 p-2 border-r text-center ">
<input type="number" onkeyup="totalSum()" class="rounded-lg cash focus:outline-none py-1 w-full">
</div>
<div class="w-1/12 p-2 border-r text-center ">
<input type="number" onkeyup="totalSum()" class="rounded-lg loan focus:outline-none py-1 w-full">
</div>
<div class="w-1/12 p-2 border-r text-center ">
<input type="number" onkeyup="totalSum()" class="rounded-lg price focus:outline-none py-1 w-full">
</div>
<div class="w-2/12 p-2 border-r text-center ">
<input type="number" onkeyup="totalSum()" class="rounded-lg quantity focus:outline-none py-1 w-full">
</div>
<div class="w-2/12 p-2 border-r text-center">
<datalist id="jor">
<option value="test">
<option value="test">
<option value="test">
<option value="test">
<option value="test">
</datalist>
<input type="text" list="jor" class="w-full rounded-lg focus:outline-none py-1">
</div>
</div>
</div>
<div class="flex flex-wrap grayBG justify-between text-sm mt-2 text-black">
<button class=" grayBG border border-white focus:outline-none text-white m-2 rounded-lg py-1 px-4 text-sm" id="addRow">
add new row <i class="fas fa-plus"></i>
</button>
<div class="w-6/12 flex">
<div class="w-6/12 p-2 border-r text-center">
<p class="mb-2 text-white">total invoice price </p>
<input type="number" id="total" class="rounded-lg focus:outline-none py-1 w-full text-center" placeholder="total invoice price">
</div>
<div class="w-6/12 p-2 border-r text-center">
<p class="mb-2 text-white">total loan</p>
<input type="number" id="loan" class="rounded-lg focus:outline-none py-1 w-full text-center" placeholder="loan">
</div>
</div>
</div>
<!-- clone -->
<div class="hidden">
<div class="inp flex flex-wrap grayBG text-sm text-black" id="inputs">
<div class="w-1/12 border-r flex flex-wrap justify-center items-center">
<button id="removeRow" class="bg-white rounded-lg text-red-500 px-3">
<i class="fas fa-trash"></i>
</button>
</div>
<div class="w-2/12 p-2 border-r text-center">
<input type="text" class="rounded-lg totalSumField focus:outline-none py-1 w-full">
</div>
<div class="w-2/12 p-2 border-r text-center">
<input type="text" onkeyup="totalSum()" class="rounded-lg focus:outline-none discount py-1 w-full">
</div>
<div class="w-1/12 p-2 border-r text-center ">
<input type="number" onkeyup="totalSum()" class="rounded-lg cash focus:outline-none py-1 w-full">
</div>
<div class="w-1/12 p-2 border-r text-center ">
<input type="number" onkeyup="totalSum()" class="rounded-lg loan focus:outline-none py-1 w-full">
</div>
<div class="w-1/12 p-2 border-r text-center ">
<input type="number" onkeyup="totalSum()" class="rounded-lg price focus:outline-none py-1 w-full">
</div>
<div class="w-2/12 p-2 border-r text-center ">
<input type="number" onkeyup="totalSum()" class="rounded-lg quantity focus:outline-none py-1 w-full">
</div>
<div class="w-2/12 p-2 border-r text-center">
<datalist id="jor">
<option value="test">
<option value="test">
<option value="test">
<option value="test">
<option value="test">
</datalist>
<input type="text" list="jor" class="w-full rounded-lg focus:outline-none py-1">
</div>
</div>
</div>
</div>
</div>
<div class="w-6/12 text-center mt-1 mx-auto mb-6">
<button type="submit" class= w-full bg-white text-gray-900" id="print">print</button>
</div>
</form>
</div>
</div>
</body>
</html>
<script>
$('#print').click(function(){
$('.invoice').printThis();
})
$("#addRow").click(function () {
totalSum();
var html = $("#inputs").clone();
$('#allInp').append(html);
});
$(document).on('click', '#removeRow', function () {
$(this).closest('#inputs').remove();
totalSum();
});
function counting(result) {
document.getElementById("total").value= result;
}
function countingloan(result) {
document.getElementById("loan").value= result;
}
counting(0);
countingloan(0);
function totalSumField () {
let inp = document.querySelectorAll("#allInp > .inp");
let result=0;
for(let i=0;i<inp.length;i++){
let price=inp[i].getElementsByClassName("price")[0].value;
let quantity=inp[i].getElementsByClassName("quantity")[0].value;
let cash=inp[i].getElementsByClassName("cash")[0].value;
let discount=inp[i].getElementsByClassName("discount")[0].value;
inp[i].getElementsByClassName("totalSumField")[0].value=(price*quantity)-discount;
inp[i].getElementsByClassName("loan")[0].value=((price*quantity)-discount)-cash;
}
}
function totalSum () {
let inp = document.querySelectorAll("#allInp > .inp");
let result=0;
let loan=0;
for(let i=0;i<inp.length;i++){
let price=inp[i].getElementsByClassName("price")[0].value;
let quantity=inp[i].getElementsByClassName("quantity")[0].value;
let cash=inp[i].getElementsByClassName("cash")[0].value;
let discount=inp[i].getElementsByClassName("discount")[0].value;
result+=(price*quantity)-discount;
loan+=((price*quantity)-discount)-cash;
}
countingloan(loan);
counting(result)
totalSumField()
}
</script>
{% endblock %}
the problem is here i want to make my own html and js instead of using jquery.formset.js because i have to when someone write the price and quantity , then it will automatically multiply them and write the total price in a field , now i want to know how to add input fields in order to get what i expect the result to be?
this work only for the first form
<div id="allInp">
{% for item in items.forms %}
{{item.id}}
<div class="flex flex-wrap grayBG text-sm text-black inp">
<div class="w-1/12 border-r">
</div>
<div class="w-2/12 p-2 border-r text-center">
<input type="number" class="totalSumField rounded-lg focus:outline-none py-1 w-full">
</div>
<div class="w-2/12 p-2 border-r text-center">
{{item.discount | add_class:'rounded-lg discount focus:outline-none py-1 w-full'}}
</div>
<div class="w-1/12 p-2 border-r text-center ">
{{item.cash|add_class:'rounded-lg cash focus:outline-none py-1 w-full'}}
</div>
<div class="w-1/12 p-2 border-r text-center ">
<input type="number" onkeyup="totalSum()" class="rounded-lg qarz focus:outline-none py-1 w-full">
</div>
<div class="w-1/12 p-2 border-r text-center ">
{{item.price | add_class:'rounded-lg price focus:outline-none py-1 w-full'}}
</div>
<div class="w-2/12 p-2 border-r text-center ">
{{item.quantity | add_class:'rounded-lg quantity focus:outline-none py-1 w-full'}}
</div>
<div class="w-2/12 p-2 border-r text-center">
{{item.item|add_class:'w-full rounded-lg focus:outline-none py-1'}}
</div>
</div>
{% endfor %}
</div>
<div class="hidden">
<div class="inp flex flex-wrap grayBG text-sm text-black" id="inputs">
<div class="w-1/12 border-r flex flex-wrap justify-center items-center">
<button id="removeRow" class="bg-white rounded-lg text-red-500 px-3">
<i class="fas fa-trash"></i>
</button>
</div>
<div class="w-2/12 p-2 border-r text-center">
<input type="text" class="rounded-lg totalSumField focus:outline-none py-1 w-full">
</div>
<div class="w-2/12 p-2 border-r text-center">
{{item.discount | add_class:'rounded-lg discount focus:outline-none py-1 w-full'}}
</div>
<div class="w-1/12 p-2 border-r text-center ">
{{item.cash|add_class:'rounded-lg cash focus:outline-none py-1 w-full'}}
</div>
<div class="w-1/12 p-2 border-r text-center ">
<input type="number" onkeyup="totalSum()" class="rounded-lg qarz focus:outline-none py-1 w-full">
</div>
<div class="w-1/12 p-2 border-r text-center ">
{{item.price | add_class:'rounded-lg price focus:outline-none py-1 w-full'}}
</div>
<div class="w-2/12 p-2 border-r text-center ">
{{item.quantity | add_class:'rounded-lg quantity focus:outline-none py-1 w-full'}}
</div>
<div class="w-2/12 p-2 border-r text-center">
{{item.item|add_class:'w-full rounded-lg focus:outline-none py-1'}}
</div>
</div>
</div>
i much appreciate your helps please is its possible let me know
most regards ..