javascript - 使用 php 进行数据列表选择

Question

我试图为我的网站制作一个描述表，我完成了前端 javascript html/css但我对如何制作后端感到困惑mysql/php工作。 我从未使用过 datalist之前有人建议我使用它。我很熟悉发布表单，但从未使用过 div。如果里面有数据列表，你认为我如何获取这些信息。

这是我的 javascript 代码。

<script>

     var onEditClick = function() {
      this.parentNode.classList.add('inEditMode');

      var content = this.parentNode.querySelector('p');
      content.setAttribute('contentEditable', true);
      content.focus();
    };

    var onSaveClick = function() {
      var parent = this.parentNode;

      var content = parent.querySelector('p');
      content.setAttribute('contentEditable', false);

      var xhr = new XMLHttpRequest();
      var params = "description="+ content.textContent;

      xhr.open("POST", parent.dataset.post, true);

      xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      xhr.setRequestHeader("Content-length", params.length);
      xhr.setRequestHeader("Connection", "close");

      xhr.send(params);

      xhr.onreadystatechange = function() {
        if(xhr.readyState === 4) {
          if (xhr.status === 200) {
            alert('Saved');
          } else {
            alert('Not saved');
          }
            }

        parent.classList.remove('inEditMode');
      };
    };

    var onCancelClick = function() {
      var parent = this.parentNode;

      parent.classList.remove('inEditMode');
      var content = parent.querySelector('p');
      content.setAttribute('contentEditable', false);
        content.blur();  
    };

    document.addEventListener('DOMContentLoaded', 
    function() {
      var buttonEdit = document.createElement('button');
      var buttonSave = document.createElement('button');
      var buttonCancel = document.createElement('button');
      buttonEdit.textContent = 'Edit';
      buttonEdit.classList.add('edit');
      buttonSave.textContent = 'Save';
      buttonSave.classList.add('save');
      buttonCancel.textContent = 'Cancel';
      buttonCancel.classList.add('cancel');

      var editable = document.querySelectorAll('.editable p');
      Array.prototype.forEach.call(editable, function(single) {
        var edit = buttonEdit.cloneNode(true);
        var save = buttonSave.cloneNode(true);
        var cancel = buttonCancel.cloneNode(true);

        edit.addEventListener('click', onEditClick, false);
        save.addEventListener('click', onSaveClick, false);
        cancel.addEventListener('click', onCancelClick, false);

        single.parentNode.appendChild(edit);
        single.parentNode.appendChild(save);
        single.parentNode.appendChild(cancel);
      });
    }, false);

    </script>

我的 html 是 <div class='editable' data-id='123' data-post='/endpoint/save'> 端点保存是一个占位符，但我可以将其转换为表单吗，或者我将如何使用 php 选择它？将描述值插入数据库？

Answer 1

Datalists 的工作方式类似于 SELECT 列表，因为它们都采用选项标签来填充列表。虽然您使用的是 input type="text"，但它的作用类似于选择元素，并且可以使用 Javascript/jQuery 访问值。

<input type="text" id="theContact" class="theContact" name="theContact" list="contactlist" size="35" placeholder="none" />
<datalist id="contactlist">
  <?php
    // Populate the options here, in a logic loop grabbing the data...
    echo '<option value="' . $value . '">' . $value . '</option>';
  ?>
</datalist>

您可以获取输入元素的值，或者获取您想要的“selected”属性。希望这可以帮助!请评分，谢谢。