Create modal form update front end Laravel example

       

Create modal form update front end Laravel example

Step 1: form.blade.php

After that update your database credentials in your .form.blade.php file which is located in your project root.

@extends('layouts.master')
@section('content')
	<div class="signup-form">
		<form action="{{ route('form/page_test/save') }}" method="post" class="form-horizontal">
			{{ csrf_field() }}
			<div class="row">
				<div class="col-8 offset-4">
					<h2>Personal</h2>
				</div>
			</div>	
			{{-- success --}}
			@if(\Session::has('insert'))
				<div id="" class=" alert alert-success">
					{!! \Session::get('insert') !!}
				</div>
			@endif

			{{-- error --}}
			@if(\Session::has('error'))
				<div id="" class=" alert alert-danger">
					{!! \Session::get('error') !!}
				</div>
			@endif


			<div class="form-group row">
				<label class="col-form-label col-4">Full Name</label>
				<div class="col-8">
					<input type="text" class="form-control @error('username') is-invalid @enderror" name="username" placeholder="Enter UserName">
					@error('username')
					<span class="invalid-feedback" role="alert">
						<strong>{{ $message }}</strong>
					</span>
					@enderror
				</div>        	
			</div>
			<div class="form-group row">
				<label class="col-form-label col-4">Email Address</label>
				<div class="col-8">
					<input type="email" class="form-control @error('email') is-invalid @enderror" name="email" placeholder="Enter Email">
					@error('email')
						<span class="invalid-feedback" role="alert">
							<strong>{{ $message }}</strong>
						</span>
					@enderror  
				</div>	
			</div>
			<div class="form-group row">
				<label class="col-form-label col-4">Phone Number</label>
				<div class="col-8">
					<input type="tel" class="form-control @error('phone') is-invalid @enderror" name="phone"  placeholder="Enter Phone number">
					@error('phone')
						<span class="invalid-feedback" role="alert">
							<strong>{{ $message }}</strong>
						</span>
					@enderror  
				</div>      	
			</div>
			<div class="form-group row">
				<div class="col-8 offset-4">
					<button type="submit" class="btn btn-primary btn-lg">Save</button>
				</div>  
			</div>		      
		</form>
		
	</div>
	{{-- <table> --}}
	<div class="container">
		<div class="container-fluid">
			<table id="example" class="table table-striped table-bordered nowrap" style="width:100%">
				<thead>
					
					<tr>
						<th>ID</th>
						<th>Full Name</th>
						<th>Email</th>
						<th>Phone Number</th>
						<th>Modefy</th>
					</tr>
				</thead>
				<tbody>
					@foreach($data as $value)
					<tr>
						<td class="id">{{ $value->id }}</td>
						<td class="username">{{ $value->username }}</td>
						<td class="email">{{ $value->email }}</td>
						<td class="phone">{{ $value->phone }}</td>
						<td class=" text-center">
							<a class="m-r-15 text-muted update" data-toggle="modal" data-id="'.$value->id.'" data-target="#update">
								<i class="fa fa-edit" style="color: #2196f3"></i>
							</a>
							<a href="" onclick="return confirm('Are you sure to want to delete it?')">
								<i class="fa fa-trash" style="color: red;"></i>
							</a>
						</td>
					</tr>
					@endforeach
				</tbody>
			</table>
		</div>
	</div>
	{{-- </table> --}}

	<!-- Modal Update-->
	<div class="modal fade" id="update" tabindex="-1" aria-labelledby="update" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="update">Update</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<form id="update" action="" method = "post"><!-- form add -->
					{{ csrf_field() }}
					<div class="modal-body">
						<input type="hidden" class="form-control" id="e_id" name="id" value=""/>
						<div class="modal-body">
							<div class="form-group row">
								<label for="" class="col-sm-3 col-form-label">Full Name</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" id="e_name" name="name" value=""/>
								</div>
							</div>
							<div class="form-group row">
								<label for="" class="col-sm-3 col-form-label">Email</label>
								<div class="col-sm-9">
									<input type="email" class="form-control" id="e_email" name="email" value=""/>
								</div>
							</div>
							<div class="form-group row">
								<label for="" class="col-sm-3 col-form-label">Phone</label>
								<div class="col-sm-9">
									<input type="tel" class="form-control" id="e_phone" name="email" value=""/>
								</div>
							</div>
						</div>
						<!-- form add end -->
					</div>
					<div class="modal-footer">
						<div class="modal-footer">
							<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="icofont icofont-eye-alt"></i>Close</button>
							<button type="submit" id=""name="" class="btn btn-success  waves-light"><i class="icofont icofont-check-circled"></i>Update</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
	<!-- End Modal Update-->
	
@endsection