繁体   English   中英

始终我的按钮值仅作为数组的第一条记录

[英]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">&times;</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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM