laravel-无法从modal获取数据id

Question

我是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">&times;</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();
}
}
});

});

Answer 1

@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">&times;</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();
}
}
});
});