jeudi 2 août 2018

Javascript/Laravel only First ID works for button

I am using laravel and am looping to display all my users with an edit button. I want to hide the user edit form with javascript and have it appear on click. This works for the first item in my array, but when I try to edit a second user, the button won't work. Is there a way to insert an id into the form directly with laravel? I know it's because id is being reiterated, but all I'm not sure how to fix that.

users.index

@extends('layouts.admin')


@section('content')



<div class="col-sm-8">
    <div class="panel">


        @if($users)
        @foreach($users as $user)

        <p>{!! $user->name !!}</p>
        <button class="edit-user" id="edit-user"> Edit</button>
        <hr>
        <div class="edit-user">
        <h1>Edit Users</h1>

            {!! Form::open(['method'=>'POST', 'action'=>'AccountController@store']) !!}

                <div class="form-group">
                    {!! Form::label('name', 'Client Name:') !!}
                    {!! Form::text('name', null, ['class'=>'form-control']) !!}
                </div>
                    

                <div class="form-group">
                    {!! Form::label('start_access_date', 'start:') !!}
                    {!! Form::text('start_access_date', null, ['class'=>'form-control']) !!}
                </div>
                    


                    <div class="form-group">
                    {!! Form::label('end_access_date', 'end:') !!}
                    {!! Form::text('end_access_date', null, ['class'=>'form-control']) !!}
                </div>
                    


                    
                <div class="form-group">
                    {!! Form::submit('Edit Account', ['class'=>'btn btn-primary']) !!}
                </div>

            {!! Form::close() !!}


        </div>
 @endforeach
        @endif



            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

    $('.date').datepicker({  

       format: 'mm-dd-yyyy'

     });  

</script>  
  <script>

    $(document).ready(function(){

//if you wish to keep both the divs hidden by default then dont forget to hide //them           
$(".edit-user").hide();



$("#edit-user").click(function(){
      $(".edit-user").toggle();

});

});



</script>
    @endsection



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire