Develop Reference

Laravel, javascript add rows table class select not working

I have this code which works fine. my problem is that when i go to add one or more rows in the table with the button
the select:
<select name = "product_id_product []" id = "product_id_product '. $ request-> count_product.'" class = "form-control js-select2" required>
it is as if it does not take the "js-select2" class
if instead I insert it manually in the index bypassing the whole class it works
I just can't figure out how to do it ..
index.blade:
<div class="card-body" style="text-align: center;">
<button type="button" name="aggiungi_prodotto" id="aggiungi_prodotto" class="btn btn-primary aggiungi_prodotto" style="visibility: visible;"><i class="mdi mdi-playlist-plus"></i>Aggiungi Prodotto</button>
<button type="button" name="aggiungi_accessorio" id="aggiungi_accessorio" class="btn btn-success aggiungi_accessorio" style="visibility: visible;"><i class="mdi mdi-playlist-plus"></i>Aggiungi Accessorio</button>
<button type="button" name="aggiungi_servizio" id="aggiungi_servizio" class="btn btn-warning aggiungi_servizio" style="visibility: visible;"><i class="mdi mdi-playlist-plus"></i>Aggiungi Servizio</button>
<button type="button" name="aggiungi_riga" id="aggiungi_riga" class="btn btn-danger aggiungi_riga" style="visibility: visible;"><i class="mdi mdi-playlist-plus"></i>Aggiungi Riga</button> <br/><br/><br/>
<div class="form-row">
<div class="table-responsive">
<table class="table table-hover ">
<thead>
<tr>
<th width="50%">Prodotto</th>
<th width="10%">Quantità</th>
<th width="10%">Acconto</th>
<th width="10%">Costo</th>
<th width="10%">Sconto TOT</th>
<th width="10%">Azioni</th>
</tr>
</thead>
<tbody id="prodottiRows">
</tbody>
</table>
</div>
</div>
<hr>
</div>
Javascript:
var count_prodotto = 0;
$(document).on('click', '#aggiungi_prodotto', function(){
count_prodotto = count_prodotto + 1;
var categorieID = document.getElementById('categorie_id').value;
var brandID = document.getElementById('brand_id').value;
var modelloID = document.getElementById('modello_id').value;
$.ajax({
type: 'POST',
url: "{{ route('autocomplete.fetch_prodotti') }}",
data: {
'_token': $('input[name=csrf-token]').val(),
'categorie_id':categorieID,
'brand_id':brandID,
'modello_id':modelloID,
'count_prodotto':count_prodotto
},
success:function(data){
$('#prodottiRows').append(data);
}
});
});
Controller:
public function fetch_prodotti(Request $request)
{
$products = Product::with('Multitenantable')
->where("stato_prodotto",'1')
->where("categorie_id",$request->categorie_id)
->where("brand_id",$request->brand_id)
->where("modello_id",$request->modello_id)
->pluck("nome_prodotto","id");
$prodotti = '
<tr id="row_prodotto'.$request->count_prodotto.'">
<td><select name="product_id_prodotto[]" id="product_id_prodotto'.$request->count_prodotto.'" class="form-control js-select2" required>
<option value="">Seleziona Prodotto</option>';
foreach ($products as $key => $product) {
$prodotti .= '<option value="'.$key.'">'.$product.'</option>';
# code...
}
$prodotti .='</select></td>
<td><input type="text" name="quantita_prodotto[]" id="quantita_prodotto'.$request->count_prodotto.'" class="form-control" value="0" required /></td>
<td><input type="text" name="acconto_prodotto[]" id="acconto_prodotto'.$request->count_prodotto.'" class="form-control" value="0" required /></td>
<td><input type="text" name="costo_prodotto[]" id="costo_prodotto'.$request->count_prodotto.'" class="form-control" value="0" required /></td>
<td><input type="text" name="sconto_prodotto[]" id="sconto_prodotto'.$request->count_prodotto.'" class="form-control" value="0" required /></td>
<td data-column="Rimuovi"><button type="button" name="remove_prodotto" id="'.$request->count_prodotto.'" class="btn btn-danger btn-xs remove_prodotto">Rimuovi</button></td>
</tr>';
return response()->json($prodotti);
}

Column cannot be null by using Auth

I'm inserting multiple data into the database. There is an error for my column report_by which is SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'report_by' cannot be null (SQL: insert into 'complaints' ('defect_id', 'image', 'description', 'report_by') values (1, C:\wamp64\tmp\php8E2E.tmp, leak, ?)) Inside column report_by should be the id of the user by using Auth. It's to tell that the complaint made by which users.
users table
id
role
email
typable_id
typable_type
complaints table
id
defect_id
image
description
report_by
ComplaintController.php
<?php
namespace App\Http\Controllers;
use Auth;
use App\Complaint;
use Illuminate\Http\Request;
class ComplaintController extends Controller
{
public function index()
{
return view('buyers.complaint');
}
public function create(Request $request)
{
if (count($request->defect_id) > 0) {
foreach($request->defect_id as $item=>$v) {
$data = array(
'defect_id' => $request->defect_id[$item],
'image' => $request->image[$item],
'description' => $request->description[$item],
'report_by' => $request->user_id,
);
Complaint::insert($data);
}
}
return redirect('/report-form')->with('success','Your report is submitted!');
}
}
complaint.blade.php
<div class="panel-heading">
<h3 class="panel-title"><strong>Make New Report</strong></h3>
</div>
<div class="panel-body">
<div>
<div class="panel">
<table class="table table-bordered">
<thead>
<tr>
<th><center>Type of Defect</center></th>
<th><center>Image</center></th>
<th><center>Description</center></th>
<th><center>Action</center></th>
</tr>
</thead>
<tbody>
<tr>
<td width="20%">
<form action="/report-create" method="post" enctype="multipart/form-data">
{{ csrf_field() }}
<input type="text" class="hidden" id="user_id" value="{{Auth::user()->id}}">
<select class="form-control" name="defect_id[]">
<option value="" selected>Choose Defect</option>
#foreach(App\Defect::all() as $defect)
<option value="{{$defect->id}}">{{$defect->name}}</option>
#endforeach
</form>
</td>
<td width="15%">
<input type="file" class="form-control-file" name="image[]">
</td>
<td width="45%">
<input type="text" class="form-control" name="description[]">
</td>
<td width="10%">
<button type="button" class="btn btn-info btn-sm" id="add-btn"><i class="glyphicon glyphicon-plus"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<center><button type="submit" class="btn btn-primary">Submit</button></center>
</div>
Here my javascript inside the blade
#section('footer')
<script>
$(document).ready(function () {
$('#add-btn').on('click',function () {
var html = '';
html += '<tr>';
html += ' <td><input type="text" class="hidden" id="user_id" value="{{Auth::user()->id}}"><select class="form-control" name="defect_id[]"><option value="" selected>Choose Defect</option>#foreach(App\Defect::all() as $defect)<option value="{{$defect->id}}">{{$defect->name}}</option>#endforeach</td>';
html += ' <td><input type="file" class="form-control-file" name="image[]"></td>';
html += ' <td><input type="text" class="form-control" name="description[]"></td>';
html += ' <td><button type="button" class="btn btn-danger btn-sm" id="remove-btn"><i class="glyphicon glyphicon-minus"></i></button></td>';
html += '</tr>';
$('tbody').append(html);
})
});
$(document).on('click','#remove-btn',function () {
$(this).closest('tr').remove();
});
</script>
#stop

How to make enter key as tab for input and submit if button found in angularjs?

I have a view where there are two buttons. one for save and another for update.: I want to use enter key as tab. If it reaches last input and find button, the form will be submitted (ng-click function will be triggered). Is it possible to do with two button or i should rely on only one button?
I tried:
$('#truckform input ,#truckform button').on("keypress", function(e) {
// ENTER PRESSED
if (e.keyCode == 13) {
console.log('tag')
// FOCUS ELEMENT
var inputs = $(this).parents("form").eq(0).find(":input");
var idx = inputs.index(this);
console.log(idx)
console.log(inputs.length)
if (idx == inputs.length - 1) {
inputs[0].select()
} else {
inputs[idx + 1].focus(); // handles submit buttons
inputs[idx + 1].select();
}
return false;
}
});
I gives the error in console when button gets focus:
Uncaught TypeError: inputs[(idx + 1)].select is not a function
at HTMLInputElement.<anonymous> (truckEntry.js:56)
at HTMLInputElement.dispatch (jquery-2.2.3.min.js:3)
at HTMLInputElement.r.handle (jquery-2.2.3.min.js:3)
But after the error, the saveData() function is triggered. But in the update mode, the updateData() is not triggered and the error remains all times till i press enter. How can i maake it functional? Any suggestion?
My view:
<form name="truckform" id="truckform" novalidate>
<table id="truckformTbl">
<tr>
<td class="text-center" colspan="6">
<h4 class="ok"> Truck Entry/Exit Form</h4>
</td>
</tr>
<tr ng-hide="hideManifestDetailsInput">
<th>Manifest No : </th>
<td>
<input type="text" ng-pattern='/^[0-9]{1,10}[/]{1}([0-9]{1,2}|[(A|a)]{1})$/' required="required" ng-disabled="disbleManifestNoInpForEditMode" ng-model="ManifestNo" name="ManifestNo" id="Manifest_no" class="form-control input-sm" placeholder="Manifest No.">
<span class="error" ng-show='truckform.ManifestNo.$error.pattern'>
Input like: 256/12 Or 256/A
</span>
<span class="error" ng-show="submitted && !ManifestNo && !truckform.ManifestNo.$error.pattern">
Manifest No is required
</span>
<span class="error" ng-show="truckExceedInManifest">Manifest is full</span>
</td>
<th> Manifest Date :</th>
<td>
<input type="text" ng-model="manifest_date" required="required" name="manifest_date" id="manifest_date" class="form-control datePicker input-sm" placeholder="Manifest date">
<span ng-show="submitted && !manifest_date" class="error">Select a date</span>
</td>
<th> Goods Name :</th>
<td style="width: 15em; vertical-align: top" rowspan="8">
{{-- <select class="form-control input-sm" name="goods_id" ng-model="goods_id"
ng-options="good.id as good.id +'-'+good.cargo_name group by good.category for good in allGoodsData ">
<option value="" selected="selected">Select Goods Name</option>
</select>
<span class="error" ng-show="truckform.goods_id.$dirty && truckform.goods_id.$touched && !goods_id ">
Select at least one goods
</span>--}}
<tags-input ng-model="goods_id"
display-property="cargo_name"
placeholder="Add New Item"
replace-spaces-with-dashes="false"
add-from-autocomplete-only="true"
on-tag-added="tagAdded($tag)"
on-tag-removed="tagRemoved($tag)">
<auto-complete source="loadGoods($query)"
min-length="0"
debounce-delay="0"
max-results-to-show="10">
</auto-complete>
</tags-input>
<span ng-show="submitted && !goods_id ||goods_id.length==0" class="error">Choose at least one goods!</span>
</td>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
<tr>
<th>Truck Type :</th>
<td>
<input type="text" ng-model="truck_type" name="truck_type" id="truck_type" class="form-control input-sm" value="{{old('truck_type')}}" placeholder="Truck Type">
<span class="error" ng-show="submitted && !truck_type">
Truck Type is required
</span>
</td>
<th> Truck No :</th>
<td>
<input type="number" min="1" required="required" ng-model="truck_no" name="truck_no" id="truckNo" class="form-control input-sm" placeholder="Truck No" value="{{old('truck_no')}}">
<span class="error" ng-show="submitted && !truck_no">
Truck No is required
</span>
</td>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
<tr>
<th>Driver Card No :</th>
<td>
<input type="number" ng-model="driver_card" name="DriverCardNo" id="DriverCardNo" class="form-control input-sm" placeholder="Driver Card No." value="{{old('DriverCardNo')}}">
<span class="error" ng-show="submitted && !driver_card">
Driver Card No. is required
</span>
</td>
<th> Weight Bridge:</th>
<td>
<label class="radio-inline">
<input type="radio" name="fff" ng-init="weightment_flag=1" ng-model="weightment_flag" ng-checked="true" value="1">Yes
</label>
<label class="radio-inline">
<input type="radio" ng-model="weightment_flag" value="0" >No
</label>
</td>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
<tr>
<th> Driver Name :</th>
<td style="width: 15em;">
<input type="text" ng-model="driver_name" name="DriverName" id="driverName" class="form-control input-sm" placeholder="Driver Name" value="{{old('DriverName')}}">
<span class="error" ng-show="submitted && !driver_name">
Driver Name is required
</span>
</td>
</tr>
<tr>
<td colspan="3"></td>
<td colspan="1" class="text-center">
<br>
<button type="button" ng-click="saveData(truckform)" ng-hide="updateBtn" class="btn btn-primary btn-block center-block">
<span class="fa fa-download"></span>
Save
</button>
<button type="button" ng-click="updateData(truckform)" ng-show="updateBtn" class="btn btn-primary center-block">
<span class="fa fa-download"></span>
Update
</button>
</td>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"></td>
<td class="text-center" colspan="3">
<div id="success" class="col-md-12 alert alert-success" ng-show="successMsg">
Successfully #{{ successMsgTxt }}!
</div>
<div id="error" class="col-md-12 alert alert-warning" ng-show="errorMsg">
#{{ errorMsgTxt }}!
</div>
</td>
<td colspan="1"> </td>
</tr>
</table>
</form>

Here you do not need to bind keypress events for input, by default in forms if you have buttons and if you hit enter, it will trigger the first button's click event,
if you have button's type as submit and if you hit enter when you are inside any of your input it will trigger form submit automatically. The example as like below.
I edited my original answer and now it acts as tab when you press enter key. Here is the working fiddle
<body class="container" ng-app="myApp">
<div ng-controller="myCtrl">
<form name="truckForm" ng-submit="submit(truckForm.$valid)" class="form-horizontal container" enter-to-tab>
<div class="form-group">
<label for="firstname">First Name</label>
<input type="text" name="firstname"/>
</div>
<div class="form-group">
<label for="lastname">Last Name</label>
<input type="text" name="lastname"/>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email"/>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password"/>
</div>
<div class="form-group">
<label for="confirm_password">Confirm Password</label>
<input type="confirm_password" name="confirm_password"/>
</div>
<button type="submit" class="btn btn-default">{{btnFlag}}</button>
</form>
</div>
</body>
and in your controller
angular.module('myApp', [])
.controller('myCtrl', myCtrl)
.directive('enterToTab', enterToTab);
myCtrl.$inject = ['$scope'];
function myCtrl($scope) {
$scope.updateBtn = true;
$scope.submit = submit;
function submit(valid) {
console.log('hi', valid);
if ($scope.updateBtn && valid) {
updateData(/* your params if any */);
} else if (valid) {
saveData(/* your params if any */);
}
}
function saveData(/* your params if any */) {
console.log('save');
// do your save action here
}
function updateData(/* your params if any */) {
console.log('update');
// do your update action here
}
}
function enterToTab() {
return {
restrict: 'A',
link: function(scope, attrs, element) {
var elm = angular.element(element.$$element[0]);
var inputs = angular.element('input', elm);
var length = inputs.length - 1;
var submit = angular.element('button[type=submit]', elm);
inputs.on('keydown', function(e) {
if (e.which === 13) {
e.preventDefault();
var index = inputs.index(this);
if (index === length && submit.length) {
submit.focus();
} else if(index === length) {
inputs[0].focus();
} else {
inputs[index + 1].focus();
}
}
})
}
};
}
Here type="submit" for button is important. And avoid any jquery like dom manipulations when you are developing an angularjs application, so I made it in angular way of doing this with directive. I have added enter-to-tab in form tag at HTML

You can use enter key as tab as follows:
$('input').bind("keypress", function(e) {
// ENTER PRESSED
if (e.which == 13) {
e.preventDefault();
$(this).next().focus();
}
}
});
Small plunker here

How can validation be done after using the clone function in JavaScript?

I used JavaScript to clone and add rows. How can separate validation be done for each row?
var i = 0;
function cloneRow() {
var row = document.getElementById("clone");
var table = document.getElementById("data");
var selectIndex = 1;
var clone = row.cloneNode(true);
table.appendChild(clone);
clone.setAttribute("style", "");
}
function deleteRow(btn) {
var result = confirm("Do you Want to delete this ?");
if (result) {
var row = btn.parentNode.parentNode;
row.parentNode.removeChild(row);
}
}
<div class="row">
<div class="col-sm-12">
<div class="col-sm-7"></div>
<div class="col-sm-2">
<button type="button"class="btn btn-primary default btn-xs" onclick="cloneRow()" >add more...</button>
</div>
</div>
</div><br><br>
<div class="row" id ="close">
<div class="col-sm-4"></div>
<div class='col-sm-4'>
<form id="NAME_VALUE" method="POST">
<table class="table-striped">
<tbody id="data">
<tr id ="clone" style="display:none;">
<td>
Name :<input type="text" name="INPUT_NAME" style="width:100px;" id="name" name="INPUT_NAME">
</td>
<td>
Value :<input type="text" name="INPUT_VALUE" style="width:100px;" id="value" name="INPUT_VALUE">
</td>
<td>
<button type="button"class="btn btn-primary default btn-xs" name ="delete" style="margin-left: 5px;" onclick="deleteRow(this); return false;">
<span class="glyphicon glyphicon-remove-circle" style="text-align:center" ></span>
</button>
</td>
</tr>
<tr>
<td>
Name :<input type="text" name="INPUT_NAME" style="width:100px;" id="name" name="INPUT_NAME">
</td>
<td>
Value :<input type="text" name="INPUT_VALUE" style="width:100px;" id="value" name="INPUT_VALUE">
</td>
<td>
<button type="button"class="btn btn-primary default btn-xs" name ="delete" style="margin-left: 5px;" onclick="deleteRow(this); return false;">
<span class="glyphicon glyphicon-remove-circle" style="text-align:center" ></span>
</button>
</td>
</tr>
</tbody>
</table><br>
<button type="button"class="btn btn-primary default btn-xs" style="margin-left: 5px;" onclick="submit_login(); return false;"> save.</button>
</form>
</div>
</div>
I'd like to create this type of validation for every row or <tr>.
When the add button is clicked a new input is dynamically added. However when the form is submitted only the first input field is validated. How can I validate the dynamically added inputs?

If you want to separate the validation for each row - you should create a row constructor.
Basically when you clone a new row - you clone the constructor with all its methods inside.
var Row = function () {
this.name = "";
this.value = "";
//add more properties
}
Create the methods:
Row.prototype.verify = function () {
return this.name !== `undefined` && this.value !== `undefined`;
}
In your clone function you just have to call it:
var rowInstance = new Row();
And you can use it like that:
if (rowInstance.verify()) {
//if the row information is valid then do something
}

Saving multiple rows with jQuery

I have a form with 2 fields with an add row button. When this button is clicked it simply clones the row and adds another row consisting of the 2 form fields. How do I save these newly added fields in my ajax post? Right now, it only ever saves the last row in my form.
<form action="." method="post">
<table class="table table-condensed" id="pa">
<thead>
<tr>
<th class="col-xs-2">Description</th>
<th class="col-xs-2">Expected %</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="form-group">
<input class="text-box single-line" data-val="true" data-val-required="The Description field is required." id="Description" name="Description" value="" type="text">
</div>
</td>
<td>
<div class="form-group">
<div class="input-group">
<input class="text-box single-line" data-val="true" data-val-number="The field Expected must be a number." id="Expected" name="Expected" value="100" type="number">
</div>
</div>
</td>
<td class="vert-align"> <a class="btn btn-danger btn-xs remove-row-pa">x</a>
</td>
</tr>
</tbody>
</table>
<div class="pull-right">
<p> <a href="#" id="add-pa-row" class="btn btn-success btn-xs">
<i class="fa fa-plus-circle"></i> Add row
</a>
</p>
</div>
<div class="form-group">
<p>
<input value="Save" class="btn btn-success" type="submit">
</p>
</div>
</form>
function Qs2Dict(qs) {
var pairs = qs.split('&');
var dict = {};
pairs.forEach(function (pair) {
var kv = pair.split('=');
dict[kv[0]] = decodeURIComponent(kv[1].replace(/\+/g, "%20"));
});
return dict;
}
// Add row
$("#add-row").click(function () {
$('#pa tbody>tr:last').clone(true).insertAfter('#pa tbody>tr:last');
$('#pa tbody>tr:last #Description').val('');
$('#pa tbody>tr:last #Expected').val('');
return false;
});
$('#modal').click(function (e) {
e.preventDefault();
var url = $(this).data('url');
var data = $('form').serialize();
var dict = Qs2Dict(data);
$.ajax({
type: "POST",
url: url,
data: {
"Description": dict.Description,
"EffectiveDate": dict.EffectiveDate,
"Expected": dict.Expected,
},
success: function (result) {},
});
});

Change their name attribute, since it defines/enumerates the fields to save.
If they are equal, which they are if you clone, only the last one is taken.
Or use arrays i.e. name="Expected[]"
EDIT: more specifically: I assume they get "lost" due to above reason during $('form').serialize();