jquery - laravel - 无法从模态获取数据ID
问题描述
我是 Laravel 和 jQuery/Ajax 的初学者。我想从模态按钮中获取“数据 ID”,但是当我在控制台中看到“未定义”问题时,我可以顺便获取“名称”值。我的问题在哪里?
我的刀片是:
@foreach($doctors as $doctor)
<a href="javascript:void(0)" type="button" class="btn btn-primary" data-toggle="modal" data-target="#appointmentModal" ></a>
@endforeach
<div class="modal fade" id="appointmentModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Appointment</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="addAppointment" novalidate>
@csrf
<div class="mb-3">
<label>Name</label>
<input type="text" class="form-control" id="nameR" name="name" required>
</div>
<button type="submit" class="btn btn-primary" data-id="{{$doctor->id}}">Save</button>
</form>
</div>
</div>
</div>
</div>
我的 jQuery/Ajax 是:
$('#addAppointment').submit(function(e){
e.preventDefault();
var id = $(this).attr('data-id');
let name = $("#nameR").val();
console.log(id);
$.ajax({
url: "{{route('add_appointmentPost')}}",
type:"POST",
data:{
name:name,
_token:'{{ csrf_token() }}',
},
success:function(response){
if(response){
$('#addAppointment')[0].reset();
}
}
});
});
解决方案
@foreach($doctors as $doctor)
<a href="javascript:void(0)" type="button" class="btn btn-primary openModal" data-id="{{$doctor->id}}"></a>
@endforeach
<div class="modal fade" id="appointmentModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Appointment</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="addAppointment" novalidate>
@csrf
<div class="mb-3">
<label>Name</label>
<input type="text" class="form-control" id="nameR" name="name" required>
</div>
<input type="hidden" id="docterId" />
<button type="submit" class="btn btn-primary">Save</button>
</form>
</div>
</div>
</div>
</div>
$(document).on('click', '.openModal', function () {
var id = $(this).data('id');
$('#docterId').val(id);
$('#appointmentModal').modal('show');
})
$('#addAppointment').submit(function(e){
e.preventDefault();
var id = $('#docterId').val();
let name = $("#nameR").val();
console.log(id);
$.ajax({
url: "{{route('add_appointmentPost')}}",
type:"POST",
data:{
name:name,
_token:'{{ csrf_token() }}',
},
success:function(response){
if(response){
$('#addAppointment')[0].reset();
}
}
});
});
推荐阅读
- selenium - 使用 Selenium Webdriver 在 Salesforce Lightning 中创建自定义对象
- mysql - 有没有办法改变当前用户的密码,为密码引入一个变量?
- webpack - Gitlab Pages - Webpack 项目 - 错误 404
- sql - SQL - 如果其中一列具有空值,则删除行
- java - 如何从 Stream 更改
流式传输 爪哇 8 - php - 如何将响应发送回 AJAX 并继续 php?
- api - 使用 Jenkins Docker 插件动态创建的 Jenkins Slave 在作业执行过程中被删除
- c# - .net core 3.0 app.UseExceptionHandler 没有在错误方法中达到断点
- c# - 使用 Castle.Windsor 和 Polly 响应 429 异常(节流)
- python - 使用变量值的 SQL