MYSQLI Вставить данные из таблицы HTML

Question

Я использую JS, который выполняет некоторые вычисления и прогнозирует дату на основе уже извлеченных данных и отображает результаты расчетов в виде таблицы HTML.

Как я могу, например, с щелчок кнопки - скопируйте эти данные из HTML и вставьте их в таблицу в моей базе данных, используя php и mysqli?

function forecastClient() {

    const bankHolidays = new Set([
        Date.parse("April, 19 2019"),
        Date.parse("April, 22 2019"),
        Date.parse("May, 6 2019"),
        Date.parse("May, 27 2019"),
        Date.parse("August, 26 2019"),
        Date.parse("December, 25 2019"),
        Date.parse("December, 26 2019"),
        Date.parse("January, 1 2020"),
    ]);

    function addWorkingDays(date, days) {
        function workingDay(date) {
            while (true) {
                let day = (date.getDay() + 1) % 7;
                if (day < 2) date.setDate(date.getDate() + 2 - day);
                if (!bankHolidays.has(date.getTime())) break;
                date.setDate(date.getDate() + 1);
            }
        }
        workingDay(date);
        while (days--) {
            date.setDate(date.getDate() + 1);
            workingDay(date);
        }
        return date;
    }

    const dateStr = document.querySelector("#startdate").value.replace(/-/g, "/");
    const date = new Date(dateStr);
    addWorkingDays(date, 0); // Make sure it is a working day
    const td = document.querySelectorAll("#forecast td.date-forecast");
    for (let i = 0; i < 12; i++) {
        td[i * 2].textContent = date.toDateString();
        td[i * 2 + 1].textContent = addWorkingDays(date, 27).toDateString();
        addWorkingDays(date, 1);
    }
};

function myfunction() {
    event.preventDefault();
    doForecast(0);
}

function doForecast(index) {
    var nextIndex = index + 1;
    var startBalance = null;
    var additionalAmount = (document.getElementById("additionalAmount").value != '') ? parseFloat(document.getElementById("additionalAmount").value) : null;
    var additionalMonth = parseFloat(document.getElementById("additionalMonth").value);
  
    var additionalAmount2 = (document.getElementById("additionalAmount2").value != '') ? parseFloat(document.getElementById("additionalAmount2").value) : null;
    var additionalMonth2 = parseFloat(document.getElementById("additionalMonth2").value);
  
    var additionalAmount3 = (document.getElementById("additionalAmount3").value != '') ? parseFloat(document.getElementById("additionalAmount3").value) : null;
    var additionalMonth3 = parseFloat(document.getElementById("additionalMonth3").value);
  
    if (index == 0) {
        startBalance = parseFloat(document.getElementById("startBalance" + index).value);
        if( additionalMonth == 1 && additionalAmount != undefined){
          startBalance += additionalAmount;
        }
        if( additionalMonth2 == 1 && additionalAmount2 != undefined){
          startBalance += additionalAmount2;
        }
        if( additionalMonth3 == 1 && additionalAmount3 != undefined){
          startBalance += additionalAmount3;
        }
    } else {
        startBalance = parseFloat(document.getElementById("amount" + index).innerHTML);
        if( additionalMonth > 1 && additionalMonth == (index + 1) && additionalAmount != undefined){
          startBalance += additionalAmount;
        }
        if( additionalMonth2 > 1 && additionalMonth2 == (index + 1) && additionalAmount2 != undefined){
          startBalance += additionalAmount2;
        }
        if( additionalMonth3 > 1 && additionalMonth3 == (index + 1) && additionalAmount3 != undefined){
          startBalance += additionalAmount3;
        }
    }

    var interestRate = parseFloat(document.getElementById("interestRate").value);
    var fee = parseFloat(document.getElementById("fee").value);
    parseFloat(document.getElementById("interestRate").value);
    var vat = parseFloat(document.getElementById("vat").value);

    interestRate = interestRate / 100;
    fee = fee / 100;
    vat = vat / 100;

    var simpleInt = startBalance * interestRate;
    var profitfee = simpleInt * fee;
    var afterVAT = profitfee * vat;
    var amount = (startBalance + simpleInt - profitfee - afterVAT).toFixed(2)

    var stringIndex = "" + (nextIndex);
    document.getElementById("startBalance" + stringIndex).innerHTML = startBalance.toFixed(2);
    document.getElementById("simpleInt" + stringIndex).innerHTML = simpleInt.toFixed(2);
    document.getElementById("profitfee" + stringIndex).innerHTML = profitfee.toFixed(2);
    document.getElementById("afterVAT" + stringIndex).innerHTML = afterVAT.toFixed(2);
    document.getElementById("amount" + stringIndex).innerHTML = amount;
    if (nextIndex < 12) {
        doForecast(nextIndex);
    }
}

function start() {
    forecastClient();
    myfunction();
}

<body onload="start();">

  <div class="form-group col-mb-3">
    <label onkeyup="" for="forecastLive">Live Date: <input value="03/27/2019" id="startdate"></label>

    <label for="startBalance">Start Balance
     <input id="startBalance0" value="1000">  
  </label>
    <input type="hidden" onkeyup="myfunction()" id="interestRate" value="20" />

    <input type="hidden" onkeyup="myfunction()" id="fee" value="30" />

    <input type="hidden" onkeyup="myfunction()" id="vat" value="20" />
  </div>

  <br>

  <div class="form-group col-mb-3">
    <label for="additionalAmount">Aditional Amount
<input onkeyup="myfunction()"  id="additionalAmount" value=""></label>
    <label for="Month">Month
<input onkeyup="myfunction()"  id="additionalMonth" value="">
</label>
    <br >
    <label for="additionalAmount2">Aditional Amount
<input onkeyup="myfunction()"  id="additionalAmount2" value=""></label>
    <label for="Month">Month
<input onkeyup="myfunction()"  id="additionalMonth2" value="">
</label>
    <br >
    <label for="additionalAmount3">Aditional Amount
<input onkeyup="myfunction()"  id="additionalAmount3" value=""></label>
    <label for="Month">Month
<input onkeyup="myfunction()"  id="additionalMonth3" value="">
</label>

    <br>
    <br>

    <style>
      .forecast table,
      .forecast tr,
      .forecast td,
      .forecast th {
        border: 1px solid;
        border-collapse: collapse;
      }
    </style>

    <table class="forecast table table-striped" id="forecast" onload="myfunction()">
      <tr>
        <th scope="col">Month</th>
        <th scope="col">Month Start</th>
        <th scope="col">Investment</th>
        <th scope="col">Return</th>
        <th scope="col">Fee</th>
        <th scope="col">Vat</th>
        <th scope="col">Closing Balance</th>
        <th scope="col">Month End</th>
      </tr>

      <tr>
        <td>1</td>
        <td class="date-forecast"></td>

        <td><span>£</span><span id="startBalance1"></span></td>
        <td><span>£</span><span id="simpleInt1"></span></td>
        <td><span>£</span><span id="profitfee1"></span></td>
        <td><span>£</span><span id="afterVAT1"></span></td>
        <td><span>£</span><span id="amount1"></span></td>
        <td class="date-forecast"></td>
      </tr>

      <tr>
        <td>2</td>
        <td class="date-forecast"></td>
        <td><span>£</span><span id="startBalance2"></span></td>
        <td><span>£</span><span id="simpleInt2"></span></td>
        <td><span>£</span><span id="profitfee2"></span></td>
        <td><span>£</span><span id="afterVAT2"></span></td>
        <td><span>£</span><span id="amount2"></span></td>
        <td class="date-forecast"></td>
      </tr>

      <tr>
        <td>3</td>
        <td class="date-forecast"></td>
        <td><span>£</span><span id="startBalance3"></span></td>
        <td><span>£</span><span id="simpleInt3"></span></td>
        <td><span>£</span><span id="profitfee3"></span></td>
        <td><span>£</span><span id="afterVAT3"></span></td>
        <td><span>£</span><span id="amount3"></span></td>
        <td class="date-forecast"></td>
      </tr>

      <tr>
        <td>4</td>
        <td class="date-forecast"></td>
        <td><span>£</span><span id="startBalance4"></span></td>
        <td><span>£</span><span id="simpleInt4"></span></td>
        <td><span>£</span><span id="profitfee4"></span></td>
        <td><span>£</span><span id="afterVAT4"></span></td>
        <td><span>£</span><span id="amount4"></span></td>
        <td class="date-forecast"></td>
      </tr>

      <tr>
        <td>5</td>
        <td class="date-forecast"></td>
        <td><span>£</span><span id="startBalance5"></span></td>
        <td><span>£</span><span id="simpleInt5"></span></td>
        <td><span>£</span><span id="profitfee5"></span></td>
        <td><span>£</span><span id="afterVAT5"></span></td>
        <td><span>£</span><span id="amount5"></span></td>
        <td class="date-forecast"></td>
      </tr>

      <tr>
        <td>6</td>
        <td class="date-forecast"></td>
        <td><span>£</span><span id="startBalance6"></span></td>
        <td><span>£</span><span id="simpleInt6"></span></td>
        <td><span>£</span><span id="profitfee6"></span></td>
        <td><span>£</span><span id="afterVAT6"></span></td>
        <td><span>£</span><span id="amount6"></span></td>
        <td class="date-forecast"></td>
      </tr>

      <tr>
        <td>7</td>
        <td class="date-forecast"></td>
        <td><span>£</span><span id="startBalance7"></span></td>
        <td><span>£</span><span id="simpleInt7"></span></td>
        <td><span>£</span><span id="profitfee7"></span></td>
        <td><span>£</span><span id="afterVAT7"></span></td>
        <td><span>£</span><span id="amount7"></span></td>
        <td class="date-forecast"></td>
      </tr>

      <tr>
        <td>8</td>
        <td class="date-forecast"></td>
        <td><span>£</span><span id="startBalance8"></span></td>
        <td><span>£</span><span id="simpleInt8"></span></td>
        <td><span>£</span><span id="profitfee8"></span></td>
        <td><span>£</span><span id="afterVAT8"></span></td>
        <td><span>£</span><span id="amount8"></span></td>
        <td class="date-forecast"></td>
      </tr>

      <tr>
        <td>9</td>
        <td class="date-forecast"></td>
        <td><span>£</span><span id="startBalance9"></span></td>
        <td><span>£</span><span id="simpleInt9"></span></td>
        <td><span>£</span><span id="profitfee9"></span></td>
        <td><span>£</span><span id="afterVAT9"></span></td>
        <td><span>£</span><span id="amount9"></span></td>
        <td class="date-forecast"></td>
      </tr>

      <tr>
        <td>10</td>
        <td class="date-forecast"></td>
        <td><span>£</span><span id="startBalance10"></span></td>
        <td><span>£</span><span id="simpleInt10"></span></td>
        <td><span>£</span><span id="profitfee10"></span></td>
        <td><span>£</span><span id="afterVAT10"></span></td>
        <td><span>£</span><span id="amount10"></span></td>
        <td class="date-forecast"></td>
      </tr>

      <tr>
        <td>11</td>
        <td class="date-forecast"></td>
        <td><span>£</span><span id="startBalance11"></span></td>
        <td><span>£</span><span id="simpleInt11"></span></td>
        <td><span>£</span><span id="profitfee11"></span></td>
        <td><span>£</span><span id="afterVAT11"></span></td>
        <td><span>£</span><span id="amount11"></span></td>
        <td class="date-forecast"></td>
      </tr>

      <tr>
        <td>12</td>
        <td class="date-forecast"></td>
        <td><span>£</span><span id="startBalance12"></span></td>
        <td><span>£</span><span id="simpleInt12"></span></td>
        <td><span>£</span><span id="profitfee12"></span></td>
        <td><span>£</span><span id="afterVAT12"></span></td>
        <td><span>£</span><span id="amount12"></span></td>
        <td class="date-forecast"></td>
      </tr>
    </table>

Answer 1

Чтобы вызвать PHP-скрипт из вашего JS-кода, вам нужно использовать AJAX. При нажатии кнопки извлеките значения, которые вы хотите вставить в таблицу, и отправьте данные в свой php-скрипт, используя ajax. Ниже я дал простой код для отправки 4 значений в скрипт php. Если вы хотите отправить больше данных, вы можете указать их в data поле ajax.

$(#yourButtonID).click(function(){      
    var start_balance = $(#startBalance0).val();
    var interestRate = $(#interestRate).val();
    var fee = $(#fee).val();
    var vat = $(#vat).val();
    $.ajax({
        url:"ajax.php",
        type:"POST",
        data:{s_balance:start_balance, i_rate:interestRate, fee:fee, vat:vat}
        success: function(data){
            alert('success');
        }
    });
});

ajax.php

<?php
    $s_balance = $_POST('s_balance');
    $i_rate = $_POST('i_rate');
    $fee = $_POST('fee');
    $vat = $_POST('vat');
    // perform your insertion and echo result you want
?>