Copy large data from excel column to HTML form [closed]

I am looking for solution where one can copy a column from Excel and paste directly into HTML form that have similar drag select features like Excel. Currently the application is fully functional where I have used the text input and they have to manually enter the data for each cell (I am using PHP). It has around 100 cells, and the data is being stored in the MySQL. Now I was asked to build a functionality where one can copy paste data directly from Excel. Strictly No CSV upload enter image description here

I was searching for solutions, and found some suggestions about handsontable, but could not find any solutions how I can use the handsontable data to put into MYSQL database.

Any suggestions or help will be highly appreciated.

Answer

If you would like a fancy solution I think the best option is to use Handsontable, take a look at this part of the documentation, you can use the event “afterChange” to check what was modified and include it in the database. (https://handsontable.com/docs/saving-data/#overview).

If you would like a simple solution, you can use onpaste event to get the copied values and paste them on the input elements, something like this:

const cells = document.querySelectorAll('.cell');

cells.forEach(cell => {
  cell.addEventListener('paste', handlePaste );
})

function handlePaste(event){
    event.preventDefault();
    const plainTextLines = event.clipboardData.getData('text');
    const lines = plainTextLines.split(/rn/g)
    const currentRowIndex = parseInt(event.target.getAttribute('data-row-index'), 10); 
    const total = cells.length;
    const pasteTotal = lines.length;
    
    for(let i = currentRowIndex; i < total; i++){
      const valueToPaste = lines[i - currentRowIndex];
      if(valueToPaste){
         cells[i].value = valueToPaste;
      }
    }
    document.querySelector('#result').innerHTML = plainTextLines;
  }
input{
  display:block;
  margin-bottom: 10px;
}
<input type="text" class="cell" data-row-index="0" >
<input type="text" class="cell" data-row-index="1" >
<input type="text" class="cell" data-row-index="2" >
<input type="text" class="cell" data-row-index="3" >
<input type="text" class="cell" data-row-index="4" >
<input type="text" class="cell" data-row-index="5" >
<div id="result"></div>