i created one view.blade.php page. There in table added column action, inside that given to button, Delete and View/Edit. When i click on View/Edit button one form page should come as pop up box. For that how can i write javascript. I am a beginner in laravel. So can any one please help me out?
My view.blade page is given is given below
userAdmin.blade.php
#extends('app')
#section('content')
<div class="templatemo-content-wrapper" xmlns="http://www.w3.org/1999/html">
<ol class="breadcrumb">
<li><font color="green">Home</font></li>
<li class="active">user information</li>
</ol>
<div class="templatemo-content">
<h1>View/Edit user information</h1>
<div>
<div>
<div>
<table id="example" class="table table-striped table-hover table-bordered" bgcolor="#fff8dc">
<h3>Select User :</h3>
<thead>
<tr>
<th>User ID</th>
<th>User Desc</th>
<th>Contact Name</th>
<th>Contact Email</th>
<th>Time Zone</th>
<th>Active</th>
<th>Last Login (GMT+05:30)</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{{--{{ UserController::getIndex() }}--}}
#foreach($name as $nam)
<tr>
<td>{{ $nam->userID }}</td>
<td>{{ $nam->description }}</td>
<td>{{ $nam->contactName }}</td>
<td>{{ $nam->contactPhone }}</td>
<td>{{ $nam->timeZone }}</td>
<td>
#if($nam->isActive == '1')
Yes
#else
No
#endif
</td>
<td>{{ date('Y/m/d H:i:s',($nam->lastLoginTime)) }}</td>
<td>
{{--#if ( in_array($nam->isActive, array('Yes','No')) )--}}
<div class="btn-group">
<button type="button" class="btn btn-info">Action</button>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
{{--#if ($nam->isActive == 'Yes')--}}
<li data-toggle="modal" data-target="#acceptModal" data-bookingid="{{ $nam->userID }}">View/ Edit
</li>
{{--#endif--}}
<li>Delete</li>
</ul>
</div>
{{--#endif--}}
</td>
</tr>
#endforeach
</tbody>
</table>
{{$name->links()}}
</div>
</div>
</div>
</div>
</div>
</br>
<script type="text/javascript">
$(document).ready(function() {
$('#example').dataTable();
} );
</script>
#endsection
and the form page i need to pop up is
#extends('app')
#section('content')
<div class="templatemo-content-wrapper">
<div class="container">
<ol class="breadcrumb">
<li><font color="green">Home</font></li>
<li class="active">View/Edit User</li>
</ol>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-success">
<div class="panel-heading">View/Edit User Information</div>
<div class="panel-body">
#if (count($errors) > 0)
<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 class="form-horizontal" role="form" method="POST" action="{{ url('accountAdmin') }}">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="form-group">
<label class="col-md-4 control-label">User ID</label>
<div class="col-md-6">
<input type="text" class="form-control" name="userID" value="{{ old('userID')}}" placeholder="Enter User ID">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Active</label>
<div class="col-md-6">
<select class="form-control" value="{{ old('isActive') }}" name="isActive" >
<option value="1">Yes</option>
<option value="0">No</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">User Description</label>
<div class="col-md-6">
<input type="text" class="form-control" name="description" value="{{ old('description') }}" placeholder="Enter the description">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Contact Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="contactName" value="{{ old('contactName') }}" placeholder="Enter Contact Name">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Contact Phone</label>
<div class="col-md-6">
<input type="text" class="form-control" name="contactPhone" value="{{ old('contactPhone') }}" placeholder="Enter Mobile Number">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Contact Email</label>
<div class="col-md-6">
<input type="email" class="form-control" name="contactEmail" value="{{ old('contactEmail') }}" placeholder="Enter E-Mail Address">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Notify Email</label>
<div class="col-md-6">
<input type="email" class="form-control" name="notifyEmail" value="{{ old('notifyEmail') }}" placeholder="Enter E-Mail Address">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Time Zone</label>
<div class="col-md-6">
<select class="form-control" value="{{ old('timeZone') }}" name="timeZone" >
<option value="0">GMT+05:30</option>
<option value="Inactive">xyz</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Authorized Group</label>
<div class="col-md-6">
<select class="form-control" value="{{ old('distanceUnits') }}" name="distanceUnits" >
<option value="0">all</option>
<option value="1">Km</option>
<option value="2">Nm</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">First Login page</label>
<div class="col-md-6">
<select class="form-control" value="{{ old('firstLoginPageID') }}" name="firstLoginPageID" >
<option value="0">Main Menu</option>
<option value="1">Liter</option>
<option value="2">IG</option>
<option value="3">ft^3</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Maximum Access Level</label>
<div class="col-md-6">
<select class="form-control" value="{{ old('maxAccessLevel') }}" name="maxAccessLevel" >
<option value="3">New/Delete</option>
<option value="1">Read/View</option>
<option value="2">Write/Edit</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<button type="submit" class="btn btn-warning">
Save
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
#endsection
userController page is
class UserController extends Controller
{
public $type = 'User';
public function getIndex()
{
$name = DB::table('user')->simplePaginate(10);
return view('user.userAdmin')->with('name', $name);
}
public function getData()
{
$name = DB::table('user');
return view('user.add')->with('name', $name);
}
public function userInsert()
{
$postUser = Input::all();
//insert data into mysql table
$data = array('userID'=> $postUser['userID']
);
// echo print_r($data);
$ck = 0;
$ck = DB::table('user')->Insert($data);
//echo "Record Added Successfully!";
$name = DB::table('user')->simplePaginate(10);
return view('user.userAdmin')->with('name', $name);
}
public function delete($id)
{
DB::table('user')->where('userID', '=', $id)->delete();
return redirect('userAdmin');
}
}
routes.php is
Route::any('userAdmin', 'UserController#getIndex');
Route::any('user/add', 'UserController#getData');
Route::any('user/delete/{id}', 'UserController#delete');
Route::post('userAdmin', 'UserController#userInsert');
Anyone please tell me how to write js code for that
Related
I have a form wizard and I am trying to dynamically add select tags and I have added a click-to-add button to generate the HTML code snippet. However, the css styles and select-2 don't apply to the code generated by the js click event and the attached event to the dynamic code also doesn't fire when clicked.
I have tried rearranging the js files but can't figure out why it still doesn't work.
In my below laravel code snippet, I have placed the js implementation directly below jquery cos it was implemented using jquery but it still doesn't work.
#section('scripts')
<!-- BEGIN: Vendor JS-->
<script src="{{ asset('backend/app-assets/vendors/js/vendors.min.js') }}"></script>
<script>
$(document).ready(function() {
var maxWeek = 53;
var i = 2;
$('#btn-add-week').click(function () {
var weekData = '<div>\
<div class="row">\
<div class="d-flex justify-content-between">\
<h4 class="mb-0">Week '+i+'</h4>\
<button type="button" class="btn btn-outline-danger btn-remove-week"><i data-feather="minus"></i></button>\
</div>\
<div class="mb-1 col-md-12">\
<label class="form-label" for="day-1">Day 1</label>\
<select class="select2 form-select" id="week-'+i+'-day-1-id" name="week_'+i+'_day_1_id[]" multiple>\
<option>Select Exercises</option>\
#foreach ($exercises as $exercise)\
<option value="{{ $exercise->id }}">{{ $exercise->title }}</option>\
#endforeach\
</select>\
</div>\
</div>\
<div class="row">\
<div class="mb-1 col-md-6">\
<label class="form-label" for="day-2">Day 2</label>\
<select class="select2 form-select" id="week-'+i+'-day-2-id" name="day_2_id[]" multiple>\
<option>Select Exercises</option>\
#foreach ($exercises as $exercise)\
<option value="{{ $exercise->id }}">{{ $exercise->title }}</option>\
#endforeach\
</select>\
</div>\
<div class="mb-1 col-md-6">\
<label class="form-label" for="day-3">Day 3</label>\
<select class="select2 form-select" id="week-'+i+'-day-3-id" name="day_3_id[]" multiple>\
<option>Select Exercises</option>\
#foreach ($exercises as $exercise)\
<option value="{{ $exercise->id }}">{{ $exercise->title }}</option>\
#endforeach\
</select>\
</div>\
<div class="mb-1 col-md-6">\
<label class="form-label" for="day-4">Day 4</label>\
<select class="select2 form-select" id="week-'+i+'-day-4-id" name="day_4_id[]" multiple>\
<option>Select Exercises</option>\
#foreach ($exercises as $exercise)\
<option value="{{ $exercise->id }}">{{ $exercise->title }}</option>\
#endforeach\
</select>\
</div>\
<div class="mb-1 col-md-6">\
<label class="form-label" for="day-5">Day 5</label>\
<select class="select2 form-select" id="week-'+i+'-day-5-id" name="day_5_id[]" multiple>\
<option>Select Exercises</option>\
#foreach ($exercises as $exercise)\
<option value="{{ $exercise->id }}">{{ $exercise->title }}</option>\
#endforeach\
</select>\
</div>\
<div class="mb-1 col-md-6">\
<label class="form-label" for="day-6">Day 6</label>\
<select class="select2 form-select" id="week-'+i+'-day-6-id" name="day_6_id[]" multiple>\
<option>Select Exercises</option>\
#foreach ($exercises as $exercise)\
<option value="{{ $exercise->id }}">{{ $exercise->title }}</option>\
#endforeach\
</select>\
</div>\
<div class="mb-1 col-md-6">\
<label class="form-label" for="day-7">Day 7</label>\
<select class="select2 form-select" id="week-'+i+'-day-7-id" name="day_7_id[]" multiple>\
<option>Select Exercises</option>\
#foreach ($exercises as $exercise)\
<option value="{{ $exercise->id }}">{{ $exercise->title }}</option>\
#endforeach\
</select>\
</div>\
<hr class="text-primary">\
</div>\
</div>';
if(i <= maxWeek) {
i++;
$("#week-data").append(weekData);
}
});
$('.btn-remove-week').click(function (e) {
e.preventDefault();
$(this).parent('div').remove();
i--;
});
});
</script>
<!-- BEGIN Vendor JS-->
<!-- BEGIN: Page Vendor JS-->
<script src="{{ asset('backend/app-assets/vendors/js/forms/wizard/bs-stepper.min.js') }}"></script>
<script src="{{ asset('backend/app-assets/vendors/js/forms/select/select2.full.min.js') }}"></script>
<script src="{{ asset('backend/app-assets/vendors/js/forms/validation/jquery.validate.min.js') }}"></script>
<!-- END: Page Vendor JS-->
<!-- BEGIN: Theme JS-->
<script src="{{ asset('backend/app-assets/js/core/app-menu.min.js') }}"></script>
<script src="{{ asset('backend/app-assets/js/core/app.min.js') }}"></script>
<script src="{{ asset('backend/app-assets/js/scripts/customizer.min.js') }}"></script>
<!-- END: Theme JS-->
<!-- BEGIN: Page JS-->
<script src="{{ asset('backend/app-assets/js/scripts/forms/form-wizard.min.js') }}"></script>
<script src="{{ asset('backend/app-assets/vendors/js/ckeditor/ckeditor.js') }}"></script>
<!-- END: Page JS-->
<script>
CKEDITOR.replace( 'description' );
$(window).on('load', function () {
if (feather) {
feather.replace({
width: 14,
height: 14
});
}
})
</script>
#endsection
#section('content')
<!-- BEGIN: Content-->
<div class="app-content content ">
<div class="content-overlay"></div>
<div class="header-navbar-shadow"></div>
<div class="content-wrapper container-xxl p-0">
<div class="content-header row">
<div class="content-header-left col-md-9 col-12 mb-2">
<div class="row breadcrumbs-top">
<div class="col-12">
<h2 class="content-header-title float-start mb-0">Workout Wizard</h2>
<div class="breadcrumb-wrapper">
<ol class="breadcrumb">
<li class="breadcrumb-item">
Home
</li>
<li class="breadcrumb-item">
Workouts
</li>
<li class="breadcrumb-item active">
Create Workout
</li>
</ol>
</div>
</div>
</div>
</div>
</div>
<div class="content-body">
<!-- Horizontal Wizard -->
<section class="horizontal-wizard">
<div class="bs-stepper horizontal-wizard-example">
<div class="bs-stepper-header" role="tablist">
<div class="step" data-target="#account-details" role="tab" id="account-details-trigger">
<button type="button" class="step-trigger">
<span class="bs-stepper-box">1</span>
<span class="bs-stepper-label">
<span class="bs-stepper-title">Basic Details</span>
<span class="bs-stepper-subtitle">Basic workout info</span>
</span>
</button>
</div>
<div class="line">
<i data-feather="chevron-right" class="font-medium-2"></i>
</div>
<div class="step" data-target="#personal-info" role="tab" id="personal-info-trigger">
<button type="button" class="step-trigger">
<span class="bs-stepper-box">2</span>
<span class="bs-stepper-label">
<span class="bs-stepper-title">Workout Details</span>
<span class="bs-stepper-subtitle">Workout schedule details</span>
</span>
</button>
</div>
<div class="line">
<i data-feather="chevron-right" class="font-medium-2"></i>
</div>
<div class="step" data-target="#address-step" role="tab" id="address-step-trigger">
<button type="button" class="step-trigger">
<span class="bs-stepper-box">3</span>
<span class="bs-stepper-label">
<span class="bs-stepper-title">Address</span>
<span class="bs-stepper-subtitle">Add Address</span>
</span>
</button>
</div>
<div class="line">
<i data-feather="chevron-right" class="font-medium-2"></i>
</div>
<div class="step" data-target="#social-links" role="tab" id="social-links-trigger">
<button type="button" class="step-trigger">
<span class="bs-stepper-box">4</span>
<span class="bs-stepper-label">
<span class="bs-stepper-title">Social Links</span>
<span class="bs-stepper-subtitle">Add Social Links</span>
</span>
</button>
</div>
</div>
<div class="bs-stepper-content">
<div id="account-details" class="content" role="tabpanel"
aria-labelledby="account-details-trigger">
<div class="content-header">
<h5 class="mb-0">Basic Details</h5>
<small class="text-muted">Enter basic workout details</small>
</div>
<form>
<div class="row">
<div class="mb-1 col-md-12">
<label class="form-label" for="title">Title</label>
<input type="text" name="title" id="title" class="form-control" placeholder="Jumping Jack Pro Max" />
</div>
</div>
<div class="row">
<div class="mb-1 col-md-12">
<label class="form-label" for="description">Description</label>
<textarea class="form-control" rows="3" id="description" name="description" placeholder="Enter Workout Description"></textarea>
</div>
</div>
<div class="row">
<div class="mb-1 col-md-6">
<label class="form-label" for="goal">Goal</label>
<select class="select2 form-select" id="goal-id" name="goal_id">
<option>Select Goal</option>
#foreach ($goals as $goal)
<option value="{{ $goal->id }}">{{ ucfirst($goal->title) }}</option>
#endforeach
</select>
</div>
<div class="mb-1 col-md-6">
<label class="form-label" for="level">Level</label>
<select class="select2 form-select" id="level-id" name="level_id">
<option>Select Level</option>
#foreach ($levels as $level)
<option value="{{ $level->id }}">{{ ucfirst($level->title) }}</option>
#endforeach
</select>
</div>
</div>
<div class="row">
<div class="mb-1 col-md-6">
<label class="form-label" for="bodyparts">Bodyparts</label>
<select class="select2 form-select" id="bodypart-id" name="bodypart_id[]" multiple>
<option disabled>Select Body Part</option>
#foreach ($bodyparts as $bodypart)
<option value="{{ $bodypart->id }}">{{ ucfirst($bodypart->title) }}</option>
#endforeach
</select>
</div>
<div class="mb-1 col-md-6">
<label class="form-label" for="equipment">Equipments</label>
<select class="select2 form-select" id="equipment-id" name="equipment_id[]"multiple>
<option disabled>Select Equipment</option>
#foreach ($equipments as $equipment)
<option value="{{ $equipment->id }}">{{ ucfirst($equipment->title) }}</option>
#endforeach
</select>
</div>
</div>
</form>
<div class="d-flex justify-content-between">
<button class="btn btn-outline-secondary btn-prev" disabled>
<i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next">
<span class="align-middle d-sm-inline-block d-none">Next</span>
<i data-feather="arrow-right" class="align-middle ms-sm-25 ms-0"></i>
</button>
</div>
</div>
<div id="personal-info" class="content" role="tabpanel" aria-labelledby="personal-info-trigger">
<div class="content-header">
<h5 class="mb-0">Workout Details</h5>
<small>Workout schedule details</small>
</div>
<form>
<div id="week-data">
<div class="row">
<div class="d-flex justify-content-between">
<h4 class="mb-0">Week 1</h4>
<button type="button" class="btn btn-outline-primary" id="btn-add-week"><i data-feather="plus"></i></button>
</div>
<div class="mb-1 col-md-12">
<label class="form-label" for="day-1">Day 1</label>
<select class="select2 form-select" id="week-1-day-1-id" name="day_1_id[]" multiple>
<option>Select Exercises</option>
#foreach ($exercises as $exercise)
<option value="{{ $exercise->id }}">{{ $exercise->title }}</option>
#endforeach
</select>
</div>
</div>
<div class="row">
<div class="mb-1 col-md-6">
<label class="form-label" for="day-2">Day 2</label>
<select class="select2 form-select" id="week-1-day-2-id" name="day_2_id[]" multiple>
<option>Select Exercises</option>
#foreach ($exercises as $exercise)
<option value="{{ $exercise->id }}">{{ $exercise->title }}</option>
#endforeach
</select>
</div>
<div class="mb-1 col-md-6">
<label class="form-label" for="day-3">Day 3</label>
<select class="select2 form-select" id="week-1-day-3-id" name="day_3_id[]" multiple>
<option>Select Exercises</option>
#foreach ($exercises as $exercise)
<option value="{{ $exercise->id }}">{{ $exercise->title }}</option>
#endforeach
</select>
</div>
<div class="mb-1 col-md-6">
<label class="form-label" for="day-4">Day 4</label>
<select class="select2 form-select" id="week-1-day-4-id" name="day_4_id[]" multiple>
<option>Select Exercises</option>
#foreach ($exercises as $exercise)
<option value="{{ $exercise->id }}">{{ $exercise->title }}</option>
#endforeach
</select>
</div>
<div class="mb-1 col-md-6">
<label class="form-label" for="day-5">Day 5</label>
<select class="select2 form-select" id="week-1-day-5-id" name="day_5_id[]" multiple>
<option>Select Exercises</option>
#foreach ($exercises as $exercise)
<option value="{{ $exercise->id }}">{{ $exercise->title }}</option>
#endforeach
</select>
</div>
<div class="mb-1 col-md-6">
<label class="form-label" for="day-6">Day 6</label>
<select class="select2 form-select" id="week-1-day-6-id" name="day_6_id[]" multiple>
<option>Select Exercises</option>
#foreach ($exercises as $exercise)
<option value="{{ $exercise->id }}">{{ $exercise->title }}</option>
#endforeach
</select>
</div>
<div class="mb-1 col-md-6">
<label class="form-label" for="day-7">Day 7</label>
<select class="select2 form-select" id="week-1-day-7-id" name="day_7_id[]" multiple>
<option>Select Exercises</option>
#foreach ($exercises as $exercise)
<option value="{{ $exercise->id }}">{{ $exercise->title }}</option>
#endforeach
</select>
</div>
<hr class="text-primary">
</div>
</div>
</form>
<div class="d-flex justify-content-between">
<button class="btn btn-primary btn-prev">
<i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next">
<span class="align-middle d-sm-inline-block d-none">Next</span>
<i data-feather="arrow-right" class="align-middle ms-sm-25 ms-0"></i>
</button>
</div>
</div>
<div id="address-step" class="content" role="tabpanel" aria-labelledby="address-step-trigger">
<div class="content-header">
<h5 class="mb-0">Address</h5>
<small>Enter Your Address.</small>
</div>
<form>
<div class="row">
<div class="mb-1 col-md-6">
<label class="form-label" for="address">Address</label>
<input type="text" id="address" name="address" class="form-control"
placeholder="98 Borough bridge Road, Birmingham" />
</div>
<div class="mb-1 col-md-6">
<label class="form-label" for="landmark">Landmark</label>
<input type="text" name="landmark" id="landmark" class="form-control"
placeholder="Borough bridge" />
</div>
</div>
<div class="row">
<div class="mb-1 col-md-6">
<label class="form-label" for="pincode1">Pincode</label>
<input type="text" id="pincode1" class="form-control" placeholder="658921" />
</div>
<div class="mb-1 col-md-6">
<label class="form-label" for="city1">City</label>
<input type="text" id="city1" class="form-control" placeholder="Birmingham" />
</div>
</div>
</form>
<div class="d-flex justify-content-between">
<button class="btn btn-primary btn-prev">
<i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next">
<span class="align-middle d-sm-inline-block d-none">Next</span>
<i data-feather="arrow-right" class="align-middle ms-sm-25 ms-0"></i>
</button>
</div>
</div>
<div id="social-links" class="content" role="tabpanel" aria-labelledby="social-links-trigger">
<div class="content-header">
<h5 class="mb-0">Social Links</h5>
<small>Enter Your Social Links.</small>
</div>
<form>
<div class="row">
<div class="mb-1 col-md-6">
<label class="form-label" for="twitter">Twitter</label>
<input type="text" id="twitter" name="twitter" class="form-control"
placeholder="https://twitter.com/abc" />
</div>
<div class="mb-1 col-md-6">
<label class="form-label" for="facebook">Facebook</label>
<input type="text" id="facebook" name="facebook" class="form-control"
placeholder="https://facebook.com/abc" />
</div>
</div>
<div class="row">
<div class="mb-1 col-md-6">
<label class="form-label" for="google">Google+</label>
<input type="text" id="google" name="google" class="form-control"
placeholder="https://plus.google.com/abc" />
</div>
<div class="mb-1 col-md-6">
<label class="form-label" for="linkedin">Linkedin</label>
<input type="text" id="linkedin" name="linkedin" class="form-control"
placeholder="https://linkedin.com/abc" />
</div>
</div>
</form>
<div class="d-flex justify-content-between">
<button class="btn btn-primary btn-prev">
<i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-success btn-submit">Submit</button>
</div>
</div>
</div>
</div>
</section>
<!-- /Horizontal Wizard -->
</div>
</div>
</div>
<!-- END: Content-->
#endsection
Change this line
$('#btn-add-week').click(function () {
to this
$(document).on('click', '#btn-add-week', function () {
This is my liveire component for handling logic. I am unable to move to the next step as the next button is not showing or is hidden. I tried using switch statement but to no avail.
I can't seem to figure our where the error is plus i am new to livewire.
Any help is greatly appreciated.
Thank You
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use Livewire\WithFileUploads;
class CpdApplicationForm extends Component
{
use WithFileUploads;
// Forms Components Go Here
public int $totalSteps = 5;
public int $currentStep = 1;
public function mount()
{
$this->currentStep = 1;
}
public function render()
{
return view('livewire.cpd-application-form');
}
public function increaseStep()
{
// $this->resetErrorBag();
$this->validateData();
$this->currentStep++;
if ($this->currentStep > $this->totalSteps) {
$this->currentStep = $this->totalSteps;
}
}
public function decreaseStep()
{
$this->resetErrorBag();
$this->currentStep--;
if ($this->currentStep < 1) {
$this->currentStep = 1;
}
}
}
This is the livewire blade component.
<form wire:submit.prevent="register">
#if ($currentStep == 1)
#endif
#if ($currentStep == 2)
<div class="step-two">
<div class="panel-section-card py-20 px-25 mt-20">
<div class="card-header bg-secondary text-white">STEP 2/5 - Personal Details</div>
<div class="card-body">
<div class="row">
<div class="col-12 ">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="">Full Name</label>
<input type="text" class="form-control" placeholder="Name Of Personnel "
wire:model="full_name" required>
<span class="text-danger">#error('full_name'){{ $message }}#enderror</span>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Phone</label>
<input type="text" class="form-control" placeholder="Phone Number"
wire:model="phone">
<span class="text-danger">#error('phone'){{ $message }}#enderror</span>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Email</label>
<input type="text" class="form-control"
placeholder="Your Organization Issued Email Address"
wire:model="email">
<span class="text-danger">#error('email'){{ $message }}#enderror</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="">Service Type</label>
<select class="form-control" wire:model="service_type" required>
<option value="" selected>Select Service Type</option>
<option value="United States">Accreditation Only</option>
<option value="India">Accreditation & Venue</option>
<option value="Rwanda">Accreditation, Venue & Facilitation</option>
</select>
<span class="text-danger">#error('country'){{ $message }}#enderror</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">MSSI Liaison</label>
<select class="form-control" wire:model="liaison">
<option value="" selected>Select Your Point Of Contact At MSSI</option>
<option value="United States">Miss Victoria Koomson</option>
<option value="India">Mr. Emmanuel Addo Charwetey</option>
<option value="Rwanda"></option>
<option value="Nigeria">Nigeria</option>
<option value="Phillipines">Phillipines</option>
<option value="Canada">Canada</option>
<option value="Bangladesh">Bangladesh</option>
</select>
<span class="text-danger">#error('country'){{ $message }}#enderror</span>
</div>
</div>
{{-- <div class="col-md-6">--}}
{{-- <div class="form-group">--}}
{{-- <label for="">City</label>--}}
{{-- <input type="text" class="form-control" placeholder="Enter city" wire:model="city">--}}
{{-- <span class="text-danger">#error('city'){{ $message }}#enderror</span>--}}
{{-- </div>--}}
{{-- </div>--}}
</div>
</div>
</div>
</div>
</div>
</div>
#endif
#if ($currentStep == 3)
<div class="step-three">
<div class="panel-section-card py-20 px-25 mt-20">
<div class="card-header bg-secondary text-white">STEP 3/5 - Education | Training</div>
<div class="card-body">
<div class="row">
<div class="col-12 ">
<div class="row">
<div class="col-md-12">
<div class="form-group mt-15">
<label class="input-label"> Please enter your learning objectives for this
course (a maximum of five and a
minimum
3) <br><b>- Should reflect measurable outcomes of the topic.</b></br>
</label>
<textarea id="summernote" name="description"
class="form-control #error('description') is-invalid #enderror"
placeholder="{{ trans('forms.webinar_description_placeholder') }}">{!! !empty($webinar) ? $webinar->description : old('description') !!}</textarea>
#error('description')
<div class="invalid-feedback">
{{ $message }}
</div>
#enderror
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="card-body">20.
<b>Target audience (Professional roles)</b>.
<div class="frameworks d-flex flex-column align-items-left mt-2">
<label for="yes">
<input type="checkbox" id="Yes" value="" wire:model="frameworks">
Consultants
</label>
<label for="no">
<input type="checkbox" id="No" value="" wire:model="frameworks">
Training Grades
</label>
<label for="not-available">
<input type="checkbox" id="N/A" value="" wire:model="frameworks"> Other
</label>
</div>
<span class="text-danger">#error('frameworks'){{ $message }}#enderror</span>
</div>
</div>
<div class="col-md-4">
<div class="card-body">20.
<b>Teaching Methods</b>.
<div class="frameworks d-flex flex-column align-items-left mt-2">
<label for="yes">
<input type="checkbox" id="Yes" value="" wire:model="frameworks"> Lectures
</label>
<label for="no">
<input type="checkbox" id="No" value="" wire:model="frameworks">
Discussion Group
</label>
<label for="not-available">
<input type="checkbox" id="N/A" value="" wire:model="frameworks"> Quizzes
MCQs
etc
</label>
</div>
<span class="text-danger">#error('frameworks'){{ $message }}#enderror</span>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="card-body">
<b>Possible Date(s)</b> of training programme.
</div>
<div class="col-md-6">
<div id="date-fields">
<label>Select Date</label>
<input type="date" class="btn btn-primary btn-sm mt-3" id="date-picker"
name="dates[]" multiple
value="{{ old('dates.*') }}">
#error('dates.*')
<div class="alert alert-danger">{{ $message }}</div>
#enderror
</div>
</div>
</div>
<div class="col-md-4">
Tap 'Add Date'
<button id="add-date-btn" type="button"
class="btn btn-primary btn-sm mt-3">Add Date
</button>
</div>
</div>
</div>
</div>
</div>
</div>
#endif
#if ($currentStep == 4)
<div class="step-four">
<div class="panel-section-card py-20 px-25 mt-20">
<div class="card-header bg-secondary text-white">STEP 4/5 - Facilitators | Speakers | Test Questions
</div>
<div class="card-body">
<div class="row">
<div class="col-md-4">
<div class="card-body">
Please upload <b>speakers’ updated Curriculum Vitae</b>. Note that the acceptable
format is PDF.
</div>
<div class="form-group">
<label for="cv"></label>
<input type="file" class="form-control" wire:model="cv">
<span class="text-danger">#error('cv'){{ $message }}#enderror</span>
</div>
</div>
<div class="col-md-4">
<div class="card-body">
Please upload <b>speakers’ electronic photograph </b>. Note that the acceptable
format is PDF. <br>- Should be professionally inclined </br>
<div class="form-group">
<label for="cv"></label>
<input type="file" class="form-control" wire:model="cv">
<span class="text-danger">#error('cv'){{ $message }}#enderror</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card-body">
Please upload <b>speakers’ E-Signature or of person co-signing </b> the certificate.
Note that the
acceptable
formats are jpg and png. <br>- Lead speaker signs in the case of multiple
facilitators </br>
<div class="form-group">
<label for="cv"></label>
<input type="file" class="form-control" wire:model="cv">
<span class="text-danger">#error('cv'){{ $message }}#enderror</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="card-body">
Please upload your <b>pretest questions</b>. Note that the acceptable formats
are
Microsoft
Word & PDF. <br>- Two option answers (True/False) <b>or</b></br> <br>- Four
option
answers
(E.g. a, b, c, d or I, II, III, IV)</br>
</div>
<div class="form-group">
<label for="cv"></label>
<input type="file" class="form-control" wire:model="cv">
<span class="text-danger">#error('cv'){{ $message }}#enderror</span>
</div>
</div>
<div class="col-md-6">
<div class="card-body">
Please upload your <b>post questions</b>. Note that the acceptable formats are
Microsoft
Word & PDF. <br>- Two option answers (True/False) <b>or</b></br> <br>- Four
option
answers
(E.g. a, b, c, d or I, II, III, IV)</br>
</div>
<div class="form-group">
<label for="cv"></label>
<input type="file" class="form-control" wire:model="cv">
<span class="text-danger">#error('cv'){{ $message }}#enderror</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#endif
#if ($currentStep == 5)
<div class="step-five">
<div class="panel-section-card py-20 px-25 mt-20">
<div class="card-header bg-secondary text-white">STEP 5/5 - Facility | Platform</div>
<div class="row">
<div class="col-md-4">
<div class="card-body">20.
Use of our <b>conference hall</b>.
<div class="frameworks d-flex flex-column align-items-left mt-2">
<label for="yes">
<input type="checkbox" id="Yes" value="" wire:model="frameworks"> Yes
</label>
<label for="no">
<input type="checkbox" id="No" value="" wire:model="frameworks">
No
</label>
<label for="not-available">
<input type="checkbox" id="N/A" value="" wire:model="frameworks"> Not Available
</label>
</div>
<span class="text-danger">#error('frameworks'){{ $message }}#enderror</span>
</div>
</div>
<div class="col-md-4">
<div class="card-body">20.
Arrangement of <b>catering services</b> .ie food, drinks etc.
<div class="frameworks d-flex flex-column align-items-left mt-2">
<label for="yes">
<input type="checkbox" id="Yes" value="" wire:model="frameworks"> Yes
</label>
<label for="no">
<input type="checkbox" id="No" value="" wire:model="frameworks">
No
</label>
<label for="not-available">
<input type="checkbox" id="N/A" value="" wire:model="frameworks"> Not Available
</label>
</div>
<span class="text-danger">#error('frameworks'){{ $message }}#enderror</span>
</div>
</div>
<div class="col-md-4">
<div class="card-body">20.
Use of our <b>online webinar platform</b>.
<div class="frameworks d-flex flex-column align-items-left mt-2">
<label for="yes">
<input type="checkbox" id="Yes" value="" wire:model="frameworks"> Yes
</label>
<label for="no">
<input type="checkbox" id="No" value="" wire:model="frameworks">
No
</label>
<label for="not-available">
<input type="checkbox" id="N/A" value="" wire:model="frameworks"> Not Available
</label>
</div>
<span class="text-danger">#error('frameworks'){{ $message }}#enderror</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="card-body">20.
Use of our <b>online on-demand platform</b>.
<div class="frameworks d-flex flex-column align-items-left mt-2">
<label for="yes">
<input type="checkbox" id="Yes" value="" wire:model="frameworks"> Yes
</label>
<label for="no">
<input type="checkbox" id="No" value="" wire:model="frameworks">
No
</label>
<label for="not-available">
<input type="checkbox" id="N/A" value="" wire:model="frameworks"> Not Available
</label>
</div>
<span class="text-danger">#error('frameworks'){{ $message }}#enderror</span>
</div>
</div>
</div>
</div>
</div>
#endif
<div class="action-buttons d-flex justify-content-between bg-white pt-2 pb-2">
#if ($currentStep == 1)
<div></div>
#endif
{{----}}
#if ($currentStep == 2 || $currentStep == 3 || $currentStep == 4 || $currentStep == 5)
<button type="button" class="btn btn-md btn-secondary">Back</button>
#endif
{{----}}
#if ($currentStep == 1 || $currentStep == 2 || $currentStep == 3 || $currentStep == 4)
<button type="button" class="btn btn-md btn-success">Next</button>
#endif
#if ($currentStep == 5)
<button type="submit" class="btn btn-md btn-primary">Submit</button>
#endif
</div>
</form>
I want to do a SPA with laravel livewire, i want to use wire:click to fire a funtion in the component but it not working , excuse me if the code mess its my first time posting here and i am not sure of what to post here of my code to make these problem solve thank you
main.blade.php
#section('content')
<div>
<div class="row justify-content-center">
<div class="col-12">
<div class="card my-3">
<!-- header -->
<div class="card-header d-inline-flex">
<h3 class='mr-2'>Categories</h3>
<div>
Add NewCategory
</div>
</div><!-- header -->
<div class="card-body">
<!-- alerts -->
#include('admin.includes.alerts.errors')
#include('admin.includes.alerts.success')
<!-- alerts -->
<!-- if True , create form will show , if not will stay disabled -->
#if ($showCreateForm)
#livewire('admin.category.create' )
#endif
<!-- if True , create form will show , if not will stay disabled -->
<!-- Table -->
<div class="table-responsive">
<table id="example2" class="table table-bordered table-hover">
<thead>
<tr>
<th>ID</th>
<th>Image</th>
<th>Name</th>
<th>Slug</th>
<th>Status</th>
<th>Parent</th>
<th>Action</th>
</tr>
</thead>
<tbody>
#foreach ($categories as $category)
<tr>
<td>{{$category->id}}</td>
{{-- <td>{{storage_path(app\livewire-tmp\$category->image)}}" /></td> --}}
<td>{{$category->name}}</td>
<td>{{$category->slug}}</td>
<td class=" {{$category->isActive()==='Active'? 'text-success':'text-danger'}}">
{{$category->isActive()}}</td>
<td>{{ !empty($category->parent) ? $category->parent->name:'' }}</td>
<td>
Edit
Delete
</td>
</tr>
#endforeach
</tbody>
<tfoot>
<tr>
<th>ID</th>
<th>Image</th>
<th>Name</th>
<th>Slug</th>
<th>Status</th>
<th>Parent</th>
<th>Action</th>
</tr>
</tfoot>
</table>
<div>
{!!$categories->links()!!}
</div>
</div>
<!-- Table -->
</div><!-- body -->
</div>
</div>
</div>
</div>
#endsection
and The Component Main.php ,
<?php
namespace App\Http\Livewire\Admin\Category;
use App\Models\Admin\Category;
use Livewire\Component;
use Livewire\WithPagination;
class Main extends Component
{
use WithPagination;
protected $categories;
public $showCreateForm = false;
public $showEditForm = false;
public function render()
{
$categories = Category::orderBy('id','desc')->paginate(12);
return view('livewire.admin.category.main',[
'categories' => $categories,
]) ->layout('layouts.admin');
}
public function createCategory()
{
$this->showCreateForm = !$this->showCreateForm;
}
public function update_Category($id)
{
$categories = Category::whereId($id);
if ($categories) {
$this->emit('getCategoryid' , $categories);
$this->showEditForm = !$this->showEditForm;
$this->showCreateForm = false;
}
}
public function delete_Category($id)
{
$this->showCreateForm = !$this->showCreateForm;
}
}
//// Update ////
i tried iRestWeb Answer, I think it the right answer but i dont even understand what happening its 100% javascript related and its not my field of expertise , so here's my full code i hope some one understand , and again sorry if my code messy and give you hard time , thank youu.
create.blade.php
<div>
<form role="form" wire:submit.prevent="create" method="POST" enctype="multipart/form-data">
#csrf
<div class="card-body">
<div class="row">
<div class="col-6">
<div class="form-group">
<label for="exampleInputEmail1">Parent</label>
<select type="select" class="form-control" id="exampleInputEmail1" wire:model="parent_id" name="parent_id">
<option selected value> -- select an option -- </option>
{{-- #if (is_array($categories) || is_object($categories) || !empty($categories)) --}} #foreach ($categories as $category)
<option value="{{$category->id}}">{{$category->name}}</option>
#endforeach {{-- #endif --}}
</select>
</div>
</div>
<!-- 1 -->
<div class="col-6">
<div class="form-group">
<label for="exampleInputPassword1">Category Name</label>
<input type="text" class="form-control" id="exampleInputPassword1" placeholder="Name" wire:model="name" name="name"> #error('name') <span class="error text-danger">{{ $message }}</span> #enderror
</div>
</div>
<!-- 2 -->
<div class="col-6">
<div class="form-group">
<label for="exampleInputPassword1">Slug Name</label>
<input type="text" class="form-control" id="exampleInputPassword1" placeholder="Name" wire:model="slug" name="slug"> #error('slug') <span class="error text-danger">{{ $message }}</span> #enderror
</div>
</div>
<!-- 3 -->
<div class="col-6">
<div class="form-group">
<label for="exampleFormControlFile1">Image</label>
<input type="file" wire:model="image" class="form-control-file" id="exampleFormControlFile1" name="image"> #error('image') <span class="error text-danger">{{ $message }}</span> #enderror
</div>
</div>
<!-- 4 -->
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1" wire:model="is_active" name="is_active">
<label class="form-check-label" for="exampleCheck1">is Active</label> #error('is_active') <span class="error text-danger">{{ $message }}</span> #enderror
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
Create.php
<?php
namespace App\Http\Livewire\Admin\Category;
use Livewire\Component;
use App\Models\Admin\Category;
use Livewire\WithFileUploads;
use Illuminate\Support\Str;
use Livewire\WithPagination;
use Intervention\Image\Facades\Image;
class Create extends Component
{
use WithFileUploads;
use WithPagination;
public $slug , $name , $image , $parent_id , $is_active;
protected $rules = [
'slug' => 'required|unique:categories,slug',
'name' => 'required',
'image'=> 'nullable|image|max:1024'
];
protected $categories;
public function render()
{
$categories = Category::orderBy('id','desc')->paginate(12);
return view('livewire.admin.category.create' , [
'categories' => $categories,
]);
}
public function create()
{
$this->validate();
$data = [
'name' => $this->name,
'slug' => $this->slug,
'is_active'=> $this->is_active,
'image'=> $this->image,
'parent_id'=> $this->parent_id,
];
//image upload
try {
if ($image = $this->image) {
$filename = Str::slug($this->name).'.'.$image->getClientOriginalExtension();
$path = public_path('assets/image/'.$filename);
Image::make($image->getRealPath())->save($path,100);
}
Category::create($data);
$this->reset();
return $this->addError('success' , 'Created Successfuly');
} catch (\Throwable $th) {
return $this->addError('error', 'Something Wrong Happens');
}
}
}
edit.blade.php
<div>
<form role="form" method="POST" enctype="multipart/form-data" wire:submit.prevent="update">
#csrf
<div class="card-body">
<div class="row">
<div class="col-6">
<div class="form-group">
<label for="exampleInputEmail1">Parent</label>
<select type="select" class="form-control" id="exampleInputEmail1" wire:model="parent_id" name="parent_id">
<option></option>
{{-- #if (is_array($categories) || is_object($categories) || !empty($categories)) --}} #foreach ($categories as $category)
<option value="{{$category->id}}">{{$category->name}}</option>
#endforeach {{-- #endif --}}
</select>
</div>
</div>
<!-- 1 -->
<div class="col-6">
<div class="form-group">
<label for="exampleInputPassword1">Category Name</label>
<input type="text" class="form-control" id="exampleInputPassword1" placeholder="Name" wire:model="name" value='{{$category->name}}' name="name"> #error('name') <span class="error text-danger">{{ $message }}</span> #enderror
</div>
</div>
<!-- 2 -->
<div class="col-6">
<div class="form-group">
<label for="exampleInputPassword1">Slug Name</label>
<input type="text" class="form-control" id="exampleInputPassword1" placeholder="Name" wire:model="slug" name="slug" value='{{$category->slug}}'> #error('slug') <span class="error text-danger">{{ $message }}</span> #enderror
</div>
</div>
<!-- 3 -->
<div class="col-6">
<div class="form-group">
<label for="exampleFormControlFile1">Image</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1" name="image">
<img value='{{$category->image}}' alt="" srcset=""> #error('image') <span class="error text-danger">{{ $message }}</span> #enderror
</div>
</div>
<!-- 4 -->
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1" wire:model="is_active" name="is_active">
<label class="form-check-label" for="exampleCheck1">is Active</label> #error('is_active') <span class="error text-danger">{{ $message }}</span> #enderror
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
Edit.php (uncompleted Task)
<?php
namespace App\Http\Livewire\Admin\Category;
use Livewire\Component;
use App\Models\Admin\Category;
class Edit extends Component
{
protected $categories , $cat_id;
public $slug , $name , $image , $old_image , $parent_id , $is_active;
protected $listeners = ['getCategoryid'=>'getID'];
public function mount()
{
$this->categories = Category::whereId($this->cat_id)->first();
}//mout
public function render()
{
$categories = Category::all();
return view('livewire.admin.category.edit' , [
'categories' => $categories,
]);
}//render
public function update($id)
{
}//update
public function getID($categories)
{
$this->categories = $categories;
// Data
$this->slug = $this->$categories['slug'];
$this->name = $this->$categories['name'];
$this->image = $this->$categories['image'];
$this->old_image = $this->$categories['old_image'];
$this->parent_id = $this->$categories['parent_id'];
$this->is_active = $this->$categories['is_active'];
}//getID
}
All HTML code should be covered with single <div>. Then it will work.
add liveWire's css and js in the base.blade.php file and it works:
<head>
...
#livewireStyles
</head>
<body>
...
#livewireScripts
</body>
</html>
You don't need the :click event to do this, you can simply use:
wire:$toggle('property')
And you don't need to use the a tag; you can simply use the button tag. So your button code will look like this:
<button type="button" wire:$toggle='showCreateForm' class="btn btn-success">Add New Category</button>
I think this will help you
Add New Category
use <livewire:styles /> and <livewire:scripts />
(instead #livewireStyles and #livewireScripts)
I'm developing a web app and currently coding a form. For some reason, even after filling up the form, it does not submit at first, I have to refresh the page for it to submit to the back-end.
Here's the code for the form:
#extends('layout.admin')
#section('styles')
<link rel="stylesheet" href="{{ asset('css/vendor/bootstrap-float-label.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/vendor/select2.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/vendor/select2-bootstrap.min.css')}}">
#endsection
#section('content')
#if (session()->has('success'))
<div class="alert alert-success rounded" role="alert">{{ session('success') }}</div>
#endif
#if(session()->has('error'))
<div class="alert alert-danger rounded" role="alert">{{ session('error') }}</div>
#endif
<form method="post" id="form" action="{{ isset($cliente) ? route('admin.clientes.update', $cliente) : route('admin.clientes.inserir') }}" class="form bv-form" enctype="multipart/form-data" novalidate>
#csrf
#if(isset($cliente))
#method('PUT')
#endif
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-2 form-group has-float-label position-relative error-l-50">
<label for="tipo-cliente">Tipo Cliente: </label> <br>
<input type="radio" name="tipo" id="p_fisica" value="1" #if(isset($cliente) && $cliente->tipo === 1) checked #endif> Pessoa Fisica <br>
<input type="radio" name="tipo" id="p_juridica" value="2" #if(isset($cliente) && $cliente->tipo === 2) checked #endif> Pessoa Juridica
</div>
<div class="col form-group position-relative error-l-50 has-float-label" id="div_nome">
<label for="nome">Nome</label>
<input type="text" id="nome" name="nome" class="form-control" value="{{ isset($cliente) ? $cliente->nome : old('nome') }}">
</div>
<div class="col form-group position-relative error-l-50 has-float-label" id="div_cpf">
<label for="cpf">CPF</label>
<input type="text" name="cpf" id="cpf" class="form-control cpf" value="{{ isset($cliente) ? $cliente->cpf : old('cpf') }}">
</div>
<div class="col-md-2 form-group has-float-label position-relative error-l-50" id="div_sexo">
<label for="sexo">Sexo</label><br>
<input type="radio" name="sexo" id="sexo_masc" value="1" #if(isset($cliente) && $cliente->sexo === 1) checked #endif> Masculino <br>
<input type="radio" name="sexo" id="sexo_fem" value="2" #if(isset($cliente) && $cliente->sexo === 1) checked #endif> Feminino
</div>
<div class="col has-float-label form-group position-relative error-l-50 display-invisible" id="div_cnpj">
<label for="cnpj">CNPJ</label>
<input type="text" name="cnpj" id="cnpj" class="form-control cnpj" value="{{ isset($cliente) ? $cliente->cnpj : old('cnpj') }}" onkeyup="isValidCNPJ(this)">
</div>
<div class="col form-group position-relative error-l-50 has-float-label display-invisible" id="div_razao">
<label for="razao_social">Razao Social</label>
<input type="text" name="razao_social" class="form-control" id="razao_social" value="{{ isset($cliente) ? $cliente->razao_social : old('razao_social') }}">
</div>
</div> <!-- row end -->
<div class="row">
<div class="col-md-3 form-group position-relative error-l-50 has-float-label">
<label for="empresa_filial">Empresa Filial: </label>
<select name="empresa_filial" class="form-control select2-single">
#foreach($empresas as $empresa)
<option value="{{$empresa->id}}" #if(isset($cliente) && $cliente->empresa_filial === $empresa->id) selected #endif>{{$empresa->nome_empresa}}</option>
#endforeach
</select>
</div>
<div class="col-md-4 has-float-label form-group position-relative error-l-50">
<label for="email">Email</label>
<input type="email" name="email" class="form-control" value="{{ isset($cliente) ? $cliente->email : old('email') }}">
</div>
<div class="col-md-2 has-float-label form-group position-relative error-l-50">
<label for="cod_pais_2">Pais</label>
<input type="text" name="cod_pais_2" class="form-control cod_pais_2" required value="+55" value="{{ isset($cliente) ? $cliente->cod_pais_2 : old('cod_pais_2') }}">
</div>
<div class="col-md-3 has-float-label form-group position-relative error-l-50">
<label for="telefone">Telefone</label>
<input type="text" name="telefone" class="form-control telefone" id="telefone" value="{{ isset($cliente) ? $cliente->telefone : old('telefone') }}">
</div>
</div> <!-- row end -->
<div class="row">
<div class="col-md-2 has-float-label form-group position-relative error-l-50">
<label for="cep">CEP</label>
<input type="text" name="cep" class="form-control cep" id="cep" name="cep" required value="{{ isset($cliente) ? $cliente->cep : old('cep') }}">
</div>
<div class="col-md-5 has-float-label form-group position-relative error-l-50">
<label for="endereco">Endereco</label>
<input type="text" name="endereco" class="form-control" required id="endereco" value="{{ isset($cliente) ? $cliente->endereco : old('endereco') }}">
</div>
<div class="col-md-2 has-float-label form-group position-relative error-l-50">
<label for="cod_pais_1">Pais</label>
<input type="text" name="cod_pais_1" class="form-control cod_pais_1" required value="+55" value="{{ isset($cliente) ? $cliente->cod_pais_1 : old('cod_pais_1') }}">
</div>
<div class="col-md-3 has-float-label form-group position-relative error-l-50">
<label for="telefone">Celular</label>
<input type="text" name="celular" class="form-control celular" required value="{{ isset($cliente) ? $cliente->celular : old('celular') }}">
</div>
</div> <!-- row end -->
<div class="row">
<div class="col has-float-label form-group position-relative error-l-50">
<label for="complemento">Complemento</label>
<input type="text" name="complemento" required class="form-control" id="complemento" value="{{ isset($cliente) ? $cliente->complemento : old('complemento') }}">
</div>
<div class="col has-float-label form-group position-relative error-l-50">
<label for="ponto_referencia">Ponto de Referencia</label>
<input type="text" name="ponto_referencia" class="form-control" id="ponto_referencia" value="{{ isset($cliente) ? $cliente->ponto_referencia : old('ponto_referencia') }}">
</div>
<div class="col has-float-label form-group position-relative error-l-50">
<label for="bairro">Bairro</label>
<input type="text" name="bairro" class="form-control" required id="bairro" value="{{ isset($cliente) ? $cliente->bairro : old('bairro') }}">
</div>
</div><!-- row end -->
<div class="row">
<div class="col has-float-label form-group position-relative error-l-50">
<label for="cidade">Cidade</label>
<input type="text" name="cidade" required id="cidade" class="form-control" value="{{ isset($cliente) ? $cliente->cidade : old('cidade') }}">
</div>
<div class="col has-float-label form-group position-relative error-l-50">
<label for="uf">Estado</label>
<select class="form-control select2-single" name="uf" required>
<option value="" selected>Selecione</option>
#foreach(\App\Helpers\Helpers::estados() as $estado => $nome)
<option value="{{ $estado }}" #if(isset($cliente) && $cliente->uf === $estado) selected #endif>{{ $nome }}</option>
#endforeach
</select>
</div>
<div class="col has-float-label form-group position-relative error-l-50">
<label for="pais">Pais</label>
<select class="form-control select2-single" required id="pais" name="pais" data-width="100%">
#foreach(\App\Helpers\Helpers::paises() as $pais)
<option value="{{ $pais['nome'] }}" #if(isset($cliente) && $cliente->pais === $pais) selected #endif>{{ $pais['nome'] }}</option>
#endforeach
</select>
</div>
</div><!-- row end -->
<div class="row">
<div class="col has-float-label form-group position-relative error-l-50">
<label for="observacao">Observacao</label>
<input type="text" name="observacao" class="form-control" id="observacao" value="{{ isset($cliente) ? $cliente->observacao : old('observacao') }}">
</div>
</div><!-- row end -->
</div>
</div>
</div>
<div class="col-md-5">
<div class="card" style="padding-bottom: 2px">
<div class="card-body">
<div class="row">
<h3 style="margin-left:8px">Informacoes de Cobranca</h3>
</div><!-- row end -->
<div class="row">
<input type="checkbox" name="reciclar_info" id="client-check" style="margin-left:8px" onchange="chargingFields()">
<span style="margin: 10px">Usar as mesmas informacoes de endereco para cobranca</span>
<hr class="style-six"> <br>
</div>
<div class="row">
<div class="col-md-4 has-float-label form-group position-relative error-l-50">
<label for="cobranca_cnpj">CNPJ</label>
<input type="text" name="cobranca_cnpj" onkeyup="isValidCobrancaCNPJ()" class="form-control cnpj" id="cobranca_cnpj" value="{{ isset($cliente) ? $cliente->cobranca_cnpj : old('cobranca_cnpj') }}">
</div>
<div class="col-md-8 has-float-label form-group position-relative error-l-50">
<label for="cobranca_razao_social">Razao Social</label>
<input type="text" name="cobranca_razao_social" class="form-control" id="cobranca_razao_social" value="{{ isset($cliente) ? $cliente->cobranca_razao_social : old('cobranca_razao_social') }}">
</div>
</div><!-- row end -->
<div class="row">
<div class="col-md-4 has-float-label form-group position-relative error-l-50">
<label for="cobranca_cep">CEP</label>
<input type="text" name="cobranca_cep" class="form-control cep" id="cobranca_cep" value="{{ isset($cliente) ? $cliente->cobranca_cep : old('cobranca_cep') }}">
</div>
<div class="col-md-8 has-float-label form-group position-relative error-l-50">
<label for="cobranca_endereco">Endereco</label>
<input type="text" name="cobranca_endereco" class="form-control" id="cobranca_endereco" value="{{ isset($cliente) ? $cliente->cobranca_endereco : old('cobranca_endereco') }}">
</div>
</div>
<div class="row">
<div class="col has-float-label form-group position-relative error-l-50">
<label for="cobranca_complemento">Complemento</label>
<input type="text" name="cobranca_complemento" class="form-control" id="cobranca_complemento" value="{{ isset($cliente) ? $cliente->cobranca_complemento : old('cobranca_complemento') }}">
</div>
<div class="col has-float-label form-group position-relative error-l-50">
<label for="cobranca_ponto_referencia">Ponto de Referencia</label>
<input type="text" name="cobranca_ponto_referencia" id="cobranca_ponto_referencia" class="form-control" value="{{ isset($cliente) ? $cliente->cobranca_ponto_referencia : old('cobranca_ponto_referencia') }}">
</div>
<div class="col has-float-label form-group position-relative error-l-50">
<label for="cobranca_bairro">Bairro</label>
<input type="text" name="cobranca_bairro" class="form-control" id="cobranca_bairro" value="{{ isset($cliente) ? $cliente->cobranca_bairro : old('cobranca_bairro') }}">
</div>
</div>
<div class="row">
<div class="col has-float-label form-group position-relative error-l-50">
<label for="cobranca_cidade">Cidade</label>
<input type="text" name="cobranca_cidade" id="cobranca_cidade" class="form-control" value="{{ isset($cliente) ? $cliente->cobranca_cidade : old('cobranca_cidade') }}">
</div>
<div class="col has-float-label form-group position-relative error-l-50">
<label for="cobranca_uf">Estado</label>
<select class="form-control select2-single" name="cobranca_uf" id="cobranca_uf">
<option value="" selected>Selecione</option>
#foreach(\App\Helpers\Helpers::estados() as $estado => $nome)
<option value="{{ $estado }}"
#if(isset($cliente) && $cliente->cobranca_uf === $estado) selected #endif>{{ $nome }}</option>
#endforeach
</select>
</div>
<div class="col has-float-label form-group position-relative error-l-50">
<label for="cobranca_pais">Pais</label>
<select class="form-control select2-single" name="cobranca_pais" id="cobranca_pais">
#foreach(\App\Helpers\Helpers::paises() as $pais)
<option value="{{ $pais['nome'] }}" #if(isset($cliente) && $cliente->cobranca_pais === $pais) selected #endif>{{ $pais['nome'] }}</option>
#endforeach
</select>
</div>
</div><!-- row end -->
<div class="row">
<div class="col has-float-label form-group position-relative error-l-50">
<label for="cobranca_observacao">Observacao</label>
<input type="text" name="cobranca_observacao" class="form-control" id="cobranca_observacao" value="{{ isset($cliente) ? $cliente->cobranca_observacao : old('cobranca_observacao') }}">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-1">
<button type="submit" id="save-button" class="btn btn-primary float-left" style="margin-top: 10px">
#if(isset($cliente))
Salvar
#else
Adicionar
#endif
</button>
</div>
</div><!-- row end -->
</div>
</form>
#endsection
#section('js')
<script src="{{ asset('js/vendor/jquery.validate/jquery.validate.min.js') }}"></script>
<script src="{{ asset('js/vendor/jquery.validate/additional-methods.min.js') }}"></script>
<script src="{{ asset('js/vendor/select2.full.js') }}"></script>
<script>
const addressApiUrl = "{{ route('pega.endereco') }}";
</script>
<script src="{{ asset('js/cliente_form.js') }}"></script>
<script type="text/javascript">
var sent = false;
function isValidCobrancaCNPJ() {
var strCNPJ = $("#cobranca_cnpj").val();
console.log(strCNPJ);
// Caso o CEP não esteja nesse formato ele é inválido!
var objER = /^[0-9]{14}$/;
strCNPJ = Trim(strCNPJ);
if(strCNPJ.length > 0) {
if(objER.test(strCNPJ) && !sent) {
sent = true;
formReadOnly(true);
$.ajax({
method: 'POST',
url: "{{ route('pega.cnpj.interno') }}",
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
data: {cnpj: strCNPJ},
success: function (data) {
if(!data.error) {
$.notify({
// options
message: 'CNPJ verificado!'
},{
// settings
type: 'success'
});
$('#cobranca_razao_social').val(data.razao_social);
$('#cobranca_cep').val(data.cep);
$('#cobranca_endereco').val(data.endereco);
$('#cobranca_bairro').val(data.bairro);
$('#cobranca_cidade').val(data.cidade);
$('#cobranca_uf').val(data.uf);
$('#cobranca_endereco').focus();
sent = false;
$('#form').bootstrapValidator('destroy');
$('#form').data('bootstrapValidator', null);
$('#form').bootstrapValidator();
}else{
$.notify({
// options
message: data.msg
},{
// settings
type: 'danger'
});
sent = false;
}
formReadOnly(false);
},
error: function (msg) {
sent = false;
formReadOnly(false);
}
});
}
}
}
function Trim(strTexto)
{
// Substitúi os espaços vazios no inicio e no fim da string por vazio.
return strTexto.replace(/\D/g, "");
}
function isValidCNPJ() {
var strCNPJ = $("#cnpj").val();
console.log(strCNPJ);
// Caso o CEP não esteja nesse formato ele é inválido!
var objER = /^[0-9]{14}$/;
strCNPJ = Trim(strCNPJ);
if(strCNPJ.length > 0)
{
if(objER.test(strCNPJ) && !sent)
{
sent = true;
formReadOnly(true);
$.ajax({
method: 'POST',
url: "{{ route('pega.cnpj.interno') }}",
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
data: {cnpj: strCNPJ},
success: function (data)
{
if(!data.error)
{
$.notify({
// options
message: 'CNPJ verificado!'
},{
// settings
type: 'success'
});
$('#razao_social').val(data.razao_social);
$('#cep').val(data.cep);
$('#endereco').val(data.endereco);
$('#bairro').val(data.bairro);
$('#cidade').val(data.cidade);
$('#uf').val(data.uf);
$('#endereco').focus();
sent = false;
$('#form').bootstrapValidator('destroy');
$('#form').data('bootstrapValidator', null);
$('#form').bootstrapValidator();
}else{
$.notify({
// options
message: data.msg
},{
// settings
type: 'danger'
});
sent = false;
}
formReadOnly(false);
},
error: function (msg) {
sent = false;
formReadOnly(false);
}
});
}
}
}
</script>
#endsection
Controller:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Models\Empresa;
use App\Models\Cliente;
class ClienteController extends Controller
{
public function index() {
$data['clientes'] = Cliente::all();
return view('admin.clientes.index', $data);
}
public function addCliente() {
$data['empresas'] = Empresa::all();
return view('admin.clientes.cadastro',$data);
}
public function insert(Request $request) {
$cliente = new Cliente;
$cliente->empresa_filial = $request->empresa_filial;
$cliente->tipo = $request->tipo;
$cliente->email = $request->email;
if ($request->tipo == 1) {
$cliente->nome = $request->nome;
$cliente->cpf = $request->cpf;
$cliente->cnpj = $cliente->razao_social = "";
} else {
$cliente->cnpj = $request->cnpj;
$cliente->razao_social = $request->razao_social;
$cliente->nome = $cliente->cpf = "";
}
//had to resume code due to body limitations, but basically what is above for other fields
$cliente->save();
return redirect()->back()->with(['success' => 'Cliente cadastrado com sucesso!']);
}
public function update($identificacao, Request $request) {
$cliente->save();
}
}
I'm currently using Laravel as a framework and have tried everything (#csrf, csrf_field(), adding a token via hidden input), nothing works, I'm lost.
Also, by checking the browser's network activity, POST methods for getting information such as address are working fine inside the form, only problem being the submit button.
EDIT: The routes:
Route::prefix('clientes')->group(function() {
Route::view('/1/detalhes', 'admin.clientes.detalhes')->name('admin.clientes.detalhes');
Route::get('/', 'ClienteController#index')->name('admin.clientes.index');
Route::get('/cadastro', 'ClienteController#addCliente')->name('admin.clientes.cadastro');
Route::get('/atualizar/{cliente}', 'ClienteController#atualizarCliente')->name('admin.clientes.atualizar');
Route::get('/{cliente}', 'ClienteController#delete')->name('admin.clientes.delete');
Route::put('/atualizar/{cliente}', 'ClienteController#update')->name('admin.clientes.update');
Route::post('/cadastro', 'ClienteController#insert')->name('admin.clientes.inserir');
});
First, I am developer for C, C++, C#, Android and Swift but I have absolutly no experience in JavaScript or PHP or Web development.
I bought some source code for my backend server. It is kind of shop where I can enter products and store them. Now, I got everthying to work (even with 0 knowdlege in web development), but there is a text input field which checks for integer values. I want to insert decimal values like a price information, e.g. 19.99. It then complains that it has to be 19 or 20. I can not find the place where to change that or which class/function is responsible for checking that entered value. There is something called Blade. It is in HTML and javaScript as it seems to me. I can not find any class or a route to a file where the entered values go and get checked. I don't even know which class/file is responsible for writing the values to the database. I mean, wtf? It can not be that complicated to find out which file is responsible to handle the entered values. It drives me crazy.
That is the input which only takes integer values.
This is the blade code:
{{-- resources/views/admin/dashboard.blade.php --}}
#extends('adminlte::page')
#section('title', 'Products')
#include('parts.header')
#section('content_header')
<div class="col-md-12">
<h2>Add new product</h2>
</div>
#stop
#section('content')
<div class="row">
<div class="col-sm-12">
<form method="post" action="{{ route('product.add') }}" enctype="multipart/form-data">
{{ csrf_field() }}
#if(!$errors->isEmpty())
<div class="alert alert-danger alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4><i class="icon fa fa-ban"></i> Alert!</h4>
#foreach ($errors->all() as $error)
<div>{{ $error }}</div>
#endforeach
</div>
#endif
<div class="col-sm-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Details</h3>
</div>
<!-- /.box-header -->
<!-- form start -->
<form role="form">
<div class="box-body">
<div class="row">
<div class="col-sm-4 form-group ">
<label for="name">Name</label>
<input type="text" name="name" class="form-control" id="name" placeholder="Enter name" required>
</div>
<div class="col-sm-4 form-group ">
<label for="name">Description</label>
<input type="text" name="description" class="form-control" id="name" placeholder="Enter description" required>
</div>
<div class="col-sm-3 form-group ">
<label for="category">Select category</label>
<select name="category_id" class="form-control" required>
<option value="" disabled selected>Select your option</option>
#foreach($categories as $category)
<option value="{{ $category->id }}">{{ $category->name }}</option>
#endforeach
</select>
</div>
</div>
<div class="row">
<div class="col-sm-4 form-group">
<label for="price">Price</label>
<input type="number" name="price" class="form-control" id="price" placeholder="Enter price" required>
</div>
<div class="col-sm-4 form-group">
<label for="amount">Amount</label>
<input type="number" name="amount" class="form-control" id="amount" placeholder="Enter amount" required>
</div>
<div class="col-sm-3 form-group">
<div class="row">
<div class="col-sm-6">
<img id="myImg" alt="" style="width: 100%;">
</div>
<div class="col-sm-6">
<label for="image">Image</label>
<input class="fullwidth input rqd" type="file" name="image" id="image" accept="image/*" onclick="fileClicked(event)" onchange="fileChanged(event)" required>
<div id="log"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<h4>Variations</h4>
<div class="box-body table-responsive no-padding">
<table id="variationTable" class="table table-bordered table-hover dataTable" role="grid">
<thead>
<tr role="row">
<th rowspan="1" colspan="1">#</th>
<th rowspan="1" colspan="1">Owner</th>
<th rowspan="1" colspan="1">Remove</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td>1</td>
<td>
<input type="text" name="owner_id[]" placeholder="Enter owner" required>
</td>
<td>
<i class="fa fa-fw fa-remove"></i>
</td>
</tr>
</tbody>
</table>
</div>
<button type="button" class="btn btn-default btn-sm addrow pull-right" style="height: 34px;">
<span class="glyphicon glyphicon-plus-sign"></span> Add
</button>
<div class="clearfix"></div>
<div>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
<div class="col-sm-6">
<h4>Siblings</h4>
<div class="form-group">
<select name="siblings[]" class="form-control select2" multiple>
#foreach($products as $product)
<option value="{{ $product->id }}">{{ $product->name }} </option>
#endforeach
</select>
</div>
</div>
</div>
</div>
<!-- /.box-body -->
</form>
</div>
</div>
</form>
</div>
</div>
#stop
#section('js')
#include('parts.footer');
#stop
Can somebody tell me where to find the code which handles the input? Where to find the function which checks for integer? I really searched every file, but somehow I am too stupid for that web stuff.
There is something like a class mentioned: col-sm-4 form-group but I can not find it?!?
Thanks.
Use step attribute for your number input
Float
<input type="number" step="0.01">
Int
<input type="number">
Go to app/Http directory; then you have to check for the controller that handles that very view. Look for validator method in the controller file. It is something like this:
<php?
protected function validator(array $data)
{
return Validator::make($data, [
'price' => 'required|string|min:19|max:20'
]);
}
You can change it as you want.
Add step="0.01"(for example 0.01) property to your price input.
If it's been checked on client side you can check resources/views/parts/footer and find out which javascript files are included in your template then check that javascript files for the validation.
If it's server side, most common place for validations is app/Http/Requests. but before going for requests you should check the Controller and action which is responsible for responding to that request and check which Request class is input paramter for that action then got to app/Http/Requests and find that class and edit validation rules