Ajax Jquery Laravel form view save button dosen't work - javascript

After click button i've got error in console: app.js:16437 POST laravel.swt101.eu/dynamic-field/insert 500 (Internal Server Error)
On this link laravel.swt101.eu/dynamic-field/insert i've got
Symfony\Component\HttpKernel\Exception\MethodNotAllowedHttpException
The GET method is not supported for this route. Supported methods: POST.
I am making dynamic form when you can dynamicly add input fields using button and save the data to db, but have got one problem with this. When i write data in form and press save the button is blocking itself and cursor changes to prohibition sign on it.
This is model for it:
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class DynamicField extends Model
{
protected $fillable = [
'name', 'PKWIU', 'quantity', 'unit', 'netunit', 'nettotal', 'VATrate', 'grossunit', 'grosstotal'
];
}
This is controller:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\DynamicField;
use Validator;
class DynamicFieldController extends Controller
{
function index()
{
return view('proforms.create');
}
function insert(Request $request)
{
if($request->ajax())
{
$rules = array(
'name.*' => 'required',
'PKWIU.*' => 'required',
'quantity.*' => 'required',
'unit.*' => 'required',
'netunit.*' => 'required',
'nettotal.*' => 'required',
'VATrate.*' => 'required',
'grossunit.*' => 'required',
'grosstotal.*' => 'required',
);
$error = Validator::make($request->all(), $rules);
if($error->fails())
{
return response()->json([
'error' => $error->errors()->all()
]);
}
$name = $request->name;
$PKWIU = $request->PKWIU;
for($count = 0; $count < count($name); $count++)
{
$data = array(
'name' => $name[$count],
'PKWIU' => $PKWIU[$count],
'quantity' => $quantity[$count],
'unit' => $unit[$count],
'netunit' => $netunit[$count],
'nettotal' => $nettotal[$count],
'VATrate' => $VATrate[$count],
'grossunit' => $grossunit[$count],
'grosstotal' => $grosstotal[$count],
);
$insert_data[] = $data;
}
DynamicField::insert($insert_data);
return response()->json([
'success' => 'Data Added successfully.'
]);
}
}
}
This is migration:
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateDynamicField extends Migration
{
/**
* Run the migrations.
*
* #return void
*/
public function up()
{
Schema::create('dynamic_fields', function (Blueprint $table) {
$table->string('name')->nullable();
$table->string('PKWIU')->nullable();
$table->string('quantity')->nullable();
$table->string('unit')->nullable();
$table->string('netunit')->nullable();
$table->string('nettotal')->nullable();
$table->string('VATrate')->nullable();
$table->string('grossunit')->nullable();
$table->string('grosstotal')->nullable();
$table->timestamps();
$table->time('deleted_at')->nullable();
});
}
/**
* Reverse the migrations.
*
* #return void
*/
public function down()
{
Schema::dropIfExists('dynamic_fields');
}
}
This is routes for it:
Route::get('dynamic-field', 'DynamicFieldController#index');
Route::post('dynamic-field/insert', 'DynamicFieldController#insert')->name('dynamic-field.insert');
This is view with not working button and whitch not sending data from second form, this form at the bottom of the page.
Code for it is after a large gap at the bottom:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel 5.8 - DataTables Server Side Processing using Ajax</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div id="top" style="position: fixed; top: 0px; left: 20px;">
#extends('layouts.app')
#section('content')
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2>Dodaj nową proformę</h2>
</div>
<div class="pull-right">
<a class="btn btn-primary" href="{{ route('proforms.index') }}">Wstecz</a>
</div>
</div>
</div>
#if ($errors->any())
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.<br><br>
<ul>
#foreach ($errors->all() as $error)
<li>{{ $error }}</li>
#endforeach
</ul>
</div>
#endif
<form action="{{ route('proforms.store') }}" method="POST">
#csrf
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Data wystawienia:</strong>
<input type="text" name="proformdate" class="form-control" placeholder="Data wystawienia">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Kontrahent:</strong>
<br>
<select class="form-controll" name="user_id">
#foreach($users as $user)
<option value="{{$user->id}}">{{$user->showname}}</option>
#endforeach
</select>
<br>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Waluta:</strong>
<br>
<select class="form-controll" name="currency_id">
#foreach($currencys as $currency)
<option value="{{$currency->id}}">{{$currency->currency}}</option>
#endforeach
</select>
<br>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Forma płatności:</strong>
<br>
<select class="form-controll" name="form_id">
#foreach($forms as $form)
<option value="{{$form->id}}">{{$form->form}}</option>
#endforeach
</select>
<br>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Data sprzedaży:</strong>
<input type="text" name="selldate" class="form-control" placeholder="Kategoria">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Termin płatności:</strong>
<input type="text" name="paymentdate" class="form-control" placeholder="Termin płatności">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Forma płatności:</strong>
<input type="text" name="paymentmethod" class="form-control" placeholder="Forma płatności">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Miejsce wystawienia:</strong>
<input type="text" name="city" class="form-control" placeholder="Forma płatności">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Status:</strong>
<input type="text" name="status" class="form-control" placeholder="Status">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Uwagi:</strong>
<input type="text" name="comments" class="form-control" placeholder="Uwagi">
</div>
</div>
<div class="pull-left" style="margin: 35px;">
<h3>Pozycje faktury</h3>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Nazwa towaru lub usługi:</strong>
<input type="text" name="name" class="form-control" placeholder="Data wystawienia">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>PKWiU:</strong>
<input type="text" name="PKWIU" class="form-control" placeholder="Kontrahent">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Ilość:</strong>
<input type="text" name="quantity" class="form-control" placeholder="Kategoria">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Jednostka:</strong>
<input type="text" name="unit" class="form-control" placeholder="Termin płatności">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Cena netto jednostki:</strong>
<input type="text" name="netunit" class="form-control" placeholder="Forma płatności">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Netto razem:</strong>
<input type="text" name="nettotal" class="form-control" placeholder="Forma płatności">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Stawka VAT:</strong>
<input type="text" name="VATrate" class="form-control" placeholder="Status">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Brutto jednostka:</strong>
<input type="text" name="grossunit" class="form-control" placeholder="Uwagi">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Brutto razem:</strong>
<input type="text" name="grosstotal" class="form-control" placeholder="Uwagi">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<button type="submit" class="btn btn-primary">Zapisz</button>
</div>
</div>
</form>
<p class="text-center text-primary"><small>Artplus 2020</small></p>
</div>
<div class="table-responsive">
<form method="post" id="dynamic_form">
<span id="result"></span>
<table class="table table-bordered table-striped" id="user_table">
<thead>
<tr>
<th width="10%">Nazwa towaru lub usługi</th>
<th width="10%">PKWiU</th>
<th width="10%">Ilość</th>
<th width="10%">Jednostka</th>
<th width="10%">Cena netto</th>
<th width="10%">Netto razem</th>
<th width="10%">Stawka VAT</th>
<th width="10%">Brutto jednostka</th>
<th width="10%">Brutto razem</th>
<th width="10%">Action</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="2" align="right"> </td>
<td>
#csrf
<input type="submit" name="save" id="save" class="btn btn-primary" value="Save" />
</td>
</tr>
</tfoot>
</table>
</form>
#endsection
</div>
</body>
</html>
<script>
$(document).ready(function(){
var count = 1;
dynamic_field(count);
function dynamic_field(number)
{
html = '<tr>';
html += '<td><input type="text" name="name[]" class="form-control" /></td>';
html += '<td><input type="text" name="PKWIU[]" class="form-control" /></td>';
html += '<td><input type="text" name="quantity[]" class="form-control" /></td>';
html += '<td><input type="text" name="unit[]" class="form-control" /></td>';
html += '<td><input type="text" name="netunit[]" class="form-control" /></td>';
html += '<td><input type="text" name="nettotal[]" class="form-control" /></td>';
html += '<td><input type="text" name="VATrate[]" class="form-control" /></td>';
html += '<td><input type="text" name="grossunit[]" class="form-control" /></td>';
html += '<td><input type="text" name="grosstotal[]" class="form-control" /></td>';
if(number > 1)
{
html += '<td><button type="button" name="remove" id="" class="btn btn-danger remove">Remove</button></td></tr>';
$('tbody').append(html);
}
else
{
html += '<td><button type="button" name="add" id="add" class="btn btn-success">Add</button></td></tr>';
$('tbody').html(html);
}
}
$(document).on('click', '#add', function(){
count++;
dynamic_field(count);
});
$(document).on('click', '.remove', function(){
count--;
$(this).closest("tr").remove();
});
$('#dynamic_form').on('submit', function(event){
event.preventDefault();
$.ajax({
url:'{{ route("dynamic-field.insert") }}',
method:'post',
data:$(this).serialize(),
dataType:'json',
beforeSend:function(){
$('#save').attr('disabled','disabled');
},
success:function(data)
{
if(data.error)
{
var error_html = '';
for(var count = 0; count < data.error.length; count++)
{
error_html += '<p>'+data.error[count]+'</p>';
}
$('#result').html('<div class="alert alert-danger">'+error_html+'</div>');
}
else
{
dynamic_field(1);
$('#result').html('<div class="alert alert-success">'+data.success+'</div>');
}
$('#save').attr('disabled', false);
}
})
});
});
</script>

I forgot to define variables in controller. After that changes button works.
$name = $request->name;
$PKWIU = $request->PKWIU;
$quantity = $request->quantity;
$unit = $request->unit;
$netunit = $request->netunit;
$nettotal = $request->nettotal;
$VATrate = $request->VATrate;
$grossunit = $request->grossunit;
$grosstotal = $request->grosstotal;

Related

How to have no validation when selecting a value on dropdown

On this form to create a link when I select another committee type the form validates for all of the blank fields that are required. I am trying to figure out a way so those fields don't validate when I select another committee type in the dropdown. Currently when I debug it doesn't get to the post action method in the controller for obvious reasons that the form validates before even getting into the controller.
If you need to see more code like the action method in controller or view model I can provide that as well.
View
<div class="form-group col-md-8">
<div asp-validation-summary="All" id="validation-error" class="text-danger custom-validation-
summary"></div>
</div>
<input id="link-id" asp-for="#Model.LinkId" type="hidden" />
<input name="FetchCategories" type="hidden"/>
<div class="form-group col-md-8 col-lg-4">
<div class="form-group">
#{
var authorizedCommitteeTypes = await Model.CommitteeType
.ToSelectListAsync(AuthorizationService, User, AuthRequirements.AdminCommitteeType);
if (authorizedCommitteeTypes.Count == 1)
{
<input id="committeeType" name="committeeType" type="hidden"
value="#authorizedCommitteeTypes.FirstOrDefault()?.Value" />
}
else
{
<label class="control-label">Committee Type</label>
<select id="add-edit-committee-type"
name="committeeType"
asp-for="#Model.CommitteeType"
asp-items="#authorizedCommitteeTypes"
class="form-control">
</select>
}
}
</div>
</div>
<div class="form-group col-md-8 col-lg-4">
<label class="control-label">Category</label>
#{
if (Model != null && Model.AvailableCategories != null)
{
var availableCategories =
new SelectList(
Model.AvailableCategories.OrderBy(c => c.Order),
dataValueField: "CategoryId",
dataTextField: "Title",
selectedValue: Model.CategoryId);
<select id="dropdown-linkCategories" required
asp-for="#Model.CategoryId"
asp-items="#availableCategories"
class="form-control">
<option>-- Select --</option>
</select>
}
else
{
<select id="dropdown-linkCategories"
class="form-control">
<option>-- Select --</option>
</select>
}
}
</div>
<div class="form-group col-md-8 col-lg-4">
<label class="control-label">Title</label>
<input id="title" asp-for="Title" name="Title" class="form-control" />
</div>
<div class="form-group col-md-8 col-lg-4">
<label class="control-label">Display Order</label>
<div>
<input id="order" asp-for="Order" name="Order" class="form-control" />
</div>
</div>
<div class="form-group col-md-8 col-lg-4">
<label class="control-label">URL</label>
<input id="url" asp-for="URL" name="URL" class="form-control" />
</div>
<div class="form-group col-md-8 col-lg-12">
<label class="control-label">Description</label>
<textarea class="rtextDescription" name="Description" id="Description" row="1" cols="60"
data-val-maxlength-max="200" asp-for="Description"
data-val-maxlength="Max length for Description is 200"></textarea>
</div>
#{
if (Model.LinkId == 0)
{
<div class="form-group col-md-12">
<input type="submit" id="link-submit"
class="btn btn-forum col-sm-12 col-md-2 col-lg-2"
value="Add" />
<a asp-area="Admin"
asp-controller="Link"
asp-action="Index"
class="btn btn-forum col-sm-12 col-md-2 col-lg-2">Back to Links</a>
</div>
}
else
{
<div class="form-group col-md-8 col-lg-12">
<input type="submit" value="Save" id="edit-submit"
class="btn btn-forum col-sm-12 col-md-2 col-lg-2" />
<a asp-area="Admin"
asp-controller="Link"
asp-action="Index"
class="btn btn-forum col-sm-12 col-md-2 col-lg-2">Back to Links</a>
</div>
}
}
JS
$(document).on("change", "#form-create-link #add-edit-committee-type", function () {
$('input[name="FetchCategories"]').val(true);
$(this).closest('form').submit()
});

Search filter in angular js

I am trying to implement the search filter for the following application using angularjs. But it's not working as intended. I am new to this so I am not sure what I've done wrong here. Can someone help?
Here is my code so far:-
index.html file :
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="Controller/app.js"></script>
<script src="Controller/storage.js"></script>
</head>
<body ng-app="kfgPm">
<div ng-controller="MainCtrl" class="container">
<form name="kfgPmForm" ng-submit="submitForm(kfgPmForm.$valid)" novalidate>
<div class="col-sm-12" class="form-horizontal" role="form">
<div class="form-group col-sm-6">
<label for="projectID" class="col-sm-3 col-form-label">Project ID: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="projectID" required ng-model="itm.projectID">
</div>
</div>
<div class="form-group col-sm-6">
<label for="projectName" class="col-sm-3 col-form-label">Project Name: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="projectName" required ng-model="itm.projectName">
</div>
</div>
</div>
<div class="col-sm-12" class="form-horizontal" role="form">
<div class="form-group col-sm-6">
<label for="projectOwner" class="col-sm-3 col-form-label">Project Owner: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="projectOwner" required ng-model="itm.projectOwner">
</div>
</div>
<div class="form-group col-sm-6">
<label for="keyStake" class="col-sm-3 col-form-label">Key Stakeholders: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="keyStake" required ng-model="itm.keyStake">
</div>
</div>
</div>
<div class="col-sm-12" class="form-horizontal" role="form">
<div class="form-group col-sm-6">
<label for="prepBy" class="col-sm-3 col-form-label">Prepared By: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="prepBy" required ng-model="itm.prepBy">
</div>
</div>
<div class="form-group col-sm-6">
<label for="reqDate" class="col-sm-3 col-form-label">Requested Date: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="reqDate" required ng-model="itm.reqDate">
</div>
</div>
</div>
<div class="col-sm-12" class="form-group" ng-submit="submitDetails()" role="form">
<div class="form-group col-sm-6" class="input-group mb-3">
<label for="inputGroupSelect01" class="col-sm-3 col-form-label">Status: </label>
<div class="col-sm-9">
<select name="status" class="form-control custom-select" ng-options="user.option for user in arrlist" required ng-model="user.itm.status">
<option value="">Select..</option>
</select>
</select>
</div>
</div>
<div class="form-group col-sm-6">
<label for="dept" class="col-sm-3 col-form-label">Department: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="dept" required ng-model="itm.dept">
</div>
</div>
</div>
<div class="col-sm-12" class="form-group purple-border">
<div class="col-sm-2">
<label for="projSummary">Project Summary: </label>
</div>
<div class="col-sm-10">
<textarea class="form-control" id="projSummary" required ng-model="itm.projSummary" rows="3"></textarea>
</div>
</div>
</form>
<div class="form-row text-center">
<div class="col-12">
<button ng-disabled="kfgPmForm.$invalid" ng-click="update(itm)" class="btn btn-info">SUBMIT</button>
<div><br></div>
</form>
<div><br></div>
<div class="col-sm-12" class="form-horizontal">
<label for="search" class="col-sm-3 col-form-label">Search: </label>
<div class="col-sm-6">
<input ng-model="searchText" class="form-control" ng-keyup="filterFunc()">
<div><br></div>
</div>
</div>
<div class="results">
<table class="table table-bordered table-responsive-md table-striped text-center">
<thead class="thead-light">
<tr>
<th>Project ID</th>
<th>Project Name</th>
<th>Project Owner</th>
<th>Key Stakeholders</th>
<th>Prepared By</th>
<th>Requested Date</th>
<th>Status</th>
<th>Department</th>
<th>Project Summary</th>
<th>ACTIONS</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="itm in master | filter: itm.search">
<td><span ng-hide="editMode">{{itm.projectID}}</span>
<input type="text" ng-show="editMode" ng-model="itm.projectID" />
</td>
<td><span ng-hide="editMode">{{itm.projectName}}</span>
<input type="text" ng-show="editMode" ng-model="itm.projectName" />
</td>
<td><span ng-hide="editMode">{{itm.projectOwner}}</span>
<input type="text" ng-show="editMode" ng-model="itm.projectOwner" />
</td>
<td><span ng-hide="editMode">{{itm.keyStake}}</span>
<input type="text" ng-show="editMode" ng-model="itm.keyStake" />
</td>
<td><span ng-hide="editMode">{{itm.prepBy}}</span>
<input type="text" ng-show="editMode" ng-model="itm.prepBy" />
</td>
<td><span ng-hide="editMode">{{itm.reqDate}}</span>
<input type="text" ng-show="editMode" ng-model="itm.reqDate" />
</td>
<td><span ng-hide="editMode">{{itm.status.option}}</span>
<input type="text" ng-show="editMode" ng-model="itm.status" />
</td>
<td><span ng-hide="editMode">{{itm.dept}}</span>
<input type="text" ng-show="editMode" ng-model="itm.dept" />
</td>
<td><span ng-hide="editMode">{{itm.projSummary}}</span>
<input type="text" ng-show="editMode" ng-model="itm.projSummary" />
</td>
<td>
<button ng-click="EditProject(itm)" class="btn btn-primary">Edit</button>
<button ng-hide="editMode" ng-click="removeItem($index)" class="btn btn-danger">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
</div>
</body>
</html>
This is my app.js file:
var isHtml5Compatible = document.createElement('canvas').getContext != undefined;
if (isHtml5Compatible) {
initiateLocalStorage();
}
function initiateLocalStorage() {
var app = angular.module('kfgPm', ['storageService']);
app.controller('MainCtrl', ['$scope', 'getLocalStorage', function($scope, getLocalStorage) {
$scope.EditProject = EditProject;
$scope.master = getLocalStorage.getData();
$scope.master = [];
$scope.update = function() {
var IsNew = true; //if the data entered in the field is new
angular.forEach($scope.master, function(LItem, key) {
if (LItem.projectID == $scope.itm.projectID) { //if the new project ID equals old project ID
IsNew = false; //data entered is to be edited
LItem.projectID = $scope.itm.projectID;
LItem.projectName = $scope.itm.projectName;
LItem.projectOwner = $scope.itm.projectOwner;
LItem.keyStake = $scope.itm.keyStake;
LItem.prepBy = $scope.itm.prepBy;
LItem.reqDate = $scope.itm.reqDate;
LItem.status = $scope.itm.status;
LItem.dept = $scope.itm.dept;
LItem.projSummary = $scope.itm.projSummary;
}
});
if (IsNew) { //if new data
$scope.master.push({ //add to the fields
'projectID': $scope.itm.projectID,
'projectName': $scope.itm.projectName,
'projectOwner': $scope.itm.projectOwner,
'keyStake': $scope.itm.keyStake,
'prepBy': $scope.itm.prepBy,
'reqDate': $scope.itm.reqDate,
'status': $scope.itm.status,
'dept': $scope.itm.dept,
'projSummary': $scope.itm.projSummary,
});
}
getLocalStorage.update($scope.master);
$scope.itm.projectID = '';
$scope.itm.projectName = '';
$scope.itm.projectOwner = '';
$scope.itm.keyStake = '';
$scope.itm.prepBy = '';
$scope.itm.reqDate = '';
$scope.itm.status = '';
$scope.itm.dept = '';
$scope.itm.projSummary = '';
},
$scope.removeItem = function(index) {
console.log(index);
$scope.master.splice(index, 1)
getLocalStorage.update($scope.master);
},
$scope.editItem = function(index) {
getLocalStorage.update($scope.master);
$scope.editing = $scope.master.indexOf(index);
}
function EditProject(pItem) { //if edit is clicked the data is replaced in respective fields
$scope.itm.projectID = pItem.projectID;
$scope.itm.projectName = pItem.projectName;
$scope.itm.projectOwner = pItem.projectOwner;
$scope.itm.keyStake = pItem.keyStake;
$scope.itm.prepBy = pItem.prepBy;
$scope.itm.reqDate = pItem.reqDate;
$scope.itm.status = pItem.status;
$scope.itm.dept = pItem.dept;
$scope.itm.projSummary = pItem.projSummary;
console.log(pItem);
}
$scope.arrlist = [{
"id": 1,
"option": "One"
}, {
"id": 2,
"option": "Two"
}];
$scope.userselected = $scope.arrlist[1];
$scope.LItem = angular.copy($scope.update);
$scope.filterFunc = function() {
$scope.LItem = $filter('filter')($scope.update, { $: $scope.searchText });
}
$scope.submitForm = function(isValid) {
if (isValid) {
alert('Submitted Successfully');
}
};
}]);
}
I am trying to implement the search for all columns such that when I type something in the search text field, it should return only the row with those searched terms and the rest of the rows would be hidden in the table.
To start, I see the following problems:
<body ng-app="kfgPm">
<div ng-controller="MainCtrl" class="container">
<form name="kfgPmForm" ng-submit="submitForm(kfgPmForm.$valid)" novalidate>
<!-- duplicate class attribute -->
<div class="col-sm-12" class="form-horizontal" role="form">
<!-- end tag seen too early -->
</div>
</div>
Duplicate class attribute -- the second one will be ignored
End tag seen too early - the scope of the controller will be limited
These two errors alone will cause the app to fail.
Also angular.js and bootstrap.js do not play well together. They do not co-ordinate their manipulation of the DOM.

How to delete div and all element inside div? Javascript, html, css

I have a function that clears the entire div and it disappears but still appears in the inspect (html). This is a real problem because we have this input type field on the email and I got this empty data in email. I only want when this value is not chosen to completely remove me from html and inspect. Look at my code and try to catch the error. The most important things in the whole code that you need to pay attention are onchange="checkSelected()" in html and first script tag which manipulate with that. It should simply become a display none but it still stands there.
<div class="modal fade" id="montageModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content" style="display: flex;">
<div class="modal-body">
<form id="schedule_form" class="clearfix" action="index.php?route=api/reifenmontage" method="post">
<div class="container-fluid">
<div class="step_1" >
<h3 class="modal-title">Reifenmontage Termin buchen </h3>
<div class="row termin_row">
<div class="col-xs-12 col-sm-4">
<div class="row">
<label>Pneu-Typ</label>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="row">
<select onchange="checkSelected()" class="form-control" name="pneu" id="pneu">
<option value="Motorrad">Motorrad</option>
<option value="Auto">Auto</option>
</select>
</div>
</div>
</div>
<div id="additionalRow" class="row termin_row" >
<div id="reifenmontage-input" class="row termin_row">
<div class="col-xs-12 col-sm-4">
<div class="row">
<label>Mark und model</label>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="row">
<select name="marka" class="form-control" id="button-getdata">
</select>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="row">
<select name="model" class="form-control" id="result" >
</select>
</div>
</div>
</div>
</div>
<div class="row termin_row">
<div class="col-sm-4 col-xs-12">
<div class="row"><label>2. Terminvorschlag</label></div>
</div>
<div class="col-sm-4 col-xs-6">
<div class="row">
<div class="input-group date" id="date-2" data-termin="1">
<input type='text' class="form-control" name="date[1]" />
<span class="input-group-addon">um</span>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-6">
<div class="row">
<div class="input-group time" id="time-2" data-termin="1">
<input type='text' class="form-control" name="time[1]" />
<span class="input-group-addon">Uhr</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="checkbox">
<label>
<input type="checkbox" name="accept" id="accept"> Ich akzeptiere die Teilnahmebedingungen
</label>
</div>
</div>
<div class="row text-center">
<button type="button" class="btn btn-primary btn-lg btn-submit" id="next_step" disabled="disabled">Anfrage senden</button>
</div>
</div>
<div class="step_2">
<h3 class="modal-title">Your contact info</h3>
<div class="">
<div class="form-group clearfix">
<input type="text" name="name" value="<?= $user['name'] ?>" placeholder="Name and Lastname" class="form-control name text" required />
</div>
<div class="form-group clearfix">
<input type="text" name="phone" value="<?= $user['phone'] ?>" placeholder="Phone" class="form-control phone text" required />
</div>
<div class="form-group clearfix">
<input type="email" name="email" value="<?= $user['email'] ?>" placeholder="Email" class="form-control email text" required />
</div>
<div class="text-center">
<button type="submit" id="submit" class="btn btn-default btn-lg btn-submit" >Suchen</button>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">SCHLIESSEN</button>
</div>
</div>
</div>
</div>
and my script tag
<script type="text/javascript">
let selectItem = document.getElementById('pneu');
let additionalRow = document.getElementById('additionalRow');
function checkSelected() {
if (selectItem.selectedIndex == "1") {
additionalRow.style.display = 'none';
} else {
additionalRow.style.display = 'block';
}
}
</script>
<script type="text/javascript">
$('#button-getdata').on('change', function() {
$.ajax({
url: 'index.php?route=api/reifenmontage/get_marka_data',
type: 'post',
data: $('#reifenmontage-input select'),
dataType: 'json',
beforeSend: function() {
},
success: function(json) {
if (json['success']) {
$("#result").empty();
for (i in json['success']) {
var element = json['success'][i];
var o = new Option(element['model'], element['model']);
$("#result").append(o);
html = "\t<option value=\""+ element['model'] + "\">" + element['model'] + "</option>\n";
$("#result").append(o);
}
// document.getElementById("schedule_form").reset();
}
}
});
});
</script>
<script type="text/javascript">
$.ajax({
url: 'index.php?route=api/reifenmontage/mark',
context: document.body,
success: function(data) {
const selectControl = $('#button-getdata');
selectControl.html(data.map(ExtractData).join(''));
}
});
function ExtractData(item) {
return ` <option value="${item.value}">${item.label}</option>`;
}
</script>
Try variant with detaching/attaching DOM elements
<script type="text/javascript">
let selectItem = document.getElementById('pneu');
//let additionalRow = document.getElementById('additionalRow');
let detached = '';
function checkSelected() {
if (selectItem.selectedIndex == "1") {
detached = $('#reifenmontage-input').detach();
} else {
detached.appendTo('#additionalRow');
}
}
</script>

how to add one or more clone in jquery

I am new in jquery and im using laravel framework. I want to add courses after filling first course by user.
When user click on add more course button.it will create new clone make sure that add more course button will be removed from first course and set to second course and same apply for newly created course and add more button should removed from second course and set to third course . i have hrml code.
enter code here
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="row">
<div class="heading">
<h4>Courses Offred <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="display:none">×</button></h4>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Course Title</span>
<input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Fees</span>
<input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Web Link</span>
<input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Course Detail</span>
<textarea class="form-control txtfield m-tb-10 txtarea" rows="5" placeholder="Add Your Course Detail"></textarea>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Course Type</span>
<input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Course Duration</span>
<input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Location</span>
<input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Entry Requirement</span>
<input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Certificates</span>
<textarea class="form-control txtfield m-tb-10 txtarea" rows="5" placeholder="Add Your Certificates"></textarea>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<div class="add-more-class ">
<div class="btn-save">
<button class="btn btn-info">Add More Course</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
In heading tag there is close button.and it should visible in second course and make validation user can't add more than five course. Can anyone help me. Thanks in advance :)
I think this is the script that you wanted:
Updated script:
var courseCtr = 1;
console.log('course counter: ' + courseCtr);
$(document).on('click', 'button.btn', function() {
if (courseCtr === 5) {
return false;
}
var $row = $(this).closest('div.heading').parent();
var $parent = $row.parent();
var $clone = $row.clone();
if ($clone.find('.heading .close').length === 1) {
$clone.find('.heading .close').remove();
}
$clone.find('.heading h4').after('<button class="close">X</button>')
$clone.find(':input').val('');
$clone.find('textarea').val('');
$row.find('.heading div').last().remove();
// $clone.find('.heading h4').remove();
$parent.append($clone);
courseCtr++;
console.log('course counter: ' + courseCtr);
})
$(document).on('click', '.close', function(){
var $buttonClone = $(this).parent().find('div').last().clone();
$(this).parents('.row').prev().find('div.heading').append($buttonClone);
$(this).parents('.row').remove();
courseCtr--;
console.log('course counter: ' + courseCtr);
})
UPDATED FIDDLE: SEE FIDDLE HERE
I think you need to clean up your html markup a little bit and your work and code will be more easy and understable.
1-seperate Add More Course button from form-content.
2-give proper class to form container.
3-write a simple code and done.
Modified HTML CODE
<div class="col-md-12 col-sm-12 col-xs-12 forms-container">
<div class="row single-form">
<div class="heading">
<h4>Courses Offred</h4>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Course Title</span>
<input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Fees</span>
<input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Web Link</span>
<input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Course Detail</span>
<textarea class="form-control txtfield m-tb-10 txtarea" rows="5" placeholder="Add Your Course Detail"></textarea>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Course Type</span>
<input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Course Duration</span>
<input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Location</span>
<input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Entry Requirement</span>
<input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="property-type">
<span class="property-class">Certificates</span>
<textarea class="form-control txtfield m-tb-10 txtarea" rows="5" placeholder="Add Your Certificates"></textarea>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="alert alert-danger" style="display:none">
Please fill all the fields.
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<div class="add-more-class text-center ">
<button class="btn btn-info add-more-course">Add More Course</button>
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<div class="add-more-class ">
<button class="btn btn-info pull-right save-and-continue">Save and continue</button>
</div>
</div>
</div>
</div>
JAVASCRIPT CODE
var count = 0;
$('.add-more-course').click(function() {
if (count < 4) {
/* clone single .single-form container */
var $new_form = $(this).parents('.forms-container').find('.single-form').first().clone(true);
/* clear form data if any field is filled */
$new_form.find('input,textarea').val("");
/* remove heading text and enable close button */
$new_form
.find('.heading h4')
.text("")
.append('<button type="button" class="close">X</button>')
.end()
.find('.alert').css('display','none');
/* append it before add more course button */
$(this).parents('.forms-container').find('.single-form').last().after($new_form)
count++;
}
});
$('.forms-container').on('click', '.single-form .close', function() {
$(this).parents('.single-form').remove();
count--;
});
$('.forms-container').on('click', '.save-and-continue', function(){
var $form_container = $(this).parents('.forms-container'),
is_error = false;
$form_container.find('.single-form').each(function(ind, form){
var $form = $(form);
$form.find('input,textarea').each(function(ind,ele){
if($(ele).val() === "" || $(ele).val() === undefined){
$form.find('.alert').css('display','block');
is_error = true;
return false;
}
});
});
if(!is_error) {
// write ajax call or anything else what you want on success
}
});
I hope it will help you.
you can get help from below code,
jQuery(document).delegate('a.add-record', 'click', function(e) {
e.preventDefault();
var content = jQuery('#sample_table tr'),
size = jQuery('#tbl_posts >tbody >tr').length + 1,
element = null,
element = content.clone();
element.attr('id', 'rec-'+size);
element.find('.delete-record').attr('data-id', size);
element.appendTo('#tbl_posts_body');
element.find('.sn').html(size);
});
on click of add more button you need to create clone of first form of parent div and append with container.
Dynamically Add and Remove rows/html form in a Table Using jquery

How create list of companys who has childs company on angular?

How I can add child company, edit and delete company of my list.(and localStorage)
I have some code for delete but they didn't work
I don't have any ideas how it must lock like
Thank's for help
if (!localStorage.getItem("companys")) {
localStorage.setItem("companys", JSON.stringify([]));
};
(function() {
var app = angular.module('myApp', []);
app.controller('ListController', function($scope){
this.retrieveCompanys = function() {
return JSON.parse(localStorage.getItem('companys'));
}
this.addToStorage = function(company){
this.companys.push(company);
localStorage.setItem('companys', JSON.stringify(this.companys));
}
this.companys= this.retrieveCompanys();
this.removeCompany = function (item) {
var index= this.companys.indexOf(item);
this.companys.splice(index,1);
}
$scope.add = false;
$scope.togglechild = function() {
$scope.add = !$scope.add;
};
$scope.edit = false;
$scope.toggleedit = function() {
$scope.edit = !$scope.edit;
};
====Delete company======
$scope.removeCompany = function(company) {
var index = $scope.companys.indexOf(company);
$scope.companys.splice(index,1);
}
});
======Child Company========
app.controller('AddController', function(){
this.company = { child: [] };
this.addCompany = function(list) {
list.addToStorage(this.company);
this.company = {child: [] };
};
});
app.controller('ChildController', function(){
this.child = {};
this.addChild = function(company) {
company.childs.push(this.company);
this.child = {}
}
});
})();
HTML PART OF CODE
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="app.css">
</head>
<body class="container" ng-controller="ListController as list">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4" ng-controller = "AddController as addCtrl">
<form name="addCompanyForm" ng-submit="addCtrl.addCompany(list)" novalidate>
<h3 class="text-center">Add new company</h3>
<fieldset class="form-group">
<input class="form-control" ng-model="addCtrl.company.name_company" placeholder="Name Company" title="Name Company" ng-required>
</fieldset>
<fieldset class="form-group">
<div class="input-group">
<div class="input-group-addon">$</div>
<input class="form-control" ng-model="addCtrl.company.annual_earnings" placeholder="Annual earnings" title="Annual earnings" ng-required>
</div>
</fieldset>
<br>
<fieldset class="form-group">
<input type="submit" class="btn btn-primary pull-right" ng-click="addCompany(list)" value="Add Company">
</fieldset>
</form>
<form ng-show="add">
<h3 class="text-center">Add child company</h3>
<fieldset class="form-group">
<input class="form-control" ng-model="addCtrl.company.name_company" placeholder="Name Company" title="Name Company" ng-required>
</fieldset>
<fieldset class="form-group">
<div class="input-group">
<div class="input-group-addon">$</div>
<input class="form-control" ng-model="addCtrl.company.annual_earnings" placeholder="Annual earnings" title="Annual earnings" ng-required>
</div>
</fieldset>
<br>
<fieldset class="form-group">
<input type="submit" class="btn btn-primary pull-right" ng-click="addCompany(list)" value="Add Company">
</fieldset>
</form>
<form ng-show="edit">
<h3 class="text-center">Edit data company</h3>
<fieldset class="form-group">
<input class="form-control" ng-model="addCtrl.company.name_company" placeholder="Name Company" title="Name Company" ng-required>
</fieldset>
<fieldset class="form-group">
<div class="input-group">
<div class="input-group-addon">$</div>
<input class="form-control" ng-model="addCtrl.company.annual_earnings" placeholder="Annual earnings" title="Annual earnings" ng-required>
</div>
</fieldset>
<br>
<fieldset class="form-group">
<input type="submit" class="btn btn-primary pull-right" ng-click="addCompany(list)" value="Edit Data">
</fieldset>
</form>
</div>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8" >
<h3 class="text-center">List of Company</h3>
<table class="table">
<!--=========Table Head==============-->
<tr>
<th class="col-xs-6 col-sm-6 col-md-6 col-lg-6">Name Company</th>
<th class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-center">Own earnings</th>
<th class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-center">Total earnings</th>
<th class="col-xs-1 col-sm-2 col-md-2 col-lg-2 text-center">Edit/Delete</th>
</tr>
<!--===================MAIN COMPANY=====================-->
<tr ng-repeat="company in list.companys track by $index">
<td class="col-xs-6 col-sm-6 col-md-6 col-lg-5 text-center">
List
<b>{{company.name_company}}</b>
</td>
<td class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-center">
{{company.annual_earnings + "$"}}
</td>
<td class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-center">
</td>
<td class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-center">
<a ng-click="toggleedit()" title="Edit Data">Edit</a> | 
<a ng-click="removeCompany(company)" title="Delete"><b>x</b></a> | 
<a ng-click="togglechild()" title="Add Child Company"><b>+</b></a>
</td>
<tr id="{{'demo'+$index}}" class="collapse">
<td>{{}}</td>
<td>{{}}</td>
<td>{{}}</td>
<td>{{}}</td>
</tr>
</tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
Your company model should have properties Id,parent_company_Id,company_name, anual_earning.
So parent_company_Id property of parent company will be null. and child companies will have value for parent_company_Id. you can give a drop down on creating child company to select the parent.

Categories