I use Laravel 5, Blade template for build interface. I want to take specific row hidden field value.
This is my data table code.
<table>
<thead>
<tr>
<th>Fee Code</th>
<th>Fee Name</th>
<th>Amount</th>
<th class="hidden"></th>
<th><p id='buttons'><a href="{{ route('fee-detail.create')}}" class="btn btn-success"><strong> Add New Fee Details   </strong> <span class="glyphicon glyphicon-plus"></span> </a> </p></th>
</tr>
</thead>
<tbody>
<?php $i = 0; ?>
@foreach ($fees as $fee)
<tr>
<td><a href="#" class="" data-toggle="modal" data-target="#myModal" > {{ $fee->feeCode }} </a></td>
<td><a href="#" class="" data-toggle="modal"> {{ $fee->feeName }} </a></td>
<td>{{$fee->amount}}</td>
<td class="hidden" value="detailId">{{ $i++ }}</td>
<td align='center'>
{!! Form::open(['method' => 'DELETE', 'route'=>['fee-detail.destroy',$fee->id]]) !!}
<a href="{{route('fee-detail.edit',$fee->id)}}" class="btn btn-default btn-sm"> <span class="glyphicon glyphicon-pencil"></span> </a>    
<button type="submit" class="btn btn-default btn-sm" onclick="return confirm('Are you sure?')"> <span class="glyphicon glyphicon-trash"></span> </button>
{!! Form::close() !!}
</td>
</tr>
@endforeach
</tbody>
<tfoot>
<tr>
<th>Fee Code</th>
<th>Fee Name</th>
<th>Amount</th>
<th class="hidden"></th>
<th></th>
</tr>
</tfoot>
</table>
I want to when click my link in row(click hyper-link ) call this #myModel in same page below code and I want accesses click row hidden field value in this code.
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn btn-default" style='float: right;' data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle"></span></button>
<a href="#" class="btn btn-default" style='float: right;'> <span class="glyphicon glyphicon-trash"></span> </a>
<a href="#" class="btn btn-default" style='float: right;'> <span class="glyphicon glyphicon-pencil"></span> </a>
<h4 class="modal-title">Fee Details</h4>
</div>
<!-- text input -->
<div class="modal-body">
<label>Fee Code</label>
***//access hidden field***
{{$fees[***put hidden field value***]->feeCode }}
<input type="text" class="form-control" placeholder="Fee Code " disabled>
<label>Fee Name</label>
<input type="text" class="form-control" placeholder="Fee Name" disabled >
<label>Fee Amount</label>
<input type="number" class="form-control" placeholder="Fee Name" disabled >
<label>Fee Description</label>
<textarea class="form-control" rows="3" placeholder="Fee Description" disabled></textarea>
<br/><br/><label>Internal Details</label>
<div class="row">
<div class="col-sm-6">
<label>Added By</label>
<input type="text" class="form-control" placeholder="Fee Added By " disabled>
<label>Updated </label>
<div class="form-group">
<div class="input-group date" id="#">
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-sm-6">
<label>Staff Code</label>
<input type="text" class="form-control" placeholder="Fee Staff Code " disabled>
<label>Added </label>
<div class="form-group">
<div class="input-group date" id="#" >
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Full Code:
@extends('layouts.app')
@section('slide_bar')
@include('layouts.master_entry_slide_bar')
@endsection
@section('content')
<section class="content-header">
<h1>Fee<small> Details</small></h1>
</section>
<br/>
<!-- Main content -->
<section class="content-fluid">
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-body">
<table id="example1" class="table table-bordered table-striped">
<col width='auto'>
<col width='auto'>
<col width='auto'>
<col width='100'>
<thead>
<tr>
<th>Fee Code</th>
<th>Fee Name</th>
<th>Amount</th>
<th class="hidden"></th>
<th><p id='buttons'><a href="{{ route('fee-detail.create')}}" class="btn btn-success"><strong> Add New Fee Details   </strong> <span class="glyphicon glyphicon-plus"></span> </a> </p></th>
</tr>
</thead>
<tbody>
<?php $i = 0; ?>
@foreach ($fees as $fee)
<tr>
<td><a href="#" class="" data-toggle="modal" data-target="#myModal" > {{ $fee->feeCode }} </a></td>
<td><a href="#" class="" data-toggle="modal"> {{ $fee->feeName }} </a></td>
<td>{{$fee->amount}}</td>
<td class="hidden" value="detailId">{{ $i++ }}</td>
<td align='center'>
{!! Form::open(['method' => 'DELETE', 'route'=>['fee-detail.destroy',$fee->id]]) !!}
<a href="{{route('fee-detail.edit',$fee->id)}}" class="btn btn-default btn-sm"> <span class="glyphicon glyphicon-pencil"></span> </a>    
<button type="submit" class="btn btn-default btn-sm" onclick="return confirm('Are you sure?')"> <span class="glyphicon glyphicon-trash"></span> </button>
{!! Form::close() !!}
</td>
</tr>
@endforeach
</tbody>
<tfoot>
<tr>
<th>Fee Code</th>
<th>Fee Name</th>
<th>Amount</th>
<th class="hidden"></th>
<th></th>
</tr>
</tfoot>
</table>
</div><!-- /.box-body -->
</div><!-- /.box -->
</div><!-- /.col -->
</div><!-- /.row -->
</section><!-- /.content -->
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn btn-default" style='float: right;' data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle"></span></button>
<a href="#" class="btn btn-default" style='float: right;'> <span class="glyphicon glyphicon-trash"></span> </a>
<a href="#" class="btn btn-default" style='float: right;'> <span class="glyphicon glyphicon-pencil"></span> </a>
<h4 class="modal-title">Fee Details</h4>
</div>
<!-- text input -->
<div class="modal-body">
<label>Fee Code</label>
{{$fees[0]->feeCode }}
<input type="text" class="form-control" placeholder="Fee Code " disabled>
<label>Fee Name</label>
<input type="text" class="form-control" placeholder="Fee Name" disabled >
<label>Fee Amount</label>
<input type="number" class="form-control" placeholder="Fee Name" disabled >
<label>Fee Description</label>
<textarea class="form-control" rows="3" placeholder="Fee Description" disabled></textarea>
<br/><br/><label>Internal Details</label>
<div class="row">
<div class="col-sm-6">
<label>Added By</label>
<input type="text" class="form-control" placeholder="Fee Added By " disabled>
<label>Updated </label>
<div class="form-group">
<div class="input-group date" id="#">
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-sm-6">
<label>Staff Code</label>
<input type="text" class="form-control" placeholder="Fee Staff Code " disabled>
<label>Added </label>
<div class="form-group">
<div class="input-group date" id="#" >
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var name = document.getElementById("master_entry");
document.getElementById("master_entry").className = "active";
var slide_bar_element = document.getElementById("fd_menu");
document.getElementById("fd_menu").className = "active";
</script>
@endsection
You can put input with readonly
attribute true and apply some style to it ( border:none;
) to remove input appearance!
After that make JavaScript function in onclick of href tag get value of that inputs! you can open modal with JavaScript too!
function test(){ $('#myModal').modal('toggle'); $('#rowValue').empty().append($("#inputID").val()); }
.inputStyle{ border:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <table> <tr> <td><a onclick="test()" ><input type="text" readonly="true" class="inputStyle" id="inputID" value="your value " /> </a></td> </tr> </table> <!-- Modal --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> <p id="rowValue"></p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.