заполнить поля с информацией о пользователе аутентификации, когда флажок установлен

Question

Когда установлен флажок «Заполнить информацию о пользователе аутентификации», я хочу заполнить поля информацией о пользователе аутентификации (имя и фамилия), но она не работает. Когда флажки не установлены, поля не заполняются информацией об авторе.

То, что у меня сейчас есть, https://jsfiddle.net/LahL166o/2/ В этом промежутке появляется информация об аутентичном пользователе

 <span id="userData" data-name="John"
        data-surname="Keane"></span>

Проблема должна заключаться в том, как получить имя типа заявки в jquery с laravel, потому что, поскольку это не идентификатор с "name" или "фамилией", идентификаторы результата: "namegeneral_1" и "surnamegeneral_1".

форма Laravel:

  <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:

<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

Я думаю, что у вас может быть ряд проблем, которые мешают этому работать. Я думаю, что большинство происходит из-за вашего зацикливания и случайного присвоения одного и того же идентификатора многим элементам.

Однако приведенный выше код также немного сбивает с толку - блейд-файл должен производить что-то отличное от HTML, который вы показываете. Я полагаю, это была более поздняя итерация? Я поговорю с блейд-файлом, так как его легче увидеть, поскольку он меньше.

Чтобы это работало, я предлагаю следующее: во-первых, у вас есть только один пользователь, поэтому переместите это:

<span id="userData" data-name="{{ auth()->user()->name }}"
                          data-surname="{{ auth()->user()->surname }}"></span>

вне цикла (или поместите его в блок $ loop-> first), чтобы идентификатор #userData назначался в DOM только один раз.

Затем удалите идентификатор единственного числа #name из ввода. То же самое для #surname. Как у вас есть, он продолжает присваивать несколько полей идентификаторов с одинаковым идентификатором. name="participant_name[]" в порядке и будет работать на POST.

Непонятно, хотите ли вы, чтобы имя пользователя и фамилия заполняли ВСЕ поля ввода, или только одно рядом с местом, где он ставит флажок. Если вы хотите заполнить их все, добавьте класс к двум входам в цикле, таким как 'firstName' и 'фамилия'. Тогда легко заполнить все своими jquery:

$('.firstName').val(userData.data('name'));
$('.surname').val(userData.data('surname'));

Если, однако, вы хотите заполнить только тот, который отмечен, это немного сложнее (но не сложно). Вам нужно будет установить флажок в каждом цикле рядом с набором входов. Самый простой способ отследить правильный флажок для полей ввода - добавить итератор в цикл (назначить его, а затем выполнить итерацию: $x ++), а затем использовать этот флажок в поле данных (например, data-count={{$x}}) и добавить идентификатор на входы, например, так:

id = 'name{{$x}}'
id = 'surname{{$x}}'

Отсюда добавьте к своему коду jquery, чтобы проверить , какой флажок был установлен , получив счетчик из поля подсчета данных на флажке. Затем вы можете определить правильные входы для добавления имени пользователя по идентификатору:

var count = $(this).data('count');   
$('#name'+count).val(userData.data('name'));
$('#surname'+count).val(userData.data('surname'));

Надеюсь, это поможет