We Keep Coding

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()

Problem loading JS when creating and modifying an element

I hope you can help me with these problems that I have with the execution of my JS, I have 2 problems that I will detail:
WHEN CREATING
I am using the change and select events to be able to know if I am selecting and changing an option from my question combobox. The problem is when I have selected the option 1 SINGLE / MULIPLE ANSWER of the question type. If when saving I do not have any checkbox selected from the available options, it will throw me the alert to select at least one option, so far everything works fine for me but when I select a checkbox from the options and try to save, the alert does not disappear. I've tried adding the event checked but it can't work for me. What I want to do is that when I save and I do not have an option selected, it throws me the alert message (this already does), and when I select an option, the alert disappears so that it allows me to save.
WHEN MODIFYING
The second problem occurs when I try to modify an element, the JS does not run, so that it can work I have to select another option and return to the previous one so that it can work.
HTML
<form id="dynamic-form" action="" method="post">
<div class="content">
<div class="box box-success box-solid">
<div class="box-header with-border">
<h3 class="box-title">Evaluation</h3>
</div>
<div class="panel-body">
<div class="dynamicform_wrapper"> //where select and change applies
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Questions</th>
<th style="width: 500px;">Options</th>
<th class="text-center" style="width: 90px;">
<button type="button" class="add-item btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
</th>
</tr>
</thead>
<tbody class="container-items">
<tr id="0" class="item">//ID that I use to find the elements
<td class="question"> //where do i apply colspan
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="vcenter">
<span class="panel-title-address">Nr: 1</span>
</td>
<td class="vcenter">
<input type="hidden" id="qquestion-0-id_question" name="qquestion[0][id_question]" value="28">
<div class="form-group field-qquestion-0-type_id required">
<label class="control-label" for="qquestion-0-type_id">Question Type</label>
<select id="qquestion-0-type_id" class="form-control" name="qquestion[0][type_id]" onchange="">
<option value="">-- Select --</option>
<option value="1" selected="">SINGLE / MULIPLE ANSWER</option> // OPTION 1
<option value="2">OPEN QUESTION</option> // OPTION 2
</select>
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-title required">
<input type="text" id="qquestion-0-title" class="form-control" name="qquestion[0][title]" value="" maxlength="250" placeholder="Títle">
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-score required">
<input type="text" id="qquestion-0-score" class="form-control" name="qquestion[0][score]" value="" placeholder="Score" data-plugin-inputmask="inputmask_2fdcbd27">
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-image">
<label class="control-label" for="qquestion-0-image">Image</label>
<input type="file" id="qquestion-0-image" class="empty-value" name="qquestion[0][image]">
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-justify_answer">
<div class="checkbox">
<label style="padding:5px;" for="qquestion-0-justify_answer">
<input type="hidden" name="qquestion[0][justify_answer]" value="0"><input type="checkbox" id="qquestion-0-justify_answer" name="qquestion[0][justify_answer]" value="">
Do you want the answer to be justified?
</label>
<p class="help-block help-block-error"></p>
</div>
</div>
</td>
<td class="clearfix"></td>
</tr>
</tbody>
</table>
</td>
<td class="item-opcion">
<div class="dynamicform_inner">
<table class="table table-bordered">
<thead>
<tr>
<th>Description</th>
<th class="text-center">
<button type="button" class="add-opcion btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
</th>
</tr>
</thead>
<tbody class="container-opciones">
<tr class="opcion-item">
<td class="vcenter">
<input type="hidden" id="qoption-0-0-id_option" name="qoption[0][0][id_option]" value="">
<div class="input-group">
<span class="input-group-addon">
<div class="form-group field-qoption-0-0-opcion_correcta required">
<div class="checkbox">
<label style="padding:5px;" for="qoption-0-0-opcion_correcta">
<input type="hidden" name="qoption[0][0][opcion_correcta]" value="0"><input type="checkbox" id="qoption-0-0-opcion_correcta" name="qoption[0][0][opcion_correcta]" value="1">
</label>
<p class="help-block help-block-error"></p>
</div>
</div>
</span>
<div class="form-group field-qoption-0-0-title_option required">
<input type="text" id="qoption-0-0-title_option" class="form-control" name="qoption[0][0][title_option]" value="2" maxlength="250" placeholder="Opción">
<p class="help-block help-block-error"></p>
</div>
</div>
</td>
<td class="text-center vcenter" style="width: 90px;">
<button type="button" class="remove-opcion btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus"></span></button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="form-group text-error-check required has-error" style="display: none;">
<p class="help-block help-block-error">You must select at least 1 option as correct.</p>
</div>
</td>
<td class="text-center vcenter" style="width: 90px; verti">
<button type="button" class="remove-item btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus"></span></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary"><span class="fa fa-edit"></span> Modificar</button>
</div>
JS
$(".dynamicform_wrapper").on("change","select",function(){
if ($(this).val()== 2) {
$('#0').find('.option-item').not(':first').remove(); //removed all entries found in
$('#0').find('.option-item:first').hide();
$('#0').find('.item-option').hide();
$('#0').find('.question').attr('colspan',2);
}else if ($(this).val()== 1){
//var numberNotChecked = $('#0').find('.option-item input:checkbox:not(":checked")').length;
var numberChecked = $('#0').find('.option-item input:checkbox:checked').length;
$('#0').find('.container-options').append(newtr); //add input
$('#0').find('.item-option').show();
$('#0').find('.question').removeAttr('colspan',2);
$( "#dynamic-form" ).submit(function( event ) {
if(numberChecked > 0){
$('#0').find('.text-error-check').hide();
$('#0').find('.dynamicform_inner').removeAttr("style");
} else {
$('#0').find('.text-error-check').show();
$('#0').find('.dynamicform_inner').css({'border':'2px solid #dd4b39','background-color':'white'});
event.preventDefault();
}
});
}});
Hope you can help me with these problems, I am not very good at using javascript or jquery. I thank you in advance for your support.

In your current code you are using wrong selector to get total value of checked checkboxes.If you check your current jquery code its always giving 0 even if you checked any value. So , you can use input[type="checkbox"]:checked which will give you correct values of checked checkboxes.
Then , you have placed your submit event inside your change event that's the reason the warning shows for the first time but when you select some checkbox and again clicked save button it doesn't go away (also because of wrong selector) so i have separated it from the change event .
Also you have forget to show the tr which you have hide() when select-box value is 2 i.e : item-option so add .show() to it when value is 1.
Working Code :
$(".dynamicform_wrapper").on("change", "select", function() {
if ($(this).val() == 2) {
$('#0').find('.option-item').not(':first').remove(); //removed all entries found in
$('#0').find('.option-item:first').hide();
$('#0').find('.item-option').hide();
$('#0').find('.question').attr('colspan', 2);
} else if ($(this).val() == 1) {
// $('#0').find('.container-options').append(newtr); //add input
$('#0').find('.item-option').show();
$('#0').find('.option-item:first').show(); //show option-item which is hidden
$('#0').find('.question').removeAttr('colspan', 2);
}
});
$("#dynamic-form").submit(function(event) {
//getting all inputs which is under tr
var numberChecked = $('#0').find('input[type="checkbox"]:checked').length;
console.log("No of checkbox checked=" + numberChecked)
if (numberChecked > 0) {
$('#0').find('.text-error-check').hide();
$('#0').find('.dynamicform_inner').removeAttr("style");
event.preventDefault();//remove this to submit
} else {
$('#0').find('.text-error-check').show();
$('#0').find('.dynamicform_inner').css({
'border': '2px solid #dd4b39',
'background-color': 'white'
});
event.preventDefault();
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<form id="dynamic-form" action="" method="post">
<div class="content">
<div class="box box-success box-solid">
<div class="box-header with-border">
<h3 class="box-title">Evaluation</h3>
</div>
<div class="panel-body">
<div class="dynamicform_wrapper"> //where select and change applies
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Questions</th>
<th style="width: 500px;">Options</th>
<th class="text-center" style="width: 90px;">
<button type="button" class="add-item btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
</th>
</tr>
</thead>
<tbody class="container-items">
<tr id="0" class="item">//ID that I use to find the elements
<td class="question"> //where do i apply colspan
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="vcenter">
<span class="panel-title-address">Nr: 1</span>
</td>
<td class="vcenter">
<input type="hidden" id="qquestion-0-id_question" name="qquestion[0][id_question]" value="28">
<div class="form-group field-qquestion-0-type_id required">
<label class="control-label" for="qquestion-0-type_id">Question Type</label>
<select id="qquestion-0-type_id" class="form-control" name="qquestion[0][type_id]" onchange="">
<option value="">-- Select --</option>
<option value="1" selected="">SINGLE / MULIPLE ANSWER</option> // OPTION 1
<option value="2">OPEN QUESTION</option> // OPTION 2
</select>
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-title required">
<input type="text" id="qquestion-0-title" class="form-control" name="qquestion[0][title]" value="" maxlength="250" placeholder="Títle">
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-score required">
<input type="text" id="qquestion-0-score" class="form-control" name="qquestion[0][score]" value="" placeholder="Score" data-plugin-inputmask="inputmask_2fdcbd27">
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-image">
<label class="control-label" for="qquestion-0-image">Image</label>
<input type="file" id="qquestion-0-image" class="empty-value" name="qquestion[0][image]">
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-justify_answer">
<div class="checkbox">
<label style="padding:5px;" for="qquestion-0-justify_answer">
<input type="hidden" name="qquestion[0][justify_answer]" value="0"><input type="checkbox" id="qquestion-0-justify_answer" name="qquestion[0][justify_answer]" value="">
Do you want the answer to be justified?
</label>
<p class="help-block help-block-error"></p>
</div>
</div>
</td>
<td class="clearfix"></td>
</tr>
</tbody>
</table>
</td>
<td class="item-option">
<div class="dynamicform_inner">
<table class="table table-bordered">
<thead>
<tr>
<th>Description</th>
<th class="text-center">
<button type="button" class="add-option btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
</th>
</tr>
</thead>
<tbody class="container-opciones">
<tr class="option-item">
<td class="vcenter">
<input type="hidden" id="qoption-0-0-id_option" name="qoption[0][0][id_option]" value="">
<div class="input-group">
<span class="input-group-addon">
<div class="form-group field-qoption-0-0-opcion_correcta required">
<div class="checkbox">
<label style="padding:5px;" for="qoption-0-0-opcion_correcta">
<input type="hidden" name="qoption[0][0][opcion_correcta]" value="0"><input type="checkbox" id="qoption-0-0-opcion_correcta" name="qoption[0][0][opcion_correcta]" value="1">
</label>
<p class="help-block help-block-error"></p>
</div>
</div>
</span>
<div class="form-group field-qoption-0-0-title_option required">
<input type="text" id="qoption-0-0-title_option" class="form-control" name="qoption[0][0][title_option]" value="2" maxlength="250" placeholder="Opción">
<p class="help-block help-block-error"></p>
</div>
</div>
</td>
<td class="text-center vcenter" style="width: 90px;">
<button type="button" class="remove-opcion btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus"></span></button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="form-group text-error-check required has-error" style="display: none;">
<p class="help-block help-block-error">You must select at least 1 option as correct.</p>
</div>
</td>
<td class="text-center vcenter" style="width: 90px; verti">
<button type="button" class="remove-item btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus"></span></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary"><span class="fa fa-edit"></span> Modificar</button>
</div>
<br>
<br>
<br>
<br>

How can i get selected checkbox value into database?

I have a checkbox with foreach data, I want to select 1 or maximum 5 row, and make the rest checkbox be uncheck and that uncheck checkbox can't be sumbitted into the database
This is the form
<form action="/po_store" method="post">
<div class="container">
<div class="row">
<div class="col-md-6">
#csrf
<div class="form-group">
<label>Tanggal PO</label>
<input class="form-control" type="text" name="tanggal_po" id="datepicker">
{!! $errors->first('tanggal_po','<span class="text-danger">:message</span>') !!}
</div>
<div class="form-group">
<label>No Po</label>
<input class="form-control" type="text" name="no_po">
{!! $errors->first('no_po','<span class="text-danger">:message</span>') !!}
</div>
<div class="form-group">
<label>Supplier</label>
<select name="supplier_nama" class="form-control">
<option value=""hidden>Pilih Supplier</option>
#foreach ($supplier as $s)
<option value="{{ $s->nama_supplier }}">{{ $s->nama_supplier }}</option>
#endforeach
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Apoteker</label>
<select name="apoteker_nama" class="form-control">
<option value=""hidden>Pilih Apoteker</option>
#foreach ($apoteker as $a)
<option value="{{ $a->nama_apoteker }}">{{ $a->nama_apoteker }}</option>
#endforeach
</select>
</div>
<div class="form-group">
<label>Keterangan</label>
<input class="form-control" type="text" name="keterangan">
</div>
</div>
<form action="{{ route('cari') }}" method="GET">
<div class="container-fluid" style="padding-top:25px">
<div class="row">
<div class="col-md-11">
<div class="form-group">
<input type="text" name="cari" class="form-control" placeholder="Cari berdasarkan kode dan nama obat ...">
</div>
</div>
<div class="form-group">
<input type="submit" value="Cari" class="btn btn-primary">
</div>
</div>
</form>
<table class="table table-bordered">
<tbody>
<tr class="text-center">
<th>Pilih</th>
<td>Kode Obat</td>
<td>Nama Obat</td>
<td>Harga Obat</td>
<td>Jumlah Obat PO</td>
<td>Total bayar</td>
</tr>
#foreach ($obat as $o)
<tr>
<td>
<input type="checkbox" name="select" value="{{ $o->nama_obat }}">
</td>
<td>
<input type="text" class="form-control" name="kode_obat" value="{{ $o->kode_obat }}" readonly>
</td>
<td>
<input type="text" class="form-control" name="nama_obat" value="{{ $o->nama_obat }}" readonly>
</td>
<td>
<input id="harga" type="text" class="form-control" name="harga_obat" value="{{ $o->harga_obat }}" onkeyup="sum()">
</td>
<td>
<input id="jumlah" type="text" class="form-control" name="jumlah" onkeyup="sum()">
</td>
<td>
<input id="total" type="text" class="form-control" name="total_harga" onkeyup="sum()" readonly>
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
<button type="submit" class="btn btn-success simpan simp-po"><i class="fas fa-check"> Simpan</i></button>
</form>
This is the javascript to show calculate total field
function sum() {
var harga = document.getElementById('harga').value;
var jumlah = document.getElementById('jumlah').value;
var hasil = parseInt(harga)*parseInt(jumlah);
if(!isNaN(hasil)){
document.getElementById('total').value = hasil;
}
}
I can't submit the form especially the checkbox because the total field can't be empty. But i want just the selected checkbox get the harga field and can be submit
This is how it's looks like
This is my store controller
$message = [
'required' => '*:attribute harus diisi',
'numeric' =>'*:attribute harus angka' ,
'digits_between' => '*:attribute harus berisi 9 atau 13 angka'
];
$data = $request->validate([
'tanggal_po' => ['required'],
'no_po' => ['required'],
'supplier_nama' => ['required'],
'apoteker_nama' => ['required'],
'harga' =>['numeric'],
'select'=>['required'],
'jumlah'=>['required'],
'harga_obat' =>['required'],
'total_harga'=>['required']
],$message);
$select = $request->select;
foreach($select as $s){
$s = $request->select;
}
$tanggal_po = $request->input('tanggal_po');
$no_po = $request->input('no_po');
$supplier_nama = $request->input('supplier_nama');
$apoteker_nama = $request->input('apoteker_nama');
$harga = $request->input('harga');
$jumlah = $request->input('jumlah');
$harga_obat = $request->input('harga_obat');
$total_harga = $request->input('total_harga');
if(PO::create($request->only($tanggal_po,$no_po,$supplier_nama,$apoteker_nama,$select,$harga,$jumlah,$harga_obat,$total_harga))){
$request->session()->flash('success', 'Data Berhasil Di Tambahkan');
}else{
$request->session()->flash('danger', 'Data Tidak Berhasil Di Tambahkan');
}

Maybe an idea: Your checkboxes and inputs in your row should be declared as an array, e.g. name[]:
#foreach ($obat as $o)
<tr>
<td>
<input type="checkbox" name="select[]" value="{{ $o->nama_obat }}">
</td>
<td>
<input type="text" class="form-control" name="kode_obat[]" value="{{ $o->kode_obat }}" readonly>
</td>
...
</tr>
#endforeach
Your validation Rule should look like:
$data = $request->validate([
'kode_obat.*' => 'required_with:select.*,on'
...
],$message);
In your case i would display all vlidation errors on your form page, to check what's wrong:
#if ($errors->any())
<div class="alert alert-danger">
<ul>
#foreach ($errors->all() as $error)
<li>{{ $error }}</li>
#endforeach
</ul>
</div>
#endif
In your controller handle the checkboxes as follows
$selects = $request->select;
foreach($selects as $select) {
//do whatever you want
}

How about to use required_with?
'total_harga'=>['required_with:yourCheckBoxName']

<form action="{{route('admin.post.store')}}" method="POST" enctype="multipart/form-data">
#csrf
<div class="form-group">
<input type="checkbox" id="publish" class="filled-in" name="status" value="1">
<label for="publish">Publish</label>
</div>
</form>
public function store(Request $request)
{
$post = new Post();
if(isset($request->status))
{
$post->status = true;
}else {
$post->status = false;
}
$post->save();
Toastr::success('Post Successfully Saved :)','Success');
return redirect()->route('admin.post.index');
}

Dynamic Table using Angularjs

I am new to Angularjs. I tried to create a dynamic table but the table is not generated and I noticed that the form submit also not working. Please have a look and advise me.
<script>
var app =angular.module("myApp",[]);
app.controller("myCtrl",function($scope) {
$scope.students = [{
'name' : 'ab',
'email' : 'ab#gmail.com',
'dept' : 'cse'
}];
$scope.addStudent = function(){
console.log('addStudent');
$scope.students.push( {
'name' : $scope.name,
'email' : $scope.email,
'dept' : $scope.dept
});
$scope.name = '';
$scope.email = '';
$scope.dept = '';
};
});
</script>
Here is the respective html.
<body>
<div ng-app = "myApp" controller="myCtrl">
<div class = "form-group" >
<form class = "student-form" ng-submit="addStudent()">
<div class = "row">
<label class = "col-md-6" for= "name"> Name :</label>
<input class = "col-md-6" type ="text" ng-model="name" class="validate" required>
</div>
<div class = "row">
<label class = "col-md-6" for= "email"> Email :</label>
<input class = "col-md-6" type ="email" ng-model="email" class="validate" required>
</div>
<div class = "row" >
<label for= "dept" class = "col-md-6"> Department :</label>
<input class = "col-md-6" type ="text" ng-model="dept" class="validate" required>
</div>
<div class = "row">
<!-- <button type="button" class="btn btn-success col-sm-6" ng-click= addStudent()>Add</button>
<button type="button" class="btn btn-danger col-sm-6" ng-click = reset()>Reset</button> -->
<input type="submit" value="Submit" class="btn btn-success"/>
</div>
{{name + ' ' + email +' ' + dept }}
</form>
</div>
<div class = "table-responsive">
<table class="table">
<thead >
<tr class="success">
<td> Name </td>
<td> Email</td>
<td> Department </td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in students">
<td>{{ x.name }}</td>
<td>{{ x.email }}</td>
<td>{{ x.dept }}</td>
</tr>
<tbody>
</table>
</div>
</div>
</body>

You've got a typo.
Use ng-controller instead of controller and it will work.

Directive ng-app & ng-controller code
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="helloApp">
<head>
<title>Hello AngularJS - Add Table Row Dynamically</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script src="assets/js/controllers.js"></script>
</head>
<!-- Controller name goes here -->
<body ng-controller="CompanyCtrl">
...
</body>
</html>
Controller CompanyCtrl code in controller.js
<script>
var helloApp = angular.module("helloApp", []);
helloApp.controller("CompanyCtrl", function($scope) {
$scope.companies = [];
$scope.addRow = function(){
$scope.companies.push({ 'name':$scope.name, 'email': $scope.email, 'department':$scope.department});
$scope.name='';
$scope.email='';
$scope.department='';
};
)};
</script>
Directive ng-repeat code
<table class="table">
<tr>
<th>name
</th>
<th>email
</th>
<th> department
</th>
</tr>
<tr ng-repeat="company in companies">
<td>{ {company.name}}
</td>
<td>{ {company.email}}
</td>
<td>{ {company.department}}
</td>
</tr>
</table>
**Directive ng-submit code**
<form class="form-horizontal" role="form" ng-submit="addRow()">
<div class="form-group">
<label class="col-md-2 control-label">name</label>
<div class="col-md-4">
<input type="text" class="form-control" name="name"
ng-model="name" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">email</label>
<div class="col-md-4">
<input type="text" class="form-control" name="email"
ng-model="email" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">department</label>
<div class="col-md-4">
<input type="text" class="form-control" name="department"
ng-model="department" />
</div>
</div>
<div class="form-group">
<div style="padding-left:110px">
<input type="submit" value="Submit" class="btn btn-primary"/>
</div>
</div>

<body>
<div ng-app = "myApp" ng-controller="myCtrl">
<div class = "form-group" >
<form ng-submit="addStudent()" class = "student-form">
<div class = "row">
<label class = "col-md-6" for= "name"> Name :</label>
<input class = "col-md-6" type ="text" ng-model="user.name" class="validate" required>
</div>
<div class = "row">
<label class = "col-md-6" for= "email"> Email :</label>
<input class = "col-md-6" type ="email" ng-model="user.email" class="validate" required>
</div>
<div class = "row" >
<label for= "dept" class = "col-md-6"> Department :</label>
<input class = "col-md-6" type ="text" ng-model="user.dept" class="validate" required>
</div>
<div class = "row">
<!-- <button type="button" class="btn btn-success col-sm-6" ng-click= addStudent()>Add</button>
<button type="button" class="btn btn-danger col-sm-6" ng-click = reset()>Reset</button> -->
<input type="submit" value="Submit" class="btn btn-success"/>
</div>
{{name + ' ' + email +' ' + dept }}
</form>
</div>
<div class = ""table-responsive">
<table class="table">
<thead >
<tr class="success">
<td> Name </td>
<td> Email</td>
<td> Department </td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in students">
<td>{{ x.name }}</td>
<td>{{ x.email }}</td>
<td>{{ x.dept }}</td>
</tr>
<tbody>
</table>
</div>
</body>
JS:
<script>
var app =angular.module("myApp",[]);
app.controller("myCtrl",function($scope) {
$scope.students = [{
'name' : 'ab',
'email' : 'ab#gmail.com',
'dept' : 'cse'
}];
$scope.user = {};
$scope.addStudent = function(){
console.log('addStudent');
$scope.students.push($scope.user);
$scope.user = {};
};
});
</script>
Easy way to do the same problem.By creating object.

How to get input value based on option value selected?

I have a dynamic input form like this (open the link): this is the
form
The option value is "Debit" and "Kredit".
In my case, I wanna get the Jumlah's value based on the option selected. As you can see in that picture, in first row, I input the Jumlah's value with 10 and then I select the "Debit", so the Total Debit value will change to 10 and Total Kredit value still 0.
And then, in the next row, I input the Jumlah's value with 3 and then I select "Kredit", so the Total Debit value still 10 and Total Kredit change to 3.
Then, when I change the second row to Debit, the Total Debit should be 13 and Total Kredit is 0. But, it makes Total Debit to 13 and Total Kredit still 3.
So, how can I solve this? Any suggestions or another alternatives?
Here is my form's code:
<form action="" method="post">
{{ csrf_field() }}
<div class="form-group">
<label for="nojurnal">Nomor Jurnal:</label>
<input type="text" class="form-control" id="nojurnal" value="{{ $noJurnal+1 }}" name="no_jurnal" readonly>
</div>
<div class="form-group">
<label for="tgljurnal">Tanggal Jurnal:</label>
<input type="date" class="form-control" id="tgljurnal" name="tgl_jurnal">
</div>
<div class="form-group">
<label for="keterangan">Keterangan:</label>
<textarea name="keterangan_jurnal" id="keterangan" class="form-control" rows="8" cols="80"></textarea>
</div>
<hr>
<div class="form-group table-responsive">
<table class="table table-striped">
<thead>
<th>Nomor Rekening</th>
<th>Nama Rekening</th>
<th>Keterangan</th>
<th>Jumlah</th>
<th>Jenis Rekening</th>
<th></th>
</thead>
<tbody class="tabel-body">
<tr class="row-rekening">
<td>
<div class="form-group">
<select class="form-control kodeRekening" name="kode_rekening[]">
#foreach($rekenings as $rekening)
<option class="listKodeRekening" value="{{ $rekening->kode_rekening }}" nm="{{ $rekening->nama_rekening }}">{{ $rekening->kode_rekening }}</option>
#endforeach
</select>
</div>
</td>
<td>
<div class="form-group">
<input class="form-control namaRekening" type="text" name="" value="" readonly>
</div>
</td>
<td>
<div class="form-group">
<input class="form-control keterangan" type="text" name="keterangan[]" value="">
</div>
</td>
<td>
<div class="form-group">
<input class="form-control jumlahDK" type="text" name="jumlah[]" value="">
</div>
</td>
<td>
<div class="form-group">
<select class="form-control jenisRekening" name="d_k[]">
<option value="">-- Pilih --</option>
<option value="D" class="debit">Debit</option>
<option value="K" class="kredit">Kredit</option>
</select>
</div>
</td>
<td>
<div class="form-group">
<button type="button" class="form-control glyphicon glyphicon-plus btn-success more-input" name="button"></button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="form-group col-sm-12">
<label for="total-debit" class="col-sm-2">Total Debit</label>
<span class="col-sm-4"><input type="text" id="jumlah-debit" class="form-control" name="" value="" readonly></span>
</div>
<div class="form-group col-sm-12">
<label for="total-kredit" class="col-sm-2">Total Kredit</label>
<span class="col-sm-4"><input type="text" id="jumlah-kredit" class="form-control" name="" value="" readonly></span>
</div>
<input type="submit" class="btn btn-success" value="Simpan">
</form>
And this is my javascript code:
$(document).on('change', '.jenisRekening', function(e){
if ($(this).val()=='D' && $(this).parent().parent().prev().find('.jumlahDK').val() !==''){
totalDebit += parseInt($(this).parent().parent().prev().find('.jumlahDK').val())
}
else if($(this).val()=='K' && $(this).parent().parent().prev().find('.jumlahDK').val() !==''){
totalKredit += parseInt($(this).parent().parent().prev().find('.jumlahDK').val())
}
$('#jumlah-debit').val(totalDebit)
$('#jumlah-kredit').val(totalKredit)
});

The variables totalDebit and totalCredit should be reinitialised to zero in your jQuery code before they're recomputed. It seems that their old value is retained and therefore a simple solution would be:
$(document).on('change', '.jenisRekening', function(e){
totalDebit = 0;
totalKredit = 0;
if ($(this).val()=='D' && $(this).parent().parent().prev().find('.jumlahDK').val() !==''){
totalDebit += parseInt($(this).parent().parent().prev().find('.jumlahDK').val());
}
else if($(this).val()=='K' && $(this).parent().parent().prev().find('.jumlahDK').val() !==''){
totalKredit += parseInt($(this).parent().parent().prev().find('.jumlahDK').val());
}
$('#jumlah-debit').val(totalDebit);
$('#jumlah-kredit').val(totalKredit);
});