I'm trying to submit data using a pop-pup form but my submit button just closes the windows instead of saving all the data into my data base.
Everything seems to be in order but I have the impression that the form cannot read the lines of code contained in my controller
Here my codes
<div class="modal" id="exampleModalLong" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><b>ADD A NEW CLIENT</b></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i data-feather="x"></i>
</button>
</div>
<div class="modal-body">
<form action="{{ route('finance.store') }}" method="post" enctype="multipart/form-data">
{{ csrf_field() }}
<label>Select an existing user from the database. </label>
<div class="row">
<div class="form-group col-xs-5">
<select id="Clients" class="choices form-select" title="Selectionner"
name="user_id">
<optgroup label="{{ count($Users) }} clients retrouvés">
<option value="" disabled selected>-- choisir --</option>
@foreach($Users as $User)
<option value="{{ $User->id }}">{{ $User->fullname }}</option>
@endforeach
</optgroup>
</select>
</div>
<label>Profession</label>
<div class="form-group">
<select class="choices form-select" title="Selectionner"
name="profession_id">
<option value="" disabled selected>-- choisir --</option>
@foreach($Professions as $Profession)
<option value="{{ $Profession->id }}">{{ $Profession->name }}</option>
@endforeach
</select>
</div>
<label>Phone</label>
<div class="form-group">
<input type="text" name="phone" placeholder="+243 " class="form-control">
</div>
<label>NID Type</label>
<div class="form-group">
<input type="text" name="nid_type" class="form-control">
</div>
<label>NID Photocopy</label>
<div class="row">
<div class="col-lg-2 col-xs-2">
<div class="form-group">
<img id="outputs" style="width:45px;background-color: whitesmoke;
border:1px solid #bbb;height:45px;border-radius: 2px" >
</div>
</div>
<div class="col-lg-10 col-xs-10">
<div class="form-group">
<div class="form-file">
<script type="text/javascript">
function previewImg(event) {
var outputs = document.getElementById('outputs');
outputs.src = URL.createObjectURL(event.target.files[0]);
}
</script>
<input type="file" name="nid_photocopie" accept=".png, .jpeg, .jpg"
class="form-control" id="clientImges"
onchange="return previewImg(event)">
</div>
</div>
</div>
</div>
<label>Profile Image</label>
<hr>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<img id="output" style="width:50px;height:50px;border-radius: 50px " >
</div>
</div>
<div class="col-md-10">
<div class="form-group">
<div class="form-file">
<script type="text/javascript">
function previewImage(event) {
var output = document.getElementById('output');
output.src = URL.createObjectURL(event.target.files[0]);
}
</script>
<input type="file" name="image" accept=".png, .jpeg, .jpg"
class="form-file-input" id="clientImgz"
onchange="return previewImage(event)">
<label class="form-file-label" for="clientImgz">
<span class="form-file-text">Choose image...</span>
<span class="form-file-button "><i data-feather="upload"></i></span>
</label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light-secondary" data-dismiss="modal">
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block">Close</span>
</button>
<button type="submit" class="btn btn-outline-secondary ml-1" >
<i class="bx bx-check d-block d-sm-none"></i>
<span class="d-none d-sm-block">Submit</span>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
HERE IS MY CONTROLLER
public function storeProfile(Request $request)
{
$this->validate($request, [
'user_id' => 'required',
'profession_id'=> 'required',
'nid_type'=> 'required',
'nid_photocopie'=> 'required',
]);
$slug = str_slug($request['fullname']);
$image = $request->file('image');
$image3 = $request->file('nid_photocopie');
//INSERTS PROFILE IMAGE
if (isset($image))
{
$image = $request->file('image');
$currentData = Carbon::now()->toDateString();
$fileToStore = $slug .'-'. $currentData .'-'. uniqid() .'.'. $image->getClientOriginalExtension();
if(!file_exists('uploads/MicroCredit/ClientImage'))
{
mkdir('uploads/ClientImage', 0777 , true);
}
$image->move('uploads/ClientImage',$fileToStore);
}
else {
$fileToStore = 'default.png';
}
//INSERT ID PHOTOCOPIE
if (isset($image3))
{
$image3 = $request->file('nid_photocopie');
$currentData = Carbon::now()->toDateString();
$IdToStore = $slug .'-'. $currentData .'-'. uniqid() .'.'. $image3->getClientOriginalExtension();
if(!file_exists('uploads/MicroCredit/IDs'))
{
mkdir('uploads/IDs', 0777 , true);
}
$image3->move('uploads/IDs',$IdToStore);
}
else {
$IdToStore = 'default.png';
}
$CredNew = new Client();
$CredNew->user_id = $request->user_id;
$CredNew->profession_id = $request->profession_id;
$CredNew->nid_type = $request->nid_type;
$CredNew->nid_photocopie = $IdToStore;
$CredNew->image = $fileToStore;
$CredNew->slug = $slug;
$CredNew->save();
return redirect(route('/bienvenue'));
}
HERE MY ROUTES
// ========= FINANCE - CLIENTS ======== //
Route::get('/finance/creditor', [FinanceController::class,'indexCreditor'])
->name('finance.creditor');
Route::post('/finance/store', [FinanceController::class,'store'])
->name('finance.store');
Route::post('/finance/{id}/update', [FinanceController::class,'update'])
->name('finance.update');
Route::delete('/finance/{id}/destroy', [FinanceController::class,'destroy'])
->name('finance.destroy');
HERE MY MODEL
public function storeProfile(Request $request)
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Client extends Model
{
use HasFactory;
protected $with = ['Userz'];
protected $fillable = [
'user_id',
'profession_id',
'nid_type',
'nid_photocopie',
'image',
'slug'
];
public function profesn()
{
return $this->belongsTo(Profession::class,'profession_id');
}
public function Userz()
{
return $this->belongsTo(User::class,'user_id');
}
public function getRouteKeyName()
{
return 'slug';
}
}
HERE'S MY MIGRATIONS
class CreateCreditorsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('clients', function (Blueprint $table) {
$table->id();
$table->integer('user_id');
$table->integer('profession_id');
$table->string('nid_type');
$table->string('nid_photocopie');
$table->string('image')->nullable();
$table->string('slug')->nullable();
$table->timestamps();
});
}
By using dd()
, I was able to see which input field was causing the popup modal not to submit the data. Thanks for everyone who reached out!
dd($CredNew);