У меня есть код, в котором мне нужно ввести свои контактные данные от клиента и вывести данные из базы данных 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>";
}
Web