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”，但它将像select元素一样，可以使用Javascript / jQuery访问值。

if(name != 'home') {
    $('header').removeClass('colourful');
    $('ul#navlist li a').removeClass('colourful');
} else {        
    $('#section0').load('index.html #slider');
    $('header').addClass('colourful');
    $('ul#navlist li a').addClass('colourful');
}

您可以获取input元素的值，或获取所需的“selected”属性。希望这可以帮助！请评价，谢谢。

用php进行Datalist选择

1 个答案: