I am using laravel framework to develop web application i have one simple form i have one table which is coming from API based on that i am loading all the values into the table everything works fine but when i click on remove button it's taking first record id (i.e.. first item id of the array for all items )only instead of taking that particular record id,could you please help me where did i mistake..?
@include('header')
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous">
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.left-btn {
float: left;
}
.right-btn {
float: right;
}
.table-bordered {
margin-top: 3%;
}
#new-form {
border: 3px solid black;
width: 600px;
display: flex;
align-items: center;
justify-content: center;
}
table {
font-family: "Times New Roman";
font-size: 20px;
}
span.circle {
background: #ADD8E6;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
color: #6e6e6e;
display: inline-block;
font-weight: bold;
line-height: 40px;
margin-right: 5px;
text-align: center;
width: 40px;
}
.buttons {
width: 200px;
margin: 0 auto;
display: inline;
}
.action_btn {
width: 200px;
margin: 0 auto;
display: inline;
}
.confirm_buttons {
width: 60px;
}
.popup {
font-size: 15px;
}
.file:focus,
.file:active {
box-shadow: none !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
outline: none !important;
}
.glyphicon-remove {
font-size: 20px;;
}
</style>
</head>
<body>
<div >
<div >
<div >
<h4 style="font-size:20px;font-weight:80px;">User Records</h4>
</div>
<div >
<button type="button" style="font-size:20px;font-weight:28px;"
data-toggle="modal" data-target="#exampleModal">
Add New Employee
</button>
</div>
</div>
<div id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div role="document">
<div >
<div >
<h5 id="exampleModalLabel">Add New Employee</h5>
<button type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div >
<form action="<?php echo url('postemployee'); ?>" method="POST" enctype="multipart/form-data">
@csrf
@if (count($errors) > 0)
<div >
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<div >
<div >
<label for="email1">Email</label>
<input type="email" id="email"
aria-describedby="emailHelp" name="email" placeholder="Enter email">
</div>
<div >
<label for="email1">Full Name</label>
<input type="text" id="fname"
aria-describedby="emailHelp" name="fname" placeholder="Enter Name">
</div>
<div >
<label for="email1">Date Of Joining</label>
<input type="date" name="doj" id="doj"
aria-describedby="emailHelp">
</div>
<div >
<label for="password1">Date Of Leaving</label>
<input type="date" id="password1" name="dol">
</div>
<div >
<label for="defaultCheck1">
Still working
</label>
<input type="checkbox" name="current_date"
id="defaultCheck1">
</div>
<div >
<label for="email1">Upload Image</label>
<input type="file" id="email"
name="image" aria-describedby="emailHelp">
</div>
<div >
<button type="submit" >Save</button>
</div>
</div>
</form>
</form>
</div>
</div>
</div>
</div>
<table id="table">
<tr>
<th>Avatar</th>
<th>Name</th>
<th>Email</th>
<th>Experience</th>
<th>Action</th>
</tr>
@foreach ($employees as $employee)
<tr>
<td>
@if (isset($employee['image_path']))
<img style="border-radius: 50%;height:40px;width:40px;"
src={{ URL::asset("/images/{$employee['image_path']}") }} alt="Avatar">
@else
<span >{{ ucfirst(mb_substr($employee['name'], 0, 1)) }}</span>
@endif
</td>
<td>{{ ucfirst($employee['name']) }}</td>
<td>{{ $employee['email'] }}</td>
<td>
@if ($employee['joining_date'] == '0 Days')
<span data-toggle="tooltip" data-placement="top" title="Fresher"
style="color:green;font-weight:500;">Joined Today</span>
@else
{{ $employee['joining_date'] }}
@endif
</td>
<td>
<button type="submit" data-toggle="modal" data-target="#exampleModalCenter"
value="{{ $employee['id'] }}">
<span style="margin-top:10px;" onclick="getId()" id="mt"
><span>Remove</span>
</span>
</button>
<div id="exampleModalCenter" tabindex="-1" role="dialog"
aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div role="document">
<div >
<div >
Are you sure you want to delete ?
<br><br>
<form action="<?php echo url('delete'); ?>" method="POST">
@csrf
{{ method_field('DELETE') }}
<button type="submit"
data-toggle="modal" name="delete_id" value="{{ $employee['id'] }}"
data-target="#exampleModalCenter">Yes</button>
<button type="submit"
data-toggle="modal" data-target="#exampleModalCenter">No</button>
</form>
</div>
</div>
</div>
</div>
</td>
</tr>
@endforeach
</table>
</div>
<div >
</div>
<script type="text/javascript">
</script>
</body>
</html>
CodePudding user response：
you can use onclick functionality for passing value ,try the following approach it will work
<button type="submit" data-toggle="modal" data-target="#exampleModalCenter" data-backdrop="static" data-keyboard="false" value="{{ $employee['id'] }}" onclick="id(this.value)">
<span style="margin-top:10px;" id="rmr" ><span>Remove</span>
</span>
</button>
<!--refactor the following line in modal target -->
<button type="submit" data-toggle="modal" name="delete_id" id="del_id" data-target="#exampleModalCenter">Yes</button>
<script type="text/javascrpt">
function id(objButton) {
document.getElementById('del_id').value = objButton;
}
</script>