[英]Always my button value is taking as first record of the arrray only
我正在使用 laravel 框架來開發 web 應用程序我有一個簡單的表格,我有一個來自 API 的表格,基於我將所有值加載到表格中時,我點擊刪除所有值時都可以正常工作(即所有項目的數組的第一個項目ID)而不是采用那個特定的記錄ID,你能幫我看看我在哪里弄錯了..?
@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/bootstrap@4.0.0/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/popper.js@1.12.9/dist/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/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 class="container">
<div class="row">
<div class="col-6">
<h4 class="" style="font-size:20px;font-weight:80px;">User Records</h4>
</div>
<div class="col-6 text-right">
<button type="button" style="font-size:20px;font-weight:28px;" class="btn btn-primary"
data-toggle="modal" data-target="#exampleModal">
Add New Employee
</button>
</div>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h5 class="modal-title" id="exampleModalLabel">Add New Employee</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body popup">
<form action="<?php echo url('postemployee'); ?>" method="POST" enctype="multipart/form-data">
@csrf
@if (count($errors) > 0)
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<div class="modal-body">
<div class="form-group">
<label for="email1">Email</label>
<input type="email" class="form-control" id="email"
aria-describedby="emailHelp" name="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="email1">Full Name</label>
<input type="text" class="form-control" id="fname"
aria-describedby="emailHelp" name="fname" placeholder="Enter Name">
</div>
<div class="form-group">
<label for="email1">Date Of Joining</label>
<input type="date" class="form-control" name="doj" id="doj"
aria-describedby="emailHelp">
</div>
<div class="form-group">
<label for="password1">Date Of Leaving</label>
<input type="date" class="form-control" id="password1" name="dol">
</div>
<div class="form-check form-inline">
<label class="form-check-label" for="defaultCheck1">
Still working
</label>
<input class="form-check-input" type="checkbox" name="current_date"
id="defaultCheck1">
</div>
<div class="form-group form-inline">
<label for="email1">Upload Image</label>
<input type="file" class="file" class="form-control" id="email"
name="image" aria-describedby="emailHelp">
</div>
<div class="form-group text-center">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</form>
</form>
</div>
</div>
</div>
</div>
<table class="table table-bordered" 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 class="circle">{{ 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" class="btn" data-toggle="modal" data-target="#exampleModalCenter"
value="{{ $employee['id'] }}">
<span style="margin-top:10px;" onclick="getId()" id="mt"
class="glyphicon glyphicon-remove"><span>Remove</span>
</span>
</button>
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body text-center">
Are you sure you want to delete ?
<br><br>
<form action="<?php echo url('delete'); ?>" method="POST">
@csrf
{{ method_field('DELETE') }}
<button type="submit" class="btn btn-primary confirm_buttons"
data-toggle="modal" name="delete_id" value="{{ $employee['id'] }}"
data-target="#exampleModalCenter">Yes</button>
<button type="submit" class="btn btn-secondary confirm_buttons"
data-toggle="modal" data-target="#exampleModalCenter">No</button>
</form>
</div>
</div>
</div>
</div>
</td>
</tr>
@endforeach
</table>
</div>
<div class="right-btn">
</div>
<script type="text/javascript">
</script>
</body>
</html>
您可以使用onclick功能來傳遞值,嘗試以下方法它會起作用
<button type="submit" class="btn" 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" class="glyphicon glyphicon-remove"><span>Remove</span>
</span>
</button>
<!--refactor the following line in modal target -->
<button type="submit" class="btn btn-primary confirm_buttons" 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.