Question

当单击“填写auth用户信息”复选框时，我想用auth用户信息（姓名和姓氏）填充字段，但它不起作用。如果单击复选框不起作用，则不会使用auth用户信息填充字段。

我现在拥有的是https://jsfiddle.net/LahL166o/2/ auth用户信息显示在此范围

中

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner-message">
  <button class="save">Save</button>
</div>

问题应该是如何使用laravel获取jquery中的票证类型名称，因为因为它不是带有“name”或“surname”的id，结果ID是：“namegeneral_1”和“surnamegeneral_1”。

laravel form：

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

Html结果：

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

jQuery的：

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

Answer 1

我认为您可能遇到许多阻碍此工作的问题。我认为大多数都源于你的循环并且意外地将相同的id分配给许多项目。

但是，上面显示的代码也有点令人困惑 - 刀片文件应该生成与您显示的HTML不同的内容。我假设这是后来的迭代？我会说刀片文件，因为它更容易看到，因为它更小。

为了帮助实现这一目标，我建议如下：首先，您只有一个用户，请移动它：

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

在循环之外（或将其放在$ loop-＆gt;第一个块中），以便#userData id仅在DOM中分配一次。

接下来从输入中删除单数id #name。 #surname也是如此。你拥有它的方式，它不断分配多个具有相同ID的id字段。 name="participant_name[]"很好，可以在POST上使用。

目前尚不清楚您是否需要用户名＆amp;姓氏填充所有输入字段，或者只是在他检查框的地方附近。如果要将它们全部填充，请在循环中的两个输入中添加一个类，如'firstName'和'surname'。然后用你的jquery轻松填充所有内容：

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

但是，如果您希望仅填充选中的那个，则会更复杂（但并不难）。您需要在输入集旁边的每个循环中都有一个复选框。跟踪输入字段的右侧复选框的最简单方法是将一个迭代器添加到循环中（分配它然后迭代：$x ++）然后在数据字段中的复选框上使用它（例如data-count={{$x}} ）现在在输入上添加一个id，如下所示：

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

从这里，添加到您的jquery代码，通过从复选框上的data-count字段获取计数来检查检查了哪个框。然后，您可以通过id：

识别正确的输入以添加用户名

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

希望这有帮助

选中复选框时，使用auth用户信息填充字段

1 个答案: