Выбор источника данных с php

Question

Я пытался составить таблицу описания для своего сайта, и я закончил передний конец javascript html/css, но я был смущен тем, как сделать бэкенд mysql/php работы. Я раньше не использовал datalist, и кто-то предложил использовать его. Я был хорошо знаком с формами сообщений, но никогда не делился. Как вы думаете, я мог бы захватить эту информацию, если бы внутри нее был каталон.

Это мой код 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, поскольку они оба берут теги опций, чтобы заполнить список. Хотя вы используете тип ввода = «текст», он будет действовать как элемент выбора и может быть доступен с помощью 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>

Вы можете получить значение элемента ввода, или получить «выбранный» атрибут вы хотите. Надеюсь это поможет! Пожалуйста, оцените, спасибо.