Каким образом можно отобразить два поля ввода при выборе определенного варианта в поле выбора в конкретном элементе на странице?

Как сделать так, чтобы при изменении статуса заявки на обратный звонок в Laravel, появлялись соответствующие инпуты (комментарий, дата и время) для конкретной заявки, а не только для первой? Решение должно быть реализовано при выборе любой заявки на странице, а не только первой.
  • 8 мая 2024 г. 18:20
Ответы на вопрос 2
Для отображения двух полей ввода при выборе определенного варианта в поле выбора, можно использовать JavaScript. 

Пример реализации этого функционала:

```html
<select id="selectOption">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

<div id="inputFields">
  <input type="text" id="input1" style="display:none">
  <input type="text" id="input2" style="display:none">
</div>

<script>
const selectOption = document.getElementById('selectOption');
const input1 = document.getElementById('input1');
const input2 = document.getElementById('input2');

selectOption.addEventListener('change', function() {
  if(selectOption.value === 'option2') {
    input1.style.display = 'block';
    input2.style.display = 'block';
  } else {
    input1.style.display = 'none';
    input2.style.display = 'none';
  }
});
</script>
```

Для реализации появления соответствующих инпутов при изменении статуса заявки на обратный звонок в Laravel для конкретной заявки, можно использовать AJAX запрос при изменении статуса. 

Пример реализации на стороне клиента (JavaScript):

```html
<script>
function showAdditionalFields(id) {
  // Предполагается, что id - идентификатор заявки
  const commentInput = document.getElementById(`commentInput${id}`);
  const dateTimeInput = document.getElementById(`dateTimeInput${id}`);

  commentInput.style.display = 'block';
  dateTimeInput.style.display = 'block';
}
</script>
```

Пример контроллера в Laravel:

```php
public function updateStatus(Request $request, $id) {
  $request->validate([
    'status' => 'required'
  ]);

  $request->user()->requests()->where('id', $id)->update(['status' => $request->status]);

  if($request->status == 'callback') {
    // Вернуть дополнительные поля для конкретной заявки
    return response()->json(['message' => 'Additional fields shown', 'id' => $id]);
  }

  return response()->json(['message' => 'Status updated']);
}
```

Для выполнения AJAX запроса и отображения соответствующих полей для конкретной заявки, необходимо вызвать функцию showAdditionalFields() при успешном обновлении статуса через AJAX и передать идентификатор заявки.
У вас в шаблонизаторе создаётся много html-элементов с одинаковыми id, а это плохо - что и видно как раз на примере вашего обработчика. 
Соответственно, вызов :

const ifCall = document.getElementById('ifCall')

Возвращает первый найденный div#ifCall.
Можно добавлять в атрибут id внутри цикла - текущий индекс цикла: ifCall_1.
А для упрощения связывания элементов в одной «группе» - указывать индекс в атрибуте dataSet:

<select id =“status_1” data-group-id=“1”>…</select>
<div id =“ifCall_1” class=“if-call” data-group-id=“1”>…</div>


У всех ifCall теперь один css-класс - это и правильно, и хорошо.

В js коде извлечь индекс группы можно в поле dataSet элемента:

const groupId = select.dataSet.groupId

Соответственно, искать элемент

querySelector(‘.if-call[data-group-id=${groupId}]’)
Похожие вопросы