PHP не видит новые элементы, созданные с jQuery и AJAX

Question

Я столкнулся с проблемой, так как не могу получить только что созданный элемент со скриптом PHP.

У меня есть список тегов, загруженных с PHP:

<ul>
  <li>
    <input class="adm-checkbox" type="checkbox" name="check_list_tags[]" value="4">
    Some tag
  <li>
<ul>

Благодаря AJAX Я добавляю еще один элемент в UL

jQuery(document).ready(function($) {
  $('.add-tag-btn').click(function(event) {
    var tag_title = $('.tag-search').val();
    $.ajax({
      url: 'add-tag.php',
      type: 'POST',
      dataType: 'json',
      data: {
        'tag_title': tag_title
      },
      success:function(result){
        $('.tag-search').val('');
        $('.new-tags').append('<li><input class="adm-checkbox" type="checkbox" name="check_list_tags[]" value="'+result.tag_id+'">'+tag_title+'</li>');

        console.log(result.tag_id);
      }
    });
  });
});

Таким образом, у меня есть новый UL

<ul>
  <li><input class="adm-checkbox" type="checkbox" name="check_list_tags[]" value="4">Value #4</li>
  <li><input class="adm-checkbox" type="checkbox" name="check_list_tags[]" value="5">Value #5 (new value generated with jQuery and AJAX)</li>
</ul>

Но как только я отправляю форму, добавляется только существующее значение в БД.

if (isset($_POST['submit'])) {
    ....
    bla bla bla
    foreach ($_POST['check_list_tags'] as $value) {
        $arr2[] = $value;
        }
    bla bla bal
}

Похоже, что PHP не может обработать новое значение без перезагрузки страницы. В то же время я динамически добавляю

checked="checked"

, и это работает просто идеально.

Может кто-нибудь объяснить мне, как заставить PHP видеть вновь созданные элементы (элементы, которые были добавлено к существующему HTML с помощью jQuery).

Спасибо всем за помощь.

upd:

Вот как я добавляю "проверено" "

jQuery(document).ready(function($) {
  $('.adm-checkbox').click(function(event) {
    if (this.checked) {
      this.setAttribute("checked", "checked");
      console.log('checked');
    } else {
      this.removeAttribute("checked");
    }
  });
});

Вот так выглядит форма:

<form class="" action="<?php echo $router->url ?>" method="post" enctype="multipart/form-data">
.....
<ul class="new-tags">

</ul>
<ul>
   <?php foreach ($admin->getAdmTags() as $value): ?>
      <li><input class="adm-checkbox" type="checkbox" name="check_list_tags[]" value="<?php echo $value['id'] ?>"><?php echo $value['title'] ?></li>
    <?php endforeach; ?>
<ul>
</form>

UPD # 2:

Возможно, причина в том, что я использую две отдельные функции в jQuery для «проверено» ??!?!

$('.adm-checkbox').click(function(event) {
    if (this.checked) {
      this.setAttribute("checked", "checked");
      console.log('checked');
    } else {
      this.removeAttribute("checked");
    }
  });

и

$('.adm-tags').on('click', '.adm-checkbox', function(event) {
    if (this.checked) {
      this.setAttribute("checked", "checked");
      console.log('checked');
    } else {
      this.removeAttribute("checked");
    }
  });

Я делаю это, потому что onclick не работает для вновь созданных элементов.

PS: Неважно, куда я положу только что созданный "li" ...

Спасибо всем за участие. Я создал новую страницу и сделал все снова. И теперь это работает. Теперь мне нужно найти ошибку в моем полном коде.

Answer 1

Атрибуты имени могут быть массивами, поэтому имя не является проблемой - HTML входные массивы

Я думаю, причина в том, что вы упомянули, атрибут checked должен будет добавлен ко всем входам, иначе значение не будет отправлено в запросе.

Если бы входные данные были, например, текстовыми или числовыми, то атрибут checked не понадобился бы.

То же самое относится к радиовходам или атрибуту selected для меню выбора.

TLDR, добавьте checked:

$('.new-tags').append('<li><input class="adm-checkbox" type="checkbox" name="check_list_tags[]" value="'+result.tag_id+'" checked>'+tag_title+'</li>');

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

Возможно, мне придется изменить этот ответ в зависимости от того, является ли это традиционной отправкой формы или ajax отправкой без использования формы.

Answer 2

Я не знаю, как закрыть топи c. Работает с вновь созданным кодом. Как только я обнаружу ошибку в своем полном коде, я отвечу объяснением моей ошибки.

Answer 3

Когда вы отправляете форму через POST или GET, каждому входу требуется уникальное имя. Из вашего кода похоже, что вы добавляете новый элемент ввода с атрибутом имени, значение которого совпадает со значением уже существующего элемента.

Я подозреваю, что если вы добавите новый элемент с уникальным значением имени, оно должно работать. Вы можете включить это в свой код JavaScript, имея счетчик числа входных элементов с именем X, а затем добавить число. И вам нужно сделать аналогичную вещь в вашем PHP.

Edit: Очевидно, вы можете иметь атрибуты имени с тем же именем, если вы используете '[]' после имени, спасибо @ martincarlin87