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>
