Генерация нескончаемого к-тва полей и привязка к чекбоксу

Question

Итак, дано:

<input type="checkbox" name="animal[]" value="Кот">
<input type="checkbox" name="animal[]" value="Собака">
<input type="checkbox" name="animal[]" value="Хомяк">

Обработка на пхп и запись в БД

<?php function IsChecked($animal,$value){
    if(!empty($_POST[$animal]))
        {
            foreach($_POST[$animal] as $chkval)
                {
                    if($chkval == $value)
                        {
                            return true;
                        }
                }
        }
        return false;
}

    $arr = array();
    for($i=0; $i < count($animal); $i++)
    {
      $arr[] = $animal[$i];
    }
    $all = join(', ', $arr) . ' ';
if(IsChecked('animal','Кот') || IsChecked('animal','Собака') || IsChecked('animal','Хомяк') 
{
 //запись
}

Тут все понятно. Сложность у меня в следующем:

Я не знаю, как сделать так, чтобы при нажатии на чекбокс, вылазила input форма, куда можно вписать имя животного.
А если собака не одна, а две, нужно две формы.
Как вообще потом обработать данные из форм и понять, где имена собаки, а где имя кота?)) Всем добра, спасибо!

Answer 1

Я не знаю, как сделать так, чтобы при нажатии на чекбокс, вылазила input форма, куда можно вписать имя животного ... А если собака не одна, а две, нужно две формы.

Судя по тому, что вы хотите добавлять несколько котов, нужны не чекбоксы, а просто кнопки, которые будут это делать:

Добавить животное:
<input type="button" value="Кот" target_name="animals[cats][]"/>
<input type="button" value="Собака" target_name="animals[dogs][]"/>
<input type="button" value="Хомяк" target_name="animals[hamsters][]"/>

Ниже форму, куда класть новых животных:

<form method="post" id="animals_form">
    <input type="submit" value="сохранить"/>
</form>

Теперь нужно добавить обработчик этих кнопок. Если особо не заморачиваться, можно написать как-то так:

<script>
// создаем обработчик кликов по кнопкам:
document.querySelectorAll('input[target_name]').forEach(function (elem) {
    elem.addEventListener('click', addNewAnimalInput);
});
// и функцию, которая добавит новый <input>
function addNewAnimalInput(e) {
    let form = document.getElementById('animals_form');
    form.append(document.createElement('br'));
    form.append(document.createTextNode('имя животного (' + e.target.value + ') '));
    let input = document.createElement('input');
    input.setAttribute('name', e.target.getAttribute('target_name'));
    form.append(input);
}
</script>

Теперь в php, вместо того, чтобы зачем-то обрабатывать, нажат ли чекбокс, вы просто проверяете массив $_POST['animals'], в котором отдельно валяются коты, собаки и хомяки.

<?php
if (isset($_POST['animals'])) {
    echo '<pre>' . print_r($_POST['animals'], true) . '</pre>';
}

Собственно, в $_POST['animals'] будет что-то вроде:

array
(
    [cats] => array
        (
            [0] => кошка1
            [1] => кошка1
        )
    [dogs] => array
        (
            [0] => собака
        )
    [hamsters] => array
        (
            [0] => хомяк
        )
)

Answer 2

Ночью луна работает как зеркало для телепатических способностей и весь потенциал не раскрыть, но что-то удалось.

const buttons = document.getElementById("animalsButtons"),
      form = document.getElementById("animalsForm");

const create = tag => document.createElement(tag);

const addInput = event => {

  const { target } = event,
        div = create('div');
        
   div.innerHTML = `
      ${target.getAttribute('animal')}: <input name="animals[${target.name}][]"> <button>Удалить</button>
   `;
   
   div.querySelector("button").addEventListener('click', () => form.removeChild(div))
  
  form.prepend(div);
  
}

[].forEach.call(buttons.children, button => button.addEventListener('click', addInput));

<div id="animalsButtons">
  <button name="cat" animal="Кот">+Кот</button>
  <button name="dog" animal="Собака">+Собака</button>
  <button name="hamster" animal="Хомяк">+Хомяк</button>
</div>

<form action="" method="POST" id="animalsForm">
  <input type="submit" value="Send" />
</form>

БЛОГ НА HUSL

Генерация нескончаемого к-тва полей и привязка к чекбоксу

Ответы (2 шт):