Вернуться




Как вывести данные из DataBase, скопировать все вводимые данные из формы, чтобы отправить их себе, включая произведение веса*шт в режиме реального времени



У меня есть код, в котором мне нужно ввести свои контактные данные от клиента и вывести данные из базы данных MySQL, которая создает новые строки в таблице.

Также есть дополнительная функция, которая должна быть внутри кода, но я не знаю, как решить эту проблему. Мне нужно подсчитать количество частей элемента x, их вес в режиме реального времени, чтобы показать клиенту общий вес, который будет иметь заказ.

Проблема в том, что я не знаю, как заставить клиента видеть это всякий раз, когда они меняют значение Pieces в <input>.

Наконец, данные из формы и таблицы должны быть отправлены сотруднику по электронной почте.

Код PHP:

<html>

  <head>

    <meta charset="utf-8" />

    <meta name="calculator" content="width=device-width, initial-scale=1"/>

        <title>Тест</title>

        <link rel="stylesheet" href="style.css" >

  </head>

    <body>

        <?php include 'calc.php'; ?>

    <form method="post" action="sendform.php"><br>

    

     <center>

     <h1>ТЕСТ</h1>

        <input id="Name" type="text" placeholder="<?= $form['FIRMA']; ?>" class="form-contact" required><br>

         <input id="Adres" type="text" placeholder="<?= $form['ADRES']; ?>" class="form-contact" required><br>

          <input id="Email" type="email" placeholder="<?= $form['EMAIL']; ?>" class="form-contact" required><br>

           <input id="Country" type="text" placeholder="<?= $form['COUNTRY']; ?>" class="form-contact" value="" size="1" pattern="[0-9]{2}" maxlength="2" required>

            <input id="Phone" type="text" placeholder="<?= $form['PHONE']; ?>" class="form-contact" pattern="[0-9]{9}" maxlength="9" required>

            <br>

  <table class="table-responsive" border="1">

    <thead>

        <tr>

            <th><?= $form['PRODUCTS']; ?></th>

            <th><?= $form['CATALOG']; ?></th>

            <th><?= $form['DESC']; ?></th>

            <th><?= $form['WEIGHT']; ?></th>

            <th><?= $form['TWEIGHT']; ?></th>

        <br>

        </tr>

 

    </thead>

      <tbody>

      <?php

                $dbhost = "localhost";

                $dbuser = "root";

                $dbpass = "1234";

                $dbname = "data";

                $connection = mysqli_connect($dbhost, $dbuser, $dbpass, $dbname);

                if ($connection->connect_error) {

                    die("Connection failed: " . $connection->connect_error);

                }

                $sql = 'SELECT * FROM `elements`';

                $result = mysqli_query($connection, $sql);

                    if (mysqli_num_rows($result) > 0) {

                        while($row = mysqli_fetch_assoc($result)) {

                            echo "<tr><td>".'<input class="pcs-input" min=0 maxlength="3" value=0 size="2px" style="background-color: white;" name="inputs[]">';

                            echo "</td><td>Nr. "  . $row["pcode"] . "</td><td> " . $row["fullname"]. "</td><td> " . $row["weight"] . "kg</td><td><div id='sumWeight'></div></td></tr>";

                        }

                        } else {

                        echo "0 Results";

                    }

                mysqli_close($connection);

      ?>

      </tbody>

    </table>

            <div id="totalWeight">totalWeight</div>

        <br><button name="submit" type="submit" value="Send" class="form-button">Send</button>

        </center>

    </form>

    </body>

  </html>

 

Код JavaScript

<script type="text/javascript">

    document.addEventListener(function()

    input.OnChange = calculateForm();

    function calculateForm() {

        var totalWeight = 0;

        $(".pcs-input").each(function () {

            var pcs = parseInt($(this).val());

            if (pcs < 0) {

                pcs = 0;

            } else {

                var weight = parseFloat($(this).data('weight'));

                var sumWeight = pcs * weight;

                totalWeight += sumWeight;

            }

        });

       document.write(totalWeight.toFixed(2) + ' kg');

      }

    )};

</script>

 

Я думаю, проблема может быть в переносе данных из таблицы/базы данных в переменную?

<?php

$dbhost = "localhost";

        $dbuser = "root";

        $dbpass = "1234";

        $dbname = "data";

        $connection = mysqli_connect($dbhost, $dbuser, $dbpass, $dbname);

        if ($connection->connect_error) {

              die("Connection failed: " . $connection->connect_error);

        }

        $sql = 'SELECT * FROM `elements`';

        $result = mysqli_query($connection, $sql);

        if (mysqli_num_rows($result) > 0) {

             while($row = mysqli_fetch_assoc($result)) {

             echo "<tr><td>"."<input type='number' class='pcs-input' id='inputs' data-weight=".$row["weight"];

             echo "></input>";

             echo "</td><td>Nr. "  . $row["pcode"] . "</td><td> " . $row["fullname"]. "</td><td> " . $row["weight"] . "kg</td><td><div id='sum-Weight2'></div></td></tr>";

             }

         } else {

             echo "0 Results";

         }

        mysqli_close($connection);

?>

 

    </tbody>

</table>

<script type="text/javascript">

   function calculateForm() {

      var totalWeight = 0;

      $(".pcs-input").each(function () {

         var pcs = parseInt($(this).val());

         if (pcs < 0) {

            pcs = 0;

       } else {

         var weight = parseFloat($(this).data('weight'));

         var sumWeight = pcs * weight;

         $(this).parent().parent().find('.sum-weight2').html(sumWeight.toFixed(2) + ' kg');

         totalWeight += sumWeight;

       };

       $('.totalGewicht').html(totalWeight.toFixed(2) + ' kg');

      }

  )};

</script>

       <div id="totalWeight"></div>

        <br><button name="submit" type="submit" value="Send" class="form-button">Send</button>

        </center>

</form>

 

Ответ 1

В целом с вашим кодом довольно много проблем, которые можно обобщить следующим образом:

  • недопустимый HTML (например, повторяющиеся идентификаторы, неправильно записанный input элемент, незакрытые строки таблицы, незакрытые атрибуты данных)

  • чрезмерно сложный HTML

  • опечатки или регистр строк (например, W вместо  w)

  • неправильные селекторы CSS в JavaScript

  • отсутствие исходных данных по умолчанию (например, если в каком-либо из полей ввода нет чисел, расчет завершится ошибкой, потому что попытка добавить пустое значение к другому числу приводит к NaN (не числу)

  • расчеты не выполняется при загрузке страницы, поэтому данные отсутствуют, пока пользователь что-то не изменит (что неверно, если клиент  хочет увидеть текущий вес перед изменением каких-либо значений)

Этот клиентский код демонстрирует HTML, необходимый для создания вашего PHP, и правильный код JavaScript/jQuery для выполнения вычислений и отображения результатов:

$(function() {

  $(".pcs-input").change(calculateForm); // установка обработчика события

  function calculateForm() {

    var totalWeight = 0;

    $(".pcs-input").each(function() {

      var pcs = parseInt($(this).val());

      if (pcs < 0) {

        pcs = 0;

      } 

      else {

        var weight = parseFloat($(this).data('weight'));

        var sumWeight = pcs * weight;

        $(this).closest("tr").find('.sum-weight2').html(sumWeight.toFixed(2) + ' kg');

        totalWeight += sumWeight;

      };

      $('#totalWeight').html(totalWeight.toFixed(2) + ' kg');

    })

  };

  calculateForm(); //вызывается при первой загрузке страницы, чтобы установить начальные данные

});

 

table {

  border-collapse:collapse;

}

td {

  border: solid 1px black;

  padding: 5px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>

  <tbody>

    <tr>

      <td><input type='number' class='pcs-input' data-weight='3' value='1' /></td>

      <td>Nr. 14536</td>

      <td>Тест 1</td>

      <td>3 кг</td>

      <td class='sum-weight2'></td>

    </tr>

    <tr>

      <td><input type='number' class='pcs-input' data-weight='15' value='1' /></td>

      <td>Nr. 23431</td>

      <td>Тест 2</td>

      <td>15 кг</td>

      <td class='sum-weight2'></td>

    </tr>

    <tr>

      <td><input type='number' class='pcs-input' data-weight='4' value='1' /></td>

      <td>Nr. 33125</td>

      <td>Тест 3</td>

      <td>4 кг</td>

      <td class='sum-weight2'></td>

    </tr>

  </tbody>

</table>

Вес: <span id="totalWeight"></span>

 

Помните, что вам нужно переместить фокус с текстового поля на другой элемент (с помощью мыши или клавиши табуляции) до того, как сработает событие «changed». (Это также возможно, если вы используете кнопки вверх/вниз в поле ввода.)

Таким образом, это означает, что помимо редактирования JavaScript, как я показал, вам необходимо изменить PHP, чтобы он выводил строки таблицы HTML со структурой и данными, которые я продемонстрировал выше.

Это должно работать:

while($row = mysqli_fetch_assoc($result)) {

  echo "<tr><td>"."<input type='number' class='pcs-input' data-weight='".$row["weight"]."' value='1' /></td>";

  echo "<td>Nr. ".

$row["pcode"]."</td><td>".$row["fullname"]."</td><td>".$row["weight"]."kg</td><td class='sum-weight2'></td></tr>";

}



Если вам понравилась эта статья поделитесь ею с друзьями, тем самым вы помогаете нам развиваться и добавлять всё больше интересного и полезного контента!




Cхожие статьи





Какой хостинг выбрать для сайта

Какой хостинг выбрать для сайта

Для беспроблемного функционирования сайта на просторах интернета необходимо ...

15 Февраля 2021    Web

Как и на чём лучше писать сайты?

Как и на чём лучше писать сайты?

Каждый начинающий сайтостроитель мечтает создать свой уникальный сайт на ко ...

21 Февраля 2021    Web

Ищем качественный и недорогой хостинг? Тогда вам сюда

Ищем качественный и недорогой хостинг? Тогда вам сюда

Рано или поздно всем вебмастерам приходится искать хостинг для своего проек ...

21 Февраля 2021    Web