Django: Javascript not loading extra rows - javascript

I have a page that allows a doctor to create a prescription. This page as a form that allows you to add as many rows as you want to add elements to your prescription. I will share with you the view and html template.
I replicated the exam same thing for creating another type of prescription (lab analysis).
This time, the button does not want to add more rows, even though I used the exact same code, and I will tell you exactly what breaks it, but I do not know how to fix it.
Here is the code for the first one (the one that works):
view:
#login_required
def createPrescription(request):
[...] # ommited because unrelated
drugs = Drug.objects.all()
return render[...] # ommited because unrelated
HTML:
<!-- PAGE-HEADER END -->
<form method="POST" id="presForm">
{% csrf_token %}
[...] # ommited because unrelated
<div class="card">
<div class="card-header">
<div class="card-title">Eléments de l'ordonnance</div>
</div>
<div class="card-body">
<table id="myTable" class="table order-list">
<thead>
<tr>
<td>Médicament</td>
<td>Dosage</td>
<td>Posologie</td>
<td>Durée</td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-5">
<div class="row">
<div class="col-6">
<input class="form-control mb-4" placeholder="Nom du médicament" type="text" name="medicament0">
</div>
<div class="col-6">
<div class="form-group">
<select class="form-control select2-show-search form-select" id="medicament-id0" name="listemedicament0">
<option value="0">Ou choisir de la liste</option>
{% for d in drugs %}
<option value="{{ d.id }}">{{ d }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
</td>
<td>
<input class="form-control mb-4" placeholder="20mg" type="text" name="dosage0">
</td>
<td>
<input class="form-control mb-4" placeholder="2 / j avant repas" type="text" name="posologie0">
</td>
<td>
<input class="form-control mb-4" placeholder="7 jours" type="text" name="duree0">
</td>
<td><a class="deleteRow"></a>
<input type="button" class="btn btn-lg btn-secondary " id="addrow" value="Ajouter élément" />
</td>
</tr>
</tbody>
</table>
</div>
<div class="btn-list ms-auto my-auto">
Annuler
<button id="presBtn" type="submit" class="btn btn-primary btn-space mb-0">Soumettre</button>
</div>
</div>
</div>
</form>
<!--/Row-->
Now here is the code of the second one (the one that doesn't work):
view:
#login_required
def createLabRequest(request):
exams = _ex.objects.all()
return render[...] # ommited because unrelated
HTML:
<!-- PAGE-HEADER END -->
<form method="POST" id="presForm">
{% csrf_token %}
[...] # ommited because unrelated
<div class="card">
<div class="card-header">
<div class="card-title">Eléments d'analyses</div>
</div>
<div class="card-body">
<table id="myTable" class="table order-list">
<thead>
<tr>
<td>Analyse</td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-5">
<div class="row">
<div class="col-6">
<input class="form-control mb-4" placeholder="Analyse" type="text" name="exam0">
</div>
<div class="col-6">
<div class="form-group">
<select class="form-control select2-show-search form-select" id="exam-id0" name="examlist0">
<option value="0">Ou choisir de la liste</option>
{% for e in exams %}
<option value="{{ e.id }}">{{ e }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
</td>
<td><a class="deleteRow"></a>
<input type="button" class="btn btn-lg btn-secondary " id="addrow" value="Ajouter élément" />
</td>
</tr>
</tbody>
</table>
</div>
<div class="btn-list ms-auto my-auto">
Annuler
<button id="presBtn" type="submit" class="btn btn-primary btn-space mb-0">Soumettre</button>
</div>
</div>
</div>
</form>
<!--/Row-->
Now the problem is this:
When I copied the code and renamed {% for d in drugs %} <option value="{{ d.id }}">{{ d }}</option> to {% for e in exams %} <option value="{{ e.id }}">{{ e }}</option> The button to add a new row stopped working.

Here is the problem: the list contains some data that interferes with the loading of the JavaScript, to solve this, we need to make the following changes:
Add the following function to the MedicalExam model:
def examDisplay(self):
display = ''.join(e for e in self.name if e.isalnum or e == ' ' or e == '-' or e == '/')
return display
And in the HTML, we put:
{% for e in exams %} <option value="{{ e.id }}">{{ e.examDisplay }}</option>

Related

How to save multiple data in database by Django query set from Html table

I am creating sales invoice where I create one form with two database table connections like
sales details are saving in Sales_Invoice table and Items which we add in invoice will save in Item_Details table.
So here in html form I am creating table for add items after adding that I items I wish to save sales invoice in sales_details and all items in Item_Details by using sales_invoice foreign key
My data is saving but only one row is saving How can I save multiple data in django by using queryset
Html Form
<form method="post">
{% csrf_token %}
<!-- Estimate Details -->
<div class="row pb-3 pt-3">
<div class="col-md mb-2">
<label>Invoice Number</label>
<input type="text" class="form-control" placeholder={{invoice_number}} name="invoice_number">
</div>
<div class="col-md mb-2">
<label>Date</label>
<input type="date" class="form-control" placeholder="Invoive_Date" name="invoice_date">
</div>
<div class="col-md mb-2">
<label>Select Customer</label>
<select id="customer_id" class="form-control" name="customer_id">
<option value="">Select Customer</option>
{% if all_customers %}
{% for c in all_customers %}
<option value="{{c.customer_id}}">{{c.first_name}} {{c.surname}}</option>
{% endfor %}
{% endif %}
</select>
</div>
</div>
<div class="row pb-3">
<div class="col-md-4 mb-2">
<label>Contact Person Name</label>
<input type="text" class="form-control" id="contact_person_name" name="contact_person_name"
placeholder="Contact Person">
</div>
<div class="col-md-4 mb-2">
<label>Phone</label>
<input type="number" class="form-control" placeholder="Phone" id="phone" name="phone">
</div>
</div>
<div class="row pb-3">
<div class="col-md mb-2">
<label>Bill To</label>
<textarea type="text" class="form-control" placeholder="Bill To" id="bill_to"
name="bill_to"></textarea>
</div>
<div class="col-md mb-2">
<label>Ship To</label>
<textarea type="text" class="form-control" placeholder="Ship To" id="ship_to"
id="ship_to"></textarea>
</div>
<div class="col-md mb-2">
<label>Special Instructions</label>
<textarea type="text" class="form-control" placeholder="Special Instructions"
id="special_instructions" name="special_instructions"></textarea>
</div>
</div>
<!-- Items -->
<div class="card-header">
<div class="row">
<div class="col-auto m-1 pl-2">
<img src="{% static 'images/GIF/Add.gif'%}" width="30px" height="30px">
</div>
<div class="col mt-2">
<h5>Item Details</h5>
</div>
</div>
</div>
<div>
<!-- <form> -->
<div class="row pb-3 pt-3">
<div class="col-md mb-2">
<label>Item</label>
<select class="form-control" placeholder="Items" id="item" name="item">
<option value="">Item</option>
{% if all_items %}
{% for i in all_items %}
<option value="{{i.item}}">{{i.item}}</option>
{% endfor %}
{% endif %}
</select>
</div>
<div class="col-md mb-2">
<label>Unit</label>
<select class="form-control" placeholder="Units" id="unit_name" name="unit_name">
<option value="">Unit</option>
{% if all_unit %}
{% for u in all_unit %}
<option value="{{u.unit_name}}">{{u.unit_name}}</option>
{% endfor %}
{% endif %}
</select>
</div>
<div class="col-md mb-2">
<label>Unit Price</label>
<input type="number" class="form-control" placeholder="Unit Price" id="unit_price"
name="unit_price">
</div>
<div class="col-md mb-2">
<label>Quantity</label>
<input type="number" class="form-control" placeholder="Quantity" onchange="quantityChange()" id="quantity"
name="quantity">
</div>
<div class="col-md mb-2">
<label>HSN</label>
<input type="text" class="form-control" placeholder="HSN" id="hsn" name="hsn">
</div>
<div class="col-md mb-2">
<label>Tax</label>
<input type="text" class="form-control" placeholder="Tax" id="tax_code" name="tax_code">
</div>
<div class="col-md mb-2">
<label>Amount</label>
<input type="number" class="form-control" readonly placeholder="Amount" id="amount" name="amount">
</div>
<div class="col-auto">
<P><button type="button" class="w3-btn w3-blue" id="submit">Save</button>
</div>
</div>
<!-- </form> -->
</div>
<br>
<!-- Items table -->
<div id="tab">
<div class="table-responsive-md">
<table class="table table-sm" style="background-color: #e4f7f5;" id="demo">
<thead>
<tr>
<th nowrap>Items</th>
<th nowrap>HSN</th>
<th nowrap>Quantity</th>
<th nowrap>Unit</th>
<th nowrap>Unit Price</th>
<th nowrap>Tax</th>
<th nowrap>Amount</th>
<th nowrap>Action</th>
</tr>
</thead>
<tbody id="items_tbody"></tbody>
<tfoot>
<tr>
<th colspan="5"></th>
<th id="total">Total :</th>
<td id="total_value"></td>
</tr>
<tr>
<th colspan="5"></th>
<th id="CGST">CGST :</th>
<td>200</td>
</tr>
<tr>
<th colspan="5"></th>
<th id="SGST">SGST :</th>
<td>200</td>
</tr>
<tr>
<th colspan="5"></th>
<th id="discount">Discount :</th>
<td>200</td>
</tr>
<tr>
<th colspan="5"></th>
<th id="round_off">Round Off :</th>
<td>200</td>
</tr>
<tr>
<th colspan="5"></th>
<th id="grand_total">Grand Total :</th>
<td>200</td>
</tr>
</tfoot>
</table>
</div>
</div>
<!-- Other Details -->
<div class="card-header">
<div class="row">
<div class="col-auto m-1 pl-2">
<img src="../static/images/GIF/Setting.gif" width="30px" height="30px">
</div>
<div class="col mt-2">
<h5>Other Details</h5>
</div>
</div>
</div>
<div class="row pb-3 pt-3">
<div class="col-md mb-2">
<label>User</label>
<input type="text" class="form-control" placeholder={{username}} id="user" name="username">
</div>
<div class="col-md mb-2">
<label>Remarks</label>
<textarea type="text" class="form-control" placeholder="Remarks" name="remarks"></textarea>
</div>
</div>
<div class="row">
<div class="col">
<button class="btn btn-primary" onclick=SaveData()>Save</button>
</div>
</div>
</form>
<div id="myDiv"></div>
</div>
</div>
<br>
</div>
<br>
<scripts>
//Add Items
var items = [];
$("#submit").on("click", function () {
var temp =
{
"item" : document.getElementById("item").value,
"hsn" : document.getElementById("hsn").value,
"quantity" : document.getElementById("quantity").value,
"unit_name" : document.getElementById("unit_name").value,
"unit_price" : document.getElementById("unit_price").value,
"tax_code" : document.getElementById("tax_code").value,
"amount":document.getElementById("amount").value,
};
items.push(temp);
console.log(items)
$("#demo > tbody").empty();
var total_amount = 0
for (var i = 0; i < items.length; i++) {
document.getElementsByTagName("tbody")[0].innerHTML+= "<tr id='row" + i +"'><td>"+items[i].item+"</td><td>"+items[i].hsn+"</td><td>"+items[i].quantity+"</td><td>"+items[i].unit_name+"</td><td>"+items[i].unit_price+"</td><td>"+items[i].tax_code+"</td><td>"+items[i].amount+"</td><td><button class='remCF1 btn btn-small btn-danger'" +
"onClick='delRow(" + i + ")' name='delButton'>Delete</button></td></tr>"
console.log(items[i].amount)
items[i].amount = parseInt(items[i].amount)
total_amount = total_amount + items[i].amount
$('#total_value').text(total_amount);
};
});
function quantityChange(){
var base_Amount = parseInt(document.getElementById("quantity").value) * parseInt(document.getElementById("unit_price").value);
$("#amount").val(base_Amount);
}
function delRow(item) {
this.items.splice(item, 1);
document.getElementById("row" + item).remove();
console.log(items)
$("#demo > tbody").empty();
for (var i = 0; i < items.length; i++) {
document.getElementsByTagName("tbody")[0].innerHTML+= "<tr id='row" + i +"'><td>"+items[i].item+"</td><td>"+items[i].hsn+"</td><td>"+items[i].quantity+"</td><td>"+items[i].unit_name+"</td><td>"+items[i].unit_price+"</td><td>"+items[i].tax_code+"</td><td>"+items[i].amount+"</td><td><button class='remCF1 btn btn-small btn-danger'" +
"onClick='delRow(" + i + ")' name='delButton'>Delete</button></td></tr>"
};
}
function SaveData(){
for (var i = 0; i < items.length; i++) {
document.getElementsByTagName("tbody")[0].innerHTML+= "<tr id='row" + i +"'><td>"+items[i].item+"</td><td>"+items[i].hsn+"</td><td>"+items[i].quantity+"</td><td>"+items[i].unit_name+"</td><td>"+items[i].unit_price+"</td><td>"+items[i].tax_code+"</td><td>"+items[i].amount+"</td></tr>"
};
}
console.log("OUT");
</script>
Views.py
if request.method == 'POST':
#SALES INVOICE
invoice_number=gen_invoice_number
invoice_date=request.POST['invoice_date']
customer_id=request.POST['customer_id']
customer_obj= Customer.objects.get(customer_id=customer_id)
special_instructions=request.POST['special_instructions']
company=company_label
#invoice total
total= 100 #request.POST['total']
CGST= 10 #request.POST['CGST']
SGST= 10 #request.POST['SGST']
discount=10 # request.POST['discount']
round_off= 100 #request.POST['round_off']
grand_total=100 #request.POST['grand_total']
#other details
user=username
print(user)
user_obj = User.objects.get(username=user)
print(user_obj)
remarks=request.POST['remarks']
sales_details=Sales_Invoice.objects.create(invoice_number=invoice_number,invoice_date=invoice_date,customer_id=customer_obj,company=company,special_instructions=special_instructions,total=total,CGST=CGST,SGST=SGST,discount=discount,round_off=round_off,grand_total=grand_total,user=user_obj,remarks=remarks)
sales_details.save()
total_sales = Sales_Invoice.objects.filter(company=company_label).all().count() + 1
new_gen_invoice_number=f"{company_label}-{month}{year}-{total_sales}"
#ITEM DETAILS
sales_invoice_id = gen_invoice_number
sales_invoice_id_obj=Sales_Invoice.objects.get(invoice_number=sales_invoice_id)
item = request.POST['item']
item_obj= New_Stock_Entry.objects.get(item=item)
hsn = request.POST['hsn']
quantity = request.POST['quantity']
tax_code = request.POST['tax_code']
unit_name = request.POST['unit_name']
unit_obj = Unit_Setting.objects.get(unit_name=unit_name)
unit_price = request.POST['unit_price']
amount = request.POST['amount']
items=Items_Details.objects.create(sales_invoice_id=sales_invoice_id_obj,item=item_obj,hsn=hsn,quantity=quantity,unit_name=unit_obj,unit_price=unit_price,tax_code=tax_code,amount=amount)
items.save()

Adding subtotals from HTML input and adding them with Javascript without Refresh

I want to add specific inputs from my HTML template and add them using javascript. I have reached the part where I can add all the inputs with ('[type="number"].form-control') but I want to be able to specifiy the inputs by ID so that I can have different subtotals.
here is a print screen of what I want to acheive:
I want to add Item 1 and Item 2 and get a subtotal. Add Item 3 and 4 and 5 and get subtotal. Then add the 2 subtotals together.
<!-- language: lang-js -->
<script>
const q=(e,n=document)=>n.querySelector(e);
const qa=(e,n=document)=>n.querySelectorAll(e);
const results={};
qa('[type="number"].form-control').forEach(input=>input.addEventListener('keyup',function(e){
/* add the value against the id to the object described above */
results[ this.name ]=Number( this.value );
if( Object.keys( results ).length==2 ){
q('th#Total').textContent=[ ...Object.values( results ) ].reduce((a,v)=>a+v);
}
}));
</script>
<!-- language: lang-html -->
<table class="table table-hover text-nowrap table-borderless">
<tbody>
<tr>
<td>
<input
placeholder="Type in the Equipment and assets"
autocomplete="off"
type="text"
class="form-control"
name="item_1"
id="item_1"
{% if form.is_bound %}value="{{ form.item_1.value }}"{% endif %}/>
{% for err in form.item_1.errors %}
<small class="text-danger mb-2 ml-2">{{ err }}</small>
{% endfor %}
</td>
<td>
<h6 style="float:left; margin-right:5px; margin-top:7px">$</h6>
<input
autocomplete="off"
type="number"
class="form-control w-25"
name="item_1_amount"
id="item_1_amount"
style="float:left"
{% if form.is_bound %}value="{{ form.item_1_amount.value }}"{% endif %}/>
{% for err in form.item_1_amount.errors %}
<small class="text-danger mb-2 ml-2">{{ err }}</small>
{% endfor %}
</td>
</tr>
<tr>
<td>
<input
placeholder="Type in the Equipment and assets"
autocomplete="off"
type="text"
class="form-control"
name="item_2"
id="item_2"
{% if form.is_bound %}value="{{ form.item_2.value }}"{% endif %}/>
{% for err in form.item_2.errors %}
<small class="text-danger mb-2 ml-2">{{ err }}</small>
{% endfor %}
</td>
<td>
<h6 style="float:left; margin-right:5px; margin-top:7px">$</h6>
<input
autocomplete="off"
type="number"
class="form-control w-25"
name="item_2_amount"
id="item_2_amount"
style="float:left"
{% if form.is_bound %}value="{{ form.item_2_amount.value }}"{% endif %}/>
{% for err in form.item_2_amount.errors %}
<small class="text-danger mb-2 ml-2">{{ err }}</small>
{% endfor %}
</td>
</tr>
<thead class="table-light">
<tr>
<th scope="col">subtotal</th>
<th scope="col" id="Total"></th>
</tr>
</thead>
<tr>
<td>
<input
placeholder="Type in the Equipment and assets"
autocomplete="off"
type="text"
class="form-control"
name="item_3"
id="item_3"
{% if form.is_bound %}value="{{ form.item_3.value }}"{% endif %}/>
{% for err in form.item_3.errors %}
<small class="text-danger mb-2 ml-2">{{ err }}</small>
{% endfor %}
</td>
<td>
<h6 style="float:left; margin-right:5px; margin-top:7px">$</h6>
<input
autocomplete="off"
type="number"
class="form-control w-25"
name="item_3_amount"
id="item_3_amount"
style="float:left"
{% if form.is_bound %}value="{{ form.item_3_amount.value }}"{% endif %}/>
{% for err in form.item_3_amount.errors %}
<small class="text-danger mb-2 ml-2">{{ err }}</small>
{% endfor %}
</td>
</tr>
<tr>
<td>
<input
placeholder="Type in the Equipment and assets"
autocomplete="off"
type="text"
class="form-control"
name="item_4"
id="item_4"
{% if form.is_bound %}value="{{ form.item_4.value }}"{% endif %}/>
{% for err in form.item_4.errors %}
<small class="text-danger mb-2 ml-2">{{ err }}</small>
{% endfor %}
</td>
<td>
<h6 style="float:left; margin-right:5px; margin-top:7px">$</h6>
<input
autocomplete="off"
type="number"
class="form-control w-25"
name="item_4_amount"
id="item_4_amount"
style="float:left"
{% if form.is_bound %}value="{{ form.item_4_amount.value }}"{% endif %}/>
{% for err in form.item_4_amount.errors %}
<small class="text-danger mb-2 ml-2">{{ err }}</small>
{% endfor %}
</td>
</tr>
<tr>
<td>
<input
placeholder="Type in the Equipment and assets"
autocomplete="off"
type="text"
class="form-control"
name="item_5"
id="item_5"
{% if form.is_bound %}value="{{ form.item_5.value }}"{% endif %}/>
{% for err in form.item_5.errors %}
<small class="text-danger mb-2 ml-2">{{ err }}</small>
{% endfor %}
</td>
<td>
<h6 style="float:left; margin-right:5px; margin-top:7px">$</h6>
<input
autocomplete="off"
type="number"
class="form-control w-25"
name="item_5_amount"
id="item_5_amount"
style="float:left"
{% if form.is_bound %}value="{{ form.item_5_amount.value }}"{% endif %}/>
{% for err in form.item_5_amount.errors %}
<small class="text-danger mb-2 ml-2">{{ err }}</small>
{% endfor %}
</td>
</tr>
<thead class="table-light">
<tr>
<th scope="col">subtotal</th>
<th scope="col" id="Total2"></th>
</tr>
</thead>
<thead class="table-light">
<tr>
<th scope="col">Grand Total</th>
<th scope="col" id="Grandtotal"></th>
</tr>
</thead>
</tbody>
</table>
<div class="text-center">
<button
class="btn btn-primary mt-5"
onclick="stepper1.previous()"
>
Previous
</button>
<button type="submit" class="btn btn-success mt-5">
Submit
</button>
</div>
My question:
How to add Item 1 and 2 together to get Subtotal 1 then add 3 and 4 together to get subtotal 2 and then add the 2 subtotals to get the grand total.
I've spun a codepen of the code I'm about to explain here (with comments in the JS as well): https://codepen.io/marcusparsons/pen/vYZrVpy?editors=1010
The best way to achieve that kind of functionality is to group your inputs together with a couple more binding classes. What I did was add an extra primary class and then a subset class for targeting groups so that way individual groups can be calculated dynamically (meaning you could have any amount of inputs in a group and each value will be taken into account without extra code). And also, they each have a primary class because we're also getting a Grand Total.
For example, you want to add item 1 and item 2 together for Subtotal 1. Well, you could do that manually, but I always ask the question, "What if I have 1,000 inputs I want to equal Subtotal 1?" In this case, classes come in super handy, like so (I stripped some of your server side code to be able to work with just the HTML and JS needed):
<input
autocomplete="off"
type="number"
<!-- Added subtotal-group and subtotal-group-2 class -->
class="form-control w-25 subtotal-group subtotal-group-2"
name="item_4_amount"
id="item_4_amount"
style="float:left">
Basically, item 1 and item 2 got the subtotal-group and subtotal-group-1 classes. And then items 3, 4, and 5 got the subtotal-group and subtotal-group-2 classes.
And then, in the JavaScript, I target each of the groupings and apply them to the target elements you want. I also changed the event keyword to input from keyup because if you only target keyup on a type="number" input, you will miss the events that occur when up and down arrows are clicked/touched and you'll miss copy/paste events from user. When in doubt, I go with input over keyup for the event to listen to.
//Gather totals for subtotal-group-1 which is item 1 and item 2
//you could expand this ad infinitum by adding input type=number elements to the class subtotal-group and subtotal-group-1
//Keeping these elements grouped together with these classes allow us to be flexible and group things together
//Classes are powerful!!!
const resultGroupSet1 = [...qa('.subtotal-group-1')]
.map(s => Number(s.value))
.reduce((a,v) => a+v);
q('th#Total').textContent = resultGroupSet1;
And then rinse and repeat for each subsequent group:
const resultGroupSet2 = [...qa('.subtotal-group-2')]
.map(s => Number(s.value))
.reduce((a,v) => a+v);
q('th#Total2').textContent = resultGroupSet2;
And to get the final group total, just target the primary .subtotal-group class:
const resultGroupSetGrandTotal = [...qa('.subtotal-group')]
.map(s => Number(s.value))
.reduce((a,v) => a+v);
q('th#Grandtotal').textContent = resultGroupSetGrandTotal;

how get value input use jquery

I have 2 forms: form1 and form2. form2 is hidden and when I click on the validation button, form1 disappears and form2 appears. form1 contains an input1. When I click on the validation button, I want the value of Nameinput1 to be put after "name:" on form2., someone tells me where is the error
<div id='form1'>
<h3>form group 1</h3>
#if ($message = Session::get('success'))
<div class="alert alert-success">
<p>{{ $message }}</p>
</div>
#endif
{!! csrf_field() !!}
<div class="form-group">
<label>Date:</label>
<input type="date" id="datePicker" name="date" class="form-control" placeholder="date naissance">
</div>
<div class="form-group">
<label>Select Chantier:</label>
{!! Form::select('chantier_id',[''=>'--- Select Chantier ---']+$chantiers,null,array('class' => 'form-control','id' => 'select1')) !!}
</div>
<div class="form-group">
<label>Select Ouvrage:</label>
{!! Form::select('ouvrage_id',[''=>'--- Select Ouvrage ---'],null,array('class' => 'form-control','id' => 'select2')) !!}
</div>
<div class="form-group">
<label>Nbre de jour</label>
<input type="text" name="nbr" id='input1' class="form-control" placeholder="nbre de jour" value="1">
<span id='error'>Input can not blank</span>
</div>
<div class="form-group">
<label>name</label>
<input type="text" id='name' class="form-control" placeholder="name">
</div>
<div class="form-group col-md-offset-5 ">
<button class="btn btn-success " type="submit" id="hide">valider</button>
</div>
</div>
form 2:
<div id='form2'>
<h3>form group 2</h3>
<h4>name : <span id="name"></span></h4>
<table class="table table-bordered" id="mytable">
<tr>
<th>Archive</th>
<th><input type="checkbox" id="check_all"></th>
<th>S.No.</th>
<th>matricule</th>
<th>nom & prenom</th>
<th>salaire net</th>
<th>nbre de jour </th>
<th>prime</th>
</tr>
#if($salaries->count())
#foreach($salaries as $key => $salarie)
<tr id="tr_{{$salarie->id}}">
<td>archive</td>
<td><input type="checkbox" class="checkbox" data-id="{{$salarie->id}}"></td>
<td>{{ ++$key }}</td>
<td>{{ $salarie->matricule }}</td>
<td >{{ $salarie->nom }} {{ $salarie->prenom }}</td>
<td><input type="hidden" name="salaire" value="{{ $salarie->salairenet }}">{{ $salarie->salairenet }}</td>
<td ><input type="text" class='input2' name="nbreJ" class="form-control" ></td>
<td><input type="text" name="prime" class="form-control" value="0"></td>
</tr>
#endforeach
#endif
</table>
<div class="form-group col-md-offset-5 ">
<button class="btn btn-success add-all" type="submit" >Pointage</button>
</div>
</div>
</div>
code jquery:
$(document).ready(function(){
$("#hide").click(function(){
let value = $('#input1').val();
let name = $('#name').val();
alert(name);
$('#name').text(name);
if (value == ""){
$('#error').show();
}else{
$("#form1").hide();
$("#form2").show();
$('.input2').val(value);
}
});
});
Because 2 form have same id with name, you need use $('#form2 #name').text(value);
$(document).ready(function(){
$("#hide").click(function(){
let value = $('#input1').val();
let name = $('#form1 #name').val();
//alert(name);
$('#form2 #name').text(name);
if (value == ""){
$('#error').show();
}else{
$("#form1").hide();
$("#form2").show();
$('.input2').val(value);
}
});
});
$(document).ready(function(){
$("#hide").click(function(){
let value = $('#input1').val();
let name = $('#form1 #name').val();
//alert(name);
$('#form2 #name').text(name);
if (value == ""){
$('#error').show();
}else{
$("#form1").hide();
$("#form2").show();
$('.input2').val(value);
}
});
});
#form2{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='form1'>
<h3>form group 1</h3>
#if ($message = Session::get('success'))
<div class="alert alert-success">
<p>{{ $message }}</p>
</div>
#endif
{!! csrf_field() !!}
<div class="form-group">
<label>Date:</label>
<input type="date" id="datePicker" name="date" class="form-control" placeholder="date naissance">
</div>
<div class="form-group">
<label>Select Chantier:</label>
{!! Form::select('chantier_id',[''=>'--- Select Chantier ---']+$chantiers,null,array('class' => 'form-control','id' => 'select1')) !!}
</div>
<div class="form-group">
<label>Select Ouvrage:</label>
{!! Form::select('ouvrage_id',[''=>'--- Select Ouvrage ---'],null,array('class' => 'form-control','id' => 'select2')) !!}
</div>
<div class="form-group">
<label>Nbre de jour</label>
<input type="text" name="nbr" id='input1' class="form-control" placeholder="nbre de jour" value="1">
<span id='error'>Input can not blank</span>
</div>
<div class="form-group">
<label>name</label>
<input type="text" id='name' class="form-control" placeholder="name">
</div>
<div class="form-group col-md-offset-5 ">
<button class="btn btn-success " type="submit" id="hide">valider</button>
</div>
</div>
<div id='form2'>
<h3>form group 2</h3>
<h4>name : <span id="name"></span></h4>
<table class="table table-bordered" id="mytable">
<tr>
<th>Archive</th>
<th><input type="checkbox" id="check_all"></th>
<th>S.No.</th>
<th>matricule</th>
<th>nom & prenom</th>
<th>salaire net</th>
<th>nbre de jour </th>
<th>prime</th>
</tr>
#if($salaries->count())
#foreach($salaries as $key => $salarie)
<tr id="tr_{{$salarie->id}}">
<td>archive</td>
<td><input type="checkbox" class="checkbox" data-id="{{$salarie->id}}"></td>
<td>{{ ++$key }}</td>
<td>{{ $salarie->matricule }}</td>
<td >{{ $salarie->nom }} {{ $salarie->prenom }}</td>
<td><input type="hidden" name="salaire" value="{{ $salarie->salairenet }}">{{ $salarie->salairenet }}</td>
<td ><input type="text" class='input2' name="nbreJ" class="form-control" ></td>
<td><input type="text" name="prime" class="form-control" value="0"></td>
</tr>
#endforeach
#endif
</table>
<div class="form-group col-md-offset-5 ">
<button class="btn btn-success add-all" type="submit" >Pointage</button>
</div>
</div>
</div>
code jquery:

concatenate var and <tr> in jquery to have all in the same row

I added javascript, jquery at the bottom of my blade page to allow me to add a new line containing all the table with id="dynamic_field".(but without the button name "add" after the second, it should be a cross for deleting)
And my question is : how I can put all this these lines in $('#dynamic_field').append(....here....) because I try copy paste and there is everytime syntax error..
here the blade file:
#extends ('layout.layout')
#section('containerContent')
<div class="col-md-12">
<form method="POST" enctype="multipart/form-data" id="add_tour">
{{ csrf_field() }}
#if (count($errors))
<div class="form-group">
<div class="alert alert-danger">
<ul>
#foreach($errors->all() as $error)
<li> {{ $error }}</li>
#endforeach
</ul>
</div>
</div>
#endif
<div class="content">
<h1>Create a new Tour:</h1>
<div class="form-group">
<div class="col-lg-6">
<input class="form-control" type="text" name="tourLabel" placeholder="Tour label">
</div>
</div>
<div class="form-group">
<div class="col-lg-6">
<textarea class="form-control" placeholder="Resume of tour" name="tourResume" rows="3"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-lg-6">
<select id='nameArtist' name='nameArtist'>
<option value=''>Select Music Artist or Band</option>
#foreach ($artists as $artist)
<option value="{{ $artist->id }}">{{ $artist->artist_name }}</option>
#endforeach
</select>
</div>
</div>
<h2 align="center">Add Concert to your Tour:</h2>
<div class="table-responsive">
<table class="table table-bordered" id="dynamic_field">
<tr>
<td><select id='concertRoom' name='concertRoom'>
<option>Select your concert room</option>
#foreach ($roomsconcert as $room)
<option value="{{ $room->id }}">{{ $room->name }}</option>
#endforeach
</select>
</td>
<td><input class="form-control" type="date" name="dateConcert"{{ Form::datetime('') }}></td>
<td><input class="form-control" type="text" name="concertDuration" placeholder="Duration of the event (min)"></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More concert</button></td>
</tr>
</table>
</div>
<a class="btn btn-primary" href="{{route('show-tour') }}" > Back </a>
<button class="btn btn-success" type="submit"> {{ 'Submit' }}</button>
</div>
</form>
</div>
<script type="text/javascript">
$(document).ready(function(){
var i = 1;
$('#add').click(function() {
i++;
var htmlContent = $('#dynamic_field').html();
/*
$('#dynamic_field').append(htmlContent);
*/
$('#dynamic_field').append('<tr id="row'+i+'" class="dynamic-added"><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
});
$(document).on('click','.btn_remove',function () {
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
});
</script>
#endsection
thanks
Try wrapping your javascript with #verbatim Directive
#verbatim
<script type="text/javascript">
......
</script>
#endverbatim

Multiple files upload - Blueimp jQuery uploader

I use a jquery plugin name "blueimp jquery file upload" - https://github.com/blueimp/jQuery-File-Upload.
I was wondering how can i add dropdown values to the database for each file when uploading multiple files.
I have used the original javascript template for uploading files and i modified it a little. It looks like this.
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<form id="#fileupload" action="server/php/" method="POST" enctype="multipart/form-data">
<tr class="template-upload fade">
<td>
<span class="preview"></span>
</td>
<td>
<p class="name">{%=file.name%}</p>
<strong class="error text-danger"></strong>
</td>
<td>
<p class="size">Processing...</p>
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
<div class="progress-bar progress-bar-success" style="width:0%;">/div>
</div>
</td>
<td>
<label class="title">
<select name="title[]" >
<option value="val1">val1</option>
<option value="val2">val2</option>
</select>
</label>
<label class="description">
<span>Description:</span><br>
<input name="description[]" class="form-control">
</label>
{% if (!i && !o.options.autoUpload) { %}
<button class="btn btn-primary start upload-file" disabled>
<i class="glyphicon glyphicon-upload"></i>
<span>Start</span>
</button>
{% } %}
{% if (!i) { %}
<button class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
{% } %}
</td>
</tr>
</form>
{% } %}
</script>
I am trying to make it to work. I spend a lot of time today but don't want to gave up. If someone had expericne with this, please help me, give me direction.
i have found this but i cant figure it out how to make it work
https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-Form-Data
Thanks
Best Regards,
Darko
See server/php/UploadHandler.php in function handle_file_upload try connect to db and save files details in database

Categories