pass data to a bootstrap modal in laravel

Question

I want to create a new register in my Database using a modal with just 5 fields. Now it works fine for the first register only. When I use the button to create other registers, It doesn't work,

I just want to take the cod('id') from my equipment and pass it to the hidden field in the modal, but this works only for the first as I said above.

I think my problem is on my Include modal inside of foreach in the view but I couldn't found the problem

My store function:

public function store()
    {
        $input = array_except(Input::all(), '_token');
        
        $validation = Validator::make($input, Localizacao::$rules);

        if ($validation->passes())
        {
            $this->localizacao->create($input);

            return Redirect::route('equipamentos.index');
        }

        return Redirect::route('equipamentos.index')
            ->withInput()   
            ->withErrors($validation);
            
    }

My table in index view:

@foreach ($equipamentos as $equipamento)
            <tr>
<td>{{{ $equipamento->descricao_uso }}}</td>
                <td>{{{ $equipamento->data_compra->format('d/m/Y') }}}</td>
                <td>{{{ $equipamento->nota_fiscal }}}</td>
                <td>{{{ $equipamento->valor_compra }}}</td>
                <td>{{{ $equipamento->fornecedor }}}</td>
                <td>{{{ $equipamento->taxa_depreciacao }}}</td>
                <td>{{ $item }}</td>
                <td> - </td>
                
                    <td>
                        <a href="{{ route('equipamentos.edit', array($equipamento->cod)) }}" data-toggle="tooltip" title="Editar" data-placement="top" class="legenda">
                        <i class="btn btn-info glyphicon glyphicon glyphicon-pencil" style="width: 41px; height:34px;"></i></a>
                    </td>   
                    <td>
                        <button type="button" data-target="#myModal" data-toggle="modal" data-tooltip="tooltip" class="btn btn-success glyphicon glyphicon-transfer" style="width: 41px; height:34px;" title="Alterar Localização"></button>
                        
                        @include('localizacao.partials.form', array($equipamento, $itens_contabil))
                          
                    </td>
        </td>
            </tr>

            @endforeach

This is my modal code:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Fechar</span></button>
        <h4 class="modal-title" id="myModalLabel">Alterar Localização: {{ $equipamento->descricao_equipamento }}</h4>
      </div>
      <div class="modal-body" align="center">
        
        {{ Form::open(array('route' => 'localizacao.store', 'class'=>'form-inline')) }}
            
        {{ Form::hidden('created_by',  Auth::user()->cod); }} 
        {{ Form::hidden('cod_equipamento', $equipamento->cod); }}

        {{ Form::label('data_movimentacao', 'Data Movimentação:') }}
        {{ Form::text('data_movimentacao', null, array('class'=>'form-control datepicker', 'style' => 'width:100%')) }}

        {{ Form::label('local_atual', 'Local:') }}
        {{ Form::select('local_atual', $itens_contabil, null ,array('class' => 'chosen-select')) }}

        <div class="clear"><br></div>  

        {{ Form::label('projeto_atual', 'Projeto:') }}
        {{ Form::text('projeto_atual', null, array('class'=>'form-control', 'style' => 'width:100%')) }}

        {{ Form::label('funcionario_responsavel', 'Funcionário responsável:') }}
        {{ Form::text('funcionario_responsavel', null, array('class'=>'form-control', 'style' => 'width:100%')) }}

        {{ Form::label('motivo', 'Motivo:') }}
        {{ Form::text('motivo', null, array('class'=>'form-control', 'style' => 'width:100%')) }}

        <br>
        <br>
        <br>
          
      </div>
      <div class="modal-footer" align="center">
        {{ Form::submit('Alterar Localização', array('class' => 'btn btn-success')) }}
        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
        {{ Form::close() }}
      </div>
    </div>
  </div>
</div>

Thx for the help!

Solution

Although, you are including the modal multiple time the button will call the first one because of the id

To solve your problem you have to use javascript or jQuery. i have used jQuery.

My table in index view:

@foreach ($equipamentos as $equipamento)
 <tr>
      <td>{{{ $equipamento->descricao_uso }}}</td>
      <td>{{{ $equipamento->data_compra->format('d/m/Y') }}}</td>
      <td>{{{ $equipamento->nota_fiscal }}}</td>
      <td>{{{ $equipamento->valor_compra }}}</td>
      <td>{{{ $equipamento->fornecedor }}}</td>
      <td>{{{ $equipamento->taxa_depreciacao }}}</td>
      <td>{{ $item }}</td>
      <td> - </td>
      <td>
          <a href="{{ route('equipamentos.edit', array($equipamento->cod)) }}" data-toggle="tooltip" title="Editar" data-placement="top" class="legenda">
          <i class="btn btn-info glyphicon glyphicon glyphicon-pencil" style="width: 41px; height:34px;"></i></a>
      </td>   
      <td>
          <button type="button" data-target="#myModal" data-toggle="modal" data-tooltip="tooltip" class="btn btn-success glyphicon glyphicon-transfer registerBtn" style="width: 41px; height:34px;" title="Alterar Localização" data_value="{{ $equipamento->cod }}"></button>
      </td>
 </tr>
 @endforeach
 @include('localizacao.partials.form', array($itens_contabil)) 
 <script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $('.registerBtn').click(function() {
            $("#cod_equipamento").val($(this).attr('data_value'));
        });
    });
  </script>

This is my modal code:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Fechar</span></button>
        <h4 class="modal-title" id="myModalLabel">Alterar Localização: {{ $equipamento->descricao_equipamento }}</h4>
      </div>
      <div class="modal-body" align="center">

        {{ Form::open(array('route' => 'localizacao.store', 'class'=>'form-inline')) }}

        {{ Form::hidden('created_by',  Auth::user()->cod); }} 
        {{ Form::hidden('cod_equipamento', '', array('id' => 'cod_equipamento')); }}

        {{ Form::label('data_movimentacao', 'Data Movimentação:') }}
        {{ Form::text('data_movimentacao', null, array('class'=>'form-control datepicker', 'style' => 'width:100%')) }}

        {{ Form::label('local_atual', 'Local:') }}
        {{ Form::select('local_atual', $itens_contabil, null ,array('class' => 'chosen-select')) }}

        <div class="clear"><br></div>  

        {{ Form::label('projeto_atual', 'Projeto:') }}
        {{ Form::text('projeto_atual', null, array('class'=>'form-control', 'style' => 'width:100%')) }}

        {{ Form::label('funcionario_responsavel', 'Funcionário responsável:') }}
        {{ Form::text('funcionario_responsavel', null, array('class'=>'form-control', 'style' => 'width:100%')) }}

        {{ Form::label('motivo', 'Motivo:') }}
        {{ Form::text('motivo', null, array('class'=>'form-control', 'style' => 'width:100%')) }}

        <br>
        <br>
        <br>

      </div>
      <div class="modal-footer" align="center">
        {{ Form::submit('Alterar Localização', array('class' => 'btn btn-success')) }}
        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
        {{ Form::close() }}
      </div>
    </div>
  </div>
</div>

Comments

[Lucas Campos]

U are awesome! that worked fine, just create the modal style and after pass the id to the modal, thx!

[Iresha Shyamean]

I have another question, I used the "registerBtn" as button "id" and call to the Jquery part. Then it was not working. So I added the "registerBtn" as a "class" selector. Then the JQuery part worked. What is the reason?