Default tags are not inserted into MySQL server

PHP
, ,
1

I got a problem when I insert tags into database. New tags are working fine but default tags are not inserted into MySQL database server

JavaScript code:

function setupTagInput(containerSelector) {
  const container = document.querySelector(containerSelector);
  const inputElement = container.querySelector('.tag-input');
  const tagsContainer = container.querySelector('.tags-container');

  const removeTag = (event) => {
    if (event.target.classList.contains('tag-close')) {
      event.target.parentElement.remove();
    }
  };

  const addTag = (value) => {
    const spanElement = document.createElement('span');
    spanElement.innerHTML = `
      <span class="tag-text">${value}</span>
      <span class="tag-close">āŒ«</span>
    `;
    spanElement.classList.add('tag');
    tagsContainer.appendChild(spanElement);
  };

  const handleKeyUp = (event) => {
    if (event.keyCode === 13) {
      const value = inputElement.value.trim();
      if (value) {
        addTag(value);
        inputElement.value = '';
      }
    }
  };

  // Set up the default tags for this container
  const defaultTags = container.dataset.defaultTags ? container.dataset.defaultTags.split(',') : [];
  defaultTags.forEach(tag => {
    addTag(tag);
  });

  // Adding event listeners
  tagsContainer.addEventListener('click', removeTag);
  inputElement.addEventListener('keyup', handleKeyUp);
}

// Set up all tag inputs on the page
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.tag-input-container').forEach(container => {
    setupTagInput(`#${container.id}`);
  });
});

Here is the html code:

<div id="tag-container-1" class="tag-input-container" data-default-tags="java,html,php">
  <div class="input-container">
    <input type="text" placeholder="Type in something..." class="tag-input" />
  </div>
  <div class="tags-container">
    <!-- Tags will be added here -->
  </div>
</div>

<div id="tag-container-2" class="tag-input-container" data-default-tags="css,javascript,ruby">
  <!-- Similar structure to the above -->
</div>

Here is php code:

<?php
 include 'config.php';
   
        if (isset($_POST['submit'])) {
            $tag = IMPLODE("<br>",$_POST['tags']);
$sql = "INSERT INTO host (tag) VALUES ('{$tag}')
2

Shouldnā€™t it be dataSet instead of dataset in the JSPart?

3

Whatā€™s the application? Iā€™m struggling to see where storing multiple values like this in a single column is a good idea.

What is in $_POST when you display it for debugging?

4

Especially values separated by an HTML tagā€¦

5

Actual problem is html codes 1st line data-default-tags values not inserted into MySQL database but new value inset normally

6

thereā€™s no ā€˜nameā€™ attribute in that input.

Nothing is set with the name ā€œtagsā€, so what exactly are you expecting PHP to read?

1 Like
7

Itā€™d be useful to see how the PHP is being called, maybe the Javascript handles that. It seems on the face of it that the issue is in the Javascript not sending all the desired data to the PHP, rather than the PHP having anything wrong, which is sort of why I asked what was in $_POST to narrow it down. If the default tags arenā€™t being sent to PHP in the first place, the post should probably be moved to the Javascript section.

8

Sorry, I did name attribute, Mistake when I put here but I want to some default tags when people visit my page and he can remove it if he wants. Thanks for your reply

9

Could you please advice me how can I add some default tags in JavaScript code?

10

@Thallius It the name that come after data- which is converted to camelCase e.g.

HTML
data-default-tags

JS
dataset.defaultTags

Just from what I am reading here, it seems the key issue is HTML not being formed properly. For starters the use of name tags. Would it not be an idea to flesh out the HTML first?

Would passing in default tags as hidden values be an option? e.g.

<input type="hidden" id='tags-01' name="defaultTags[]" value="java,html,css"`/>

My thinking being keeping it simple and JS fetches out of the equation ā€” if that is what is being proposed. Or is that a horrible idea?

11

Thatā€™s mean you want to say input field will be hidden and will be work.

12

But when I do hidden then no option to wright new tags

13

It was a general question to the others on here, who might be able to better advise.

Your javascript code that adds the tags might have to be amended to work with that, but it seems to me getting the HTML right, is a good start point.

14

So what does your HTML actually look like?

And when you say default tagsā€¦ are they default tags that the user can remove, or justā€¦ this form will always add these tags?

15

So just to help, this is an example of the HTML with the dynamically generated default tags included.

<div id="tag-container-1" class="tag-input-container" data-default-tags="java,html,php">
  <div class="input-container">
    <input type="text" placeholder="Type in something..." class="tag-input">
  </div>
  <div class="tags-container">
    <!-- Default tags dynamically generated in JS from dataset data-default-tags -->
    <!-- Tags can be added or removed through inputting or clicking on the cross icon -->
    <span class="tag">
      <span class="tag-text">java</span>
      <span class="tag-close">āŒ«</span>
    </span>
    <span class="tag">
      <span class="tag-text">html</span>
      <span class="tag-close">āŒ«</span>
    </span>
    <span class="tag">
      <span class="tag-text">php</span>
      <span class="tag-close">āŒ«</span>
    </span>
  </div>
</div>

<div id="tag-container-2" class="tag-input-container" data-default-tags="html,php,javascript">
  <div class="input-container">
    <input type="text" placeholder="Type in something..." class="tag-input">
  </div>
  <div class="tags-container">
    <!-- Default tags dynamically generated in JS from dataset data-default-tags -->
    <!-- Tags can be added or removed through inputting or clicking on the cross icon -->
    <span class="tag">
      <span class="tag-text">html</span>
      <span class="tag-close">āŒ«</span>
    </span>
    <span class="tag">
      <span class="tag-text">php</span>
      <span class="tag-close">āŒ«</span>
    </span>
    <span class="tag">
      <span class="tag-text">javascript</span>
      <span class="tag-close">āŒ«</span>
    </span>
  </div>
</div>

I think what we need to see is the full HTML form e.g. from opening <form> tag to closing </form> tag

16

(especially because those tags in no way constitute a form submission.)

1 Like
17

I agree, a more semantic approach is needed.

18

Just throwing this out there.

<div id="tag-container-01" class="tag-input-container" data-default-tags="java,html,php">
  <div class="input-container">
    <input type="text" placeholder="Type in tag name..." class="tag-input">
  </div>
  <div class="tags-container">
    <div class="tag">
      <output name="tags-01[]" value="java">Java</output>
      <button type="button" class="btn btn-delete" aria-label="delete">š„‚</button>
    </div>
    <div class="tag">
      <output name="tags-01[]" value="html">HTML</output>
      <button type="button" class="btn btn-delete" aria-label="delete">š„‚</button>
    </div>
    <div class="tag">
      <output name="tags-01[]" value="php">PHP</output>
      <button type="button" class="btn btn-delete" aria-label="delete">š„‚</button>
    </div>
  </div>
</div>

This does raise a question for me. Why are we using Javascript to generate the HTML for these default tags? Where does default tags come from? Could this not be rendered using PHP in the first place?

19

Presumably addTag() is also tied to a button somewhere, and the code is just being reused.

20

addTag is currently tied to input and hitting enter.

I guess given that you can add and remove tags, that having the one dynamically generated template in JS for both default and custom tags makes sense.