I am trying to get the value of radio button acceptTechnical. The radio button is inside a modal box which is inside a table in laravel but I keep getting the first value of the radio button instead of the particular one selected.
The value of the table is a loop.
Here is the my blade
<div class="row">
@foreach($service as $row)
@if($row->full_name != "")
<div class="col-lg-6 col-md-12">
<div class="single-applicants-card">
<div class="image">
@if(!empty($row->profile_image))
<img src="{{asset('storage/'.$row->profile_image)}}" alt="image">
@else
<a href="#"><img src="{{asset('icon_02.jpeg')}}" alt="image"></a>
@endif
</div>
<div class="content" style="flex-wrap: wrap">
@if(empty($row->identity))
<h3>
<a href="#">{{$row->full_name}}</a>
</h3>
@else
<h3>
<a href="{{url('user/'.$row->identity)}}" target="_blank">{{$row->full_name}}</a>
</h3>
<h6>
{{ ucfirst($row->availability) }}
</h6>
<span>Status:</span>
<span style="font-weight: 600; color: black">
@if($row->approved == 0)
Pending
@elseif($row->approved == 1)
Screened
@elseif($row->approved == 2)
Rejected
@elseif($row->approved == 4)
Job Completed
@else
Accepted
@endif
</span>
<div style="font-size: 14px">
{{ \App\Models\EmployerJobs::where("id", $row->job_id)->value("job_title")}}
</div>
<div style="font-size: 14px">
{{ Carbon\Carbon::parse($row->updated_at)->format("d M, Y")}}
</div>
@endif
<ul class="job-info">
<li><i class="ri-phone-fill"></i> {{$row->phone}}</li>
<li><i class="ri-time-line"></i> {{$row->work_experience}} years</li>
</ul>
<div class="applicants-footer">
<ul class="option-list">
@if(isset($row->user_id))
<?php $sam = \App\Models\User::where("id", \Illuminate\Support\Facades\Auth::user()->id)->value("is_admin") == 1 ? $row->identity :$row->applicant_identity; ?>
<li><a target="_blank" href="{{ url("/user/". $sam )}}" class="btn btn-sm text-white" style="background-color: #ffa836 !important;" data-bs-toggle="tooltip" data-bs-placement="top" title="View Profile" type="button">View</a></li>
@endif
@if(\App\Models\User::where("id", \Illuminate\Support\Facades\Auth::user()->id)->value("is_admin") == 1)
@if(isset($row->user_id))
<li><a href="{{ route("admin.application.approve",["job_id" => $row->job_id, "user_id" => $row->user_id, "employer_id" => $row->employer_id]) }}" class="option-btn d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" title="Assign Candidate" type="button"><i class="ri-todo-fill"></i></a></li>
<li><a href="{{ url('job/'. \App\Models\EmployerJobs::where("id", $row->job_id)->value("url")) }}" class="option-btn d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" title="View Job" type="button"><i class="ri-arrow-go-forward-fill"></i></a></li>
<li><a href="{{ route("admin.application.reject-application",["job_id" => $row->job_id, "user_id" => $row->user_id, "employer_id" => $row->employer_id]) }}" class="option-btn d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" title="Reject Application" type="button"><i class="ri-close-line"></i></a></li>
@endif
@endif
@if(\App\Models\User::where("id", \Illuminate\Support\Facades\Auth::user()->id)->value("is_admin") == 2)
@if(isset($row->user_id))
<li>
<button data-bs-toggle="modal" data-bs-target="#RejectModal{{ $row->identity }}" class="btn btn-sm text-white" style="background-color: #ffa836 !important;" type="button">Reject</button>
</li>
<li>
<button data-bs-toggle="modal" data-bs-target="#AcceptModal{{ $row->identity }}" class="btn btn-sm text-white" style="background-color: #ffa836 !important;" data-bs-placement="top" type="button">Accept</button>
</li>
@endif
@endif
</ul>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="AcceptModal{{ $row->identity }}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div>
<h5 class="modal-title" id="exampleModalLabel">Kindly endorse this Candidate</h5>
<span>Rate this candidate's skills from 1-10</span>
</div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form action="{{ route("employer.candidate.approved") }}" method="post">
@csrf
<div class="modal-body">
@csrf
<div class="modal-body">
<input type="hidden" name="id" id="identity{{ $row->identity}}" value="{{ $row->identity }}" />
<input type="hidden" name="job_id" id="id" value="{{ $row->job_id }}" />
<input type="hidden" name="employer_id" id="id" value="{{ $row->employer_id }}" />
The is the radio button I am trying to get its value
<div class="form-check">
<input class="form-check-input" value="{{ $row->identity }}" type="radio" name="acceptTechnical" id="accept{{$row->identity}}">
<label class="form-check-label" for="flexRadioDefault1">
Technical Skills
</label>
<div id="accept-wait">Please wait...</div>
<div id="acceptSkills{{ $row->identity }}"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" id="ok" class="btn btn-success">Accept</button>
</div>
</form>
</div>
</div>
</div>
@endif
@endforeach
</div>
This is my jquery
<script>
$(document).ready(function() {
$('input[name="acceptTechnical"]').prop('checked', false);
$('input[type=radio][name=acceptTechnical]').change(function() {
const id = $(this).val()
let skills = [];
let scores = ""
$("div#accept-wait").css("display", "block")
axios.get('/employer/get-user-tech-skills?id=' + id )
.then(function (response) {
$("#acceptSkills" + id).html(response.data)
console.log(response.data);
})
.catch(function (error) {
// handle error
$("#acceptSkills" + id).html("")
console.log(error);
})
.finally(function () {
// always executed
$("div#accept-wait").css("display", "none")
});
});
});
</script>
In your javascript, replace this line
const id = $(this).val();
By this line
const id = $('input[type=radio][name=acceptTechnical]:checked').val();