Как вставить данные флажка с полями ввода Laravel?

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

<div class = "form-check">
 <input class = "form-check-input fighting_style" name = "txt_fightingStyle[]" type = "checkbox" value = "MMA" id = "MMA">
 <label class = "form-check-label" for = "flexCheckDefault">
 MMA
</label>

<section class = "fighiting_value" id = "MMA_input" style = "display: none;">
<div class = "row">
<div class = "col-3">
 <div class = "mb-3">
 <label for = "exampleFormControlInput1" class = "form-label text-dark">WIN</label>
<input type = "text" class = "form-control  fights txt_win"
             name = "txt_win[]" onblur = "totalFights()" id = "txt-win" placeholder = "">
</div>
</div>

<div class = "col-3">
   <div class = "mb-3">
    <label for = "exampleFormControlInput1" class = "form-label text-dark">LOSS </label>
  <input type = "text" class = "form-control fights txt_loss" data-points = "75"
                                                           name = "txt_loss[]" onblur = "totalFights()" id = "txt-loss" placeholder = "">

</div>
</div>
<div class = "col-3">
 <div class = "mb-3">
    <label for = "exampleFormControlInput1" class = "form-label text-dark">DRAW</label>
<input type = "text" class = "form-control fights txt_draw" data-points = "150"
                                                           name = "txt_draw[]" onblur = "totalFights()" id = "txt-draw" placeholder = "">

  </div>
 </div>
 </div>
 </section>
</div>
Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
1
0
65
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Изменить видимость полей ввода в первом элементе <section>, следующем за установленным флажком, можно с помощью следующего:

document.querySelectorAll("input[type=checkbox]").forEach(cb=>cb.addEventListener("click",ev=>{
 let sibl=(cb.closest("label")??cb).nextElementSibling;
 while(sibl&&!sibl.matches("section"))
  sibl=sibl.nextElementSibling; 
 sibl.style.display=ev.target.checked?"":"none";
}));

const inps=[...document.querySelectorAll("input")];
document.querySelector("button").onclick=flds=>{
  let data=inps.reduce((a,e)=>{
   if (e.type= = "checkbox")
    a.push(flds=[e.checked&&e.value]);
   else
    flds.push(e.value);
   return a;
  },[]);
  fetch("https://jsonplaceholder.typicode.com/users/",{method:"POST",headers:{'Content-Type':'application/json'},body:JSON.stringify(data)})
  .then(r=>r.json()).then(console.info)
}
<div class = "form-check">
 <input class = "form-check-input fighting_style" name = "txt_fightingStyle[]" type = "checkbox" value = "MMA" id = "MMA">
 <label class = "form-check-label" for = "MMA">
 MMA
</label>
<section class = "fighting_value" id = "MMA_input" style = "display: none;">
<div class = "row">
<div class = "col-3">
 <div class = "mb-3">
 <label for = "exampleFormControlInput1" class = "form-label text-dark">WIN</label>
<input type = "text" class = "form-control  fights txt_win"
         name = "txt_win[]" id = "txt-win" value = "w1">
</div>
</div>

<div class = "col-3">
   <div class = "mb-3">
<label for = "exampleFormControlInput1" class = "form-label text-dark">LOSS </label>
  <input type = "text" class = "form-control fights txt_loss" data-points = "75"
                                                       name = "txt_loss[]" id = "txt-loss" value = "l1">

</div>
</div>
<div class = "col-3">
 <div class = "mb-3">
<label for = "exampleFormControlInput1" class = "form-label text-dark">DRAW</label>
<input type = "text" class = "form-control fights txt_draw" data-points = "150"
                                                       name = "txt_draw[]" value = "d1">

  </div>
 </div>
 </div>
 </section><br>
<label class = "form-check-label"><input class = "form-check-input fighting_style" name = "txt_fightingStyle[]" type = "checkbox" value = "MMA2">
 MMA2
</label>
<section class = "fighting_value" style = "display:none;">
<div class = "row">
<div class = "col-3">
 <div class = "mb-3">
 <label class = "form-label text-dark">WIN2
<input type = "text" class = "form-control  fights txt_win"
         name = "txt_win[]" value = "w2"></label>
</div>
</div>

<div class = "col-3">
   <div class = "mb-3">
<label class = "form-label text-dark">LOSS2
  <input type = "text" class = "form-control fights txt_loss" data-points = "75"
                                                       name = "txt_loss[]" value = "l2"></label>

</div>
</div>
<div class = "col-3">
 <div class = "mb-3">
<label class = "form-label text-dark">DRAW2
<input type = "text" class = "form-control fights txt_draw" data-points = "150"
                                                       name = "txt_draw[]" value = "d2"></label>

  </div>
 </div>
 </div>
 </section>
</div>
<button>save</button>

Приведенный выше фрагмент работает без ссылки на какие-либо атрибуты id. Его можно применять к любому количеству систем флажков/полей ввода.

Я добавил еще немного кода, показывающего, как после нажатия на кнопку «сохранить» все поля ввода могут быть собраны в массив массивов (две записи по четыре столбца в каждой), который затем отправляется в какой-то бэкенд. где серверный сценарий затем помещает данные в базу данных с помощью подходящего оператора SQL INSERT. Для демонстрации я использовал общедоступный фиктивный API.

Я хочу вставить в базу данных. Есть 4 стиля столбца, выигрыш, проигрыш и ничья. Я могу выбрать оба из них, и заданное значение вставить все в 4 столбца, но только в 2 строки.

MM_Chanchal 21.01.2023 01:22

Большое спасибо, я решаю эту проблему.

MM_Chanchal 23.01.2023 02:58

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

MM_Chanchal 24.01.2023 09:28

Другие вопросы по теме