我如何使一个javascript弹出输入字段在php laravel?

Question

我试图使一个弹出模块，一旦一个按钮被点击，它显示了一些字段，如姓名等，用户可以填写和保存弹出。然而，我试着这样做，但我似乎不能把它们联系在一起。我不确定是否有人可以给我指示在哪里我应该把html css和javascript?

这是视图页。

@extends('layouts.adminmaster')
@section('section')
<div class="container paddingTop20">
<h1>Negombo View Places</h1>
<hr>
<div class="row">
<div id="date-picker-example" class="col-xs-3">
<form action="{{ route('admin.place.submit') }}" method="POST" id="form1" style="
padding: 7px;
margin-left: 15px;
justify-content: flex-end;
text-shadow: 0 0 black;
float: right;
">
@csrf
<input type="date" id="fDate" name="startDate" value="{{ $startDate ?? '' }}">
<input type="date" id="tDate" name="endDate" value="{{ $endDate ?? '' }}">  
<input type="reset" value="Reset">
<input type="submit" value="Submit">  
</form>

</div>
<div class="col-sm-12">  
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Place ID</th> 
<th>Place Name</th>
<th>Coordinates (Umbrella)</th>
<th>Coordinates (N)</th>
<th>Coordinates (E)</th>
<th>Map Name</th>
<th>Availabilty</th>
@if (Auth::user()->role == "admin")
<th>Action</th>
@endif
<th>Quick Book</th>
</tr>
</thead>
<div id="preloader"></div>
<tbody id="hidden_table_processing">
@foreach ($places ?? '' as $place)
<tr>
<td>{{ $place->place_id }}</td>
<td>{{ $place->place_name }}</td>
<td>L({{ $place->co_xl }}, {{ $place->co_yl }})</td>
<td>{{ $place->coordsn }}</td>
<td>{{ $place->coordse }}</td>
<td>{{ $place->map_name }}</td>

<td>

@if ($place->status==0)
<span style="color: green">Available</span>
@endif
@if ($place->status==-1)
<span style="color: gray"> Not Available </span>
@endif
@if ($place->status==2)
<span  style="color: red"> Booked </span>
@endif
</td>

@if (Auth::user()->role == "admin")
<td> <a href="{{ route('admin.place.edit', $place->place_id) }}">Edit</a> /
@if ($place->status == -1)
<a href="{{ route('admin.place.changestatus', $place->place_id) }}">Activate</a>
@else
<a href="{{ route('admin.place.changestatus', $place->place_id) }}">Deactivate</a>

@endif
</td>
@endif
<td>
@if ($place->status==0)
<span></span>
// THIS IS THE BUTTON WHERE ONCE CLICKED THE POPUP SHOULD SHOW UP
<button type="button" class="btn btn-success dashboardcardbodystyle2" data-toggle="modal" data-target="#myModal"></button>
// END 
@endif
@if ($place->status==-1)
<span>Book</span>
@endif
@if ($place->status==2)
<span>Booked</span>
@endif
</td>
</tr>
@endforeach
</tbody>
</table>
<div id="loader_space"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>
<script>
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
</script>
<script>

$('.input-daterange input').each(function() {
$(this).datepicker('clearDates');
});
</script>

<script>   
var startDate = document.getElementById('fDate').value;
var endDate = document.getElementById('tDate').value;
document.write(startDate);
document.write(endDate);
paceOptions = {
ajax: true,
document: true,
eventLag: false
};
Pace.on('done', function() {
$('#preloader').delay(100).fadeOut(500);
document.getElementById("loader_space").style.display = "none";
$('#hidden_table_processing').fadeIn(200);
});
</script>
</div>
</div>
</div>
@endsection

Answer 1

你可以这样做

<table class="table table-striped table-nowrap custom-table mb-0 " id="tblAllOrder">
<thead>
<tr>
<th>Price (&pound;)</th>
<th>Status</th>
</tr>
</thead>
<tbody>
@foreach($orderList as $result)
<tr>                                
<td>{{$result->id}}</td>
<td>
<a href="#" data-toggle="modal" data-target="#project-details">{{$output[0]}} </br> {{$output[1]}}</a>
</td>
@endforeach
</tbody>
</table>

然后在section结束的地方添加model

<div class="modal right fade" id="project-details" tabindex="-1" role="dialog" aria-modal="true">
<div class="modal-dialog" role="document">
<button type="button" class="close md-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<div class="modal-content" style="overflow-y: auto;">
<div class="modal-header">
<button type="button" class="close xs-close" data-dismiss="modal">×</button>
<div class="row w-100">
<div class="col-md-7 account d-flex">
Order Detail 
</div>
</div>
</div>
<div class="orderDetail"> Order Detail  </div>
</div><!-- modal-content -->
</div><!-- modal-dialog -->
</div><!-- modal -->

现在，当你点击锚标记每次它将打开这个模型。