fill fields with auth user info when checkbox is checked - php

Question

When the checkbox "Fill with auth user info" is clicked I want to populate the fields with the auth user info (name and surname) but it's not working. When the checkboxes are clicked is not working the fields are not populated with the auth user info.
What I have for now is in, https://jsfiddle.net/LahL166o/2/ the auth user info appears in this span
<span id="userData" data-name="John"
data-surname="Keane"></span>
The issue should be how to get the ticket type name in the jquery with laravel because as it is ther is no id with "name" or "surname" the result ids are: "namegeneral_1" and "surnamegeneral_1".
laravel form:
<form method="post" id="step1" action="">
{{csrf_field()}}
#if (!empty($allParticipants))
#if($allParticipants == 1)
<p>Fill all fields.</p>
#foreach($selectedRtypes as $k => $selectedRtype)
#foreach(range(1,$selectedRtype['quantity']) as $val)
<h6 class="text-heading-blue mb-3 pb-2 font-weight-bold">Participant - {{$val}} - {{$k}} </h6>
#if ($loop->first)
<div class="form-check">
<input class="form-check-input" id="fill_auth_info" type="checkbox">
<label class="form-check-label d-flex align-items-center" for="exampleRadios1">
<span class="mr-auto">Fill with auth user info.</span>
</label>
</div>
#endif
<span id="userData" data-name="{{ auth()->user()->name }}"
data-surname="{{ auth()->user()->surname }}"></span>
<div class="form-group font-size-sm">
<label for="participant_name" class="text-gray">Name</label>
<input type="text" id="name" name="participant_name[]" required class="form-control" value="">
</div>
<div class="form-group font-size-sm">
<label for="participant_surname" class="text-gray">Surname</label>
<input type="text" id="surname" required class="form-control" name="participant_surname[]" value="">
</div>
#endforeach
#endforeach
#endif
#else
<p>Is not necessary additional info.</p>
#endif
<input type="submit" href="#step2free"
id="goToStep2Free" class="btn btn-primary btn float-right next-step" value="Go to step 2"/>
</form>
Html result:
<form method="post" id="step1form" action="">
<input type="hidden" name="_token" value="">
<h6 class="text-heading-blue mb-3 pb-2 font-weight-bold">Participant - 1 - general </h6>
<div class="form-check">
<input class="form-check-input" name="fill_with_auth_info" id="fill_auth_infogeneral_1"
data-id="general_1" type="checkbox">
<label class="form-check-label d-flex align-items-center"
for="fill_auth_info1">
<span class="mr-auto">Fill with auth user info.</span>
</label>
</div>
<span id="userData" data-name="John"
data-surname="Keane"></span>
<div class="form-group font-size-sm">
<label for="namegeral_1" class="text-gray">Name</label>
<input type="text" id="namegeral_1" name="participant_name[]" required class="form-control" value="">
</div>
<div class="form-group font-size-sm">
<label for="surnamegeneral_1" class="text-gray">Surname</label>
<input type="text" id="surnamegeneral_1" required class="form-control" name="participant_surname[]" value="">
</div>
<input type="hidden" name="all_participants" value="1" />
<input type="hidden" name="rtypes[]" value="1"/>
<h6 class="text-heading-blue mb-3 pb-2 font-weight-bold">Participant - 1 - re </h6>
<div class="form-check">
<input class="form-check-input" name="fill_with_auth_info" id="fill_auth_infore_1"
data-id="re_1" type="checkbox">
<label class="form-check-label d-flex align-items-center"
for="fill_auth_info1">
<span class="mr-auto">Fill with auth user info.</span>
</label>
</div>
<span id="userData" data-name="John"
data-surname="Keane"></span>
<div class="form-group font-size-sm">
<label for="namere_1" class="text-gray">Name</label>
<input type="text" id="namere_1" name="participant_name[]" required class="form-control" value="">
</div>
<div class="form-group font-size-sm">
<label for="surnamere_1" class="text-gray">Surname</label>
<input type="text" id="surnamere_1" required class="form-control" name="participant_surname[]" value="">
</div>
<input type="hidden" name="all_participants" value="1" />
<input type="hidden" name="rtypes[]" value="2"/>
<input type="submit" href="#step2free"
id="goToStep2Free" class="btn btn-primary btn float-right next-step" value="Go to step 2"/>
</form>
jQuery:
let userData = $('#userData');
$("input[name = 'fill_with_auth_info']").on('click', function(e) {
let checked = $(this).is(':checked');
if (checked) {
$('#name').val(userData.data('name'));
$('#surname').val(userData.data('surname'));
} else {
$('#name').val(userData.data(''));
$('#surname').val(userData.data(''));
}
});

Answer 1

I think you may have a number of issues that are preventing this from working. I think most are stemming from your looping and accidentally assigning the same id to many items.
However, the code displayed above is a bit confusing as well - the blade file should produce something different from the HTML you show. I assume this was a later iteration? I will speak to the blade file, as it is easier to see, since its smaller.
To help get this working, I suggest the following: First, you have only one user, so move this:
<span id="userData" data-name="{{ auth()->user()->name }}"
data-surname="{{ auth()->user()->surname }}"></span>
outside of the loop (or put it inside the $loop->first block), so that the #userData id is only assigned once in the DOM.
Next remove the singular id #name from the input. Same for the #surname. The way you have it, it keeps assigning multiple id fields with the same id. The name="participant_name[]" is fine, and will work on POST.
It's not clear if you want the user name & surname to populate ALL the input fields, or just one near the place he checks the box. If you want to populate them all, add a class to the two inputs in the loop like 'firstName' and 'surname'. Then its easy to populate everything with your jquery:
$('.firstName').val(userData.data('name'));
$('.surname').val(userData.data('surname'));
If, however, you wish to populate only the one that is checked, it is a little more complex (but not hard). You will need to have a check box within each loop next to the set of inputs. Easiest way to track the right checkbox against the input fields is to add an iterator into the loop (assign it and then iterate: $x ++) and then use this on the checkbox in a data field (eg data-count={{$x}} ) and now add an id onto the inputs like so:
id = 'name{{$x}}'
id = 'surname{{$x}}'
From here, add to your jquery code to check which box was checked by getting the count from the data-count field on the checkbox. Then, you can identify the right inputs to add the User's name into by id:
var count = $(this).data('count');
$('#name'+count).val(userData.data('name'));
$('#surname'+count).val(userData.data('surname'));
Hope this helps