0

I faced an issue since I can't get a just created element with a PHP script.

I have a list of tags loaded with PHP:

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

Thanks to AJAX I append another element inside the 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);
      }
    });
  });
});

Thus I have a new 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>

But once I submit the form, only the existed value is added to DB.

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

Looks like that PHP can't handle a new value without the page reloaded. At the same time, I add 

checked="checked"

dynamically and that works just perfect.

Can anyone explain me how to force PHP to see the newly created elements (the elements that were appended to the existed HTML by the means of jQuery).

Thanks everyone for the assistance.

upd:

This is how I add the "checked"

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

This is how the form looks like:

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

May be the reason is that I use two separate functions in jQuery for "checked"??!?!

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

and 

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

I do it because onclick doesn't work for the newly created elements.

P.s: It doesn't matter where I put a newly created "li"...

Thank everyone for participation. I've created a new page and did everything again. And now it works. Now I need to find the mistake in my full code.

Alex Cardo
  • 365
  • 2
  • 4
  • 14
  • Did you add the checked="checked" or checked="true" ? –  Apr 12 '20 at 10:36
  • It's working now. when you add the element dynamically, you should have the checked option or let you click on checkbox. and then let you test it and let me know. –  Apr 12 '20 at 10:37
  • – Alex Cardo Apr 12 '20 at 10:41
  • if you checked on the checkbox manually, does it work ? –  Apr 12 '20 at 10:42
  • 1
    PHP does not know how an element is created. What have you tried to check for differences in the markup? – Nico Haase Apr 12 '20 at 10:43
  • Everything work perfectly. I click the checkbox on a newly created element and jQuery add checked="checked". But when I submit the form only previously created tags are added to the database – Alex Cardo Apr 12 '20 at 10:44
  • Forget about PHP/databases - this question has nothing to do with them, and everything to do with whiche form inputs are used in building the post data. You can check for the presence/absence of the problem simply by looking in the dev tools network log when the form is submitted. – Mitya Apr 12 '20 at 10:54
  • Utkanos, I don't see anything in the dev tools network tab. – Alex Cardo Apr 12 '20 at 11:00
  • Then the filter options in the network console aren't showing XHR requests. – Mitya Apr 13 '20 at 11:17

3 Answers3

0

Name attributes can be arrays so the name isn't the issue - HTML input arrays

I think the reason is as you mentioned, the checked attribute needs to be added to all of the inputs otherwise the value won't be sent in the request.

If the inputs were text or number for example, then the checked attribute wouldn't be needed.

The same would apply to radio inputs, or the selected attribute for a select menu.

TLDR, add checked:

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

That is of course, if it should be automatically checked and not reliant on the user checking it manually.

I may have to change this answer based on if this is a traditional form submission or an ajax submission not using a form.

martincarlin87
  • 10,848
  • 24
  • 98
  • 145
  • Doesn't matter whether I add checked="checked" by the means of jQuery or add the checkbox manually, when I click the submit button, only the checkbox values that were rendered in the initially created HTML go to my database. – Alex Cardo Apr 12 '20 at 10:51
  • Everything looks natural and evident, but doesn't work :-( – Alex Cardo Apr 12 '20 at 10:53
  • could you add more to your question, the form markup and anything else such as, there's no `.new-tags` in your question so where do the dynamically added tags get appended to? My guess would be `new-tags` is a class on the `ul` element but the question doesn't show that. – martincarlin87 Apr 12 '20 at 10:55
  • Previously I created a new
      and put a newly created
    • element inside it. But I've been trying to add the new
    • inside the old
        . But still it doesn't work. I feel that the solution should be simple, but can't define it.
      • – Alex Cardo Apr 12 '20 at 10:58
  • In any case whether it be inside
      or not, the new
    • is inside the
    – Alex Cardo Apr 12 '20 at 11:02
  • thanks, will take a look with the update, one thing I have noticed is the closing tag is missing for the first `ul` - not sure if a typo in the question or if it actually exists in your code, just something that might cause issues so worth pointing out. – martincarlin87 Apr 12 '20 at 11:31
  • Do you do anything else inside your click handlers for the checkboxes? The setting of the checked property will be handled by the browser so you shouldn't need them unless you are doing other things as well. For the even to work with dynamically created checkboxes and to use one listener, use `$(document).on('click', '.adm-checkbox', function() {` instead - https://stackoverflow.com/questions/1359018/how-do-i-attach-events-to-dynamic-html-elements-with-jquery – martincarlin87 Apr 12 '20 at 11:35