Default tags are not inserted into MySQL server

linchet · November 8, 2023, 3:43pm

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}')

Thallius · November 8, 2023, 4:29pm

Shouldn’t it be dataSet instead of dataset in the JSPart?

droopsnoot · November 8, 2023, 6:08pm

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?

m_hutley · November 8, 2023, 7:33pm

Especially values separated by an HTML tag…

linchet · November 9, 2023, 3:05am

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

m_hutley · November 9, 2023, 8:46am

there’s no ‘name’ attribute in that input.

Nothing is set with the name “tags”, so what exactly are you expecting PHP to read?

droopsnoot · November 9, 2023, 10:19am

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.

linchet · November 9, 2023, 12:03pm

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

linchet · November 9, 2023, 12:04pm

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

rpg_digital · November 9, 2023, 3:15pm

@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?

linchet · November 9, 2023, 4:07pm

That’s mean you want to say input field will be hidden and will be work.

linchet · November 9, 2023, 4:38pm

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

rpg_digital · November 9, 2023, 6:25pm

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.

m_hutley · November 9, 2023, 6:29pm

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?

rpg_digital · November 9, 2023, 7:08pm

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

m_hutley · November 9, 2023, 7:09pm

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

rpg_digital · November 9, 2023, 7:11pm

I agree, a more semantic approach is needed.

rpg_digital · November 9, 2023, 9:13pm

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?

m_hutley · November 9, 2023, 9:23pm

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

rpg_digital · November 9, 2023, 9:39pm

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.