Как правильно отправить значение переменной из JS на php с помощью Axios?
index.php:
<?php
require_once 'connect.php';
$account = mysqli_query($connect, "SELECT * FROM `userBankAccount`");
$account = mysqli_fetch_all($account);
$expenses = mysqli_query($connect, "SELECT * FROM `Expenses`");
$expenses = mysqli_fetch_all($expenses);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CoinKeeper</title>
</head>
<body>
<form id="myForm" method="POST" action="update.php">
<input type="number" name='value' id="myInput">
<select name="expenses">
<?php
foreach ($expenses as $expense) {
$expense_id = $expense[0];
$expense_name = $expense[1];
echo '<option value="' . $expense_id . '">'. $expense_name .'</option>';
}
?>
</select>
<button type="submit">Сохранить</button>
<br>
<div id = 'btnsAndInputs'>
<button type="button" id="new">Задать новый счет</button>
<button type="button" id="clearExpenses">Очистить траты</button>
<button type="button" id="addNewExpenses">Добавить новый вид трат</button>
<br>
</div>
<br>
<table>
<tbody id = "output">
<tr>
<th>
ID
</th>
<th>
Cost type
</th>
<th>
Expenses for type
</th>
</tr>
<?php
echo $account[0][0] . "$";
if ($_SESSION['flag'] == true) {
echo "У вас недостаточно средств";
}
foreach ($expenses as $expense):
$i++;
?>
<tr >
<td><?= $expense[0]?></td>
<td><?= $expense[1]?></td>
<td><?= $expense[2]. "$"?></td>
<td><a href="update.php?deleteId=<?= $i ?>">Удалить</a></td>
<td><a class="change" href="update.php?changeId=<?= $i ?>">Изменить</a></td>
</tr>
<?php endforeach;
var_dump($_POST['changeId']);
?>
</tbody>
</table>
</form>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="script.js"></script>
</body>
</html>
update.php
<?php
require_once "connect.php";
$account = mysqli_query($connect, "SELECT * FROM `userBankAccount`");
$account = mysqli_fetch_all($account);
$expenses = mysqli_query($connect, "SELECT * FROM `Expenses`");
$expenses = mysqli_fetch_all($expenses);
var_dump($_POST['asd']);
var_dump($_POST['changed']);
if (isset($_POST['changed'])) {
var_dump($_POST['changed']);
}
if (isset($_POST['newAccount'])) {
$newAccountValue = $_POST['newAccount'];
mysqli_query($connect, "UPDATE `userBankAccount` SET `account` = '$newAccountValue' WHERE 1");
}
if (isset($_POST['addNewExpenses'])) {
$sql = "INSERT INTO Expenses (cost_type, expenses_for_type) VALUES ('".$_POST['addNewExpenses']."', 0)";
mysqli_query($connect, $sql);
}
if (isset($_GET['deleteId'])) {
$id = $_GET['deleteId'];
mysqli_query($connect, "DELETE FROM Expenses WHERE id = $id");
mysqli_query($connect, "SET @count = 0");
mysqli_query($connect, "UPDATE Expenses SET id = @count:= @count + 1");
mysqli_query($connect, "ALTER TABLE Expenses AUTO_INCREMENT = 1");
}
if($_POST['value'] > 0) {
if($account[0][0] < $_POST['value']) {
$_SESSION['flag'] = true;
}
else {
$selected_expense_id = $_POST['expenses'];
$selected_expense = mysqli_query($connect, "SELECT * FROM `Expenses` WHERE `id` = $selected_expense_id");
$selected_expense = mysqli_fetch_array($selected_expense);
$expenses_for_type = $selected_expense['expenses_for_type'] + $_POST['value'];
mysqli_query($connect, "UPDATE `Expenses` SET `expenses_for_type` = $expenses_for_type WHERE `id` = $selected_expense_id");
mysqli_query($connect, "UPDATE userBankAccount SET account = account - '" . $_POST['value'] . "' WHERE 1");
$_SESSION['flag'] = false;
}}
// header('Location: index.php');
// exit;
?>
connection.php
<?php
session_start();
$connect = mysqli_connect('localhost','root','','CoinKeeper');
if(!$connect) {
die('Ошибка');
}
?>
script.js:
let form = document.querySelector('form');
let mainInput = document.querySelector('input');
let newAccount = document.getElementById('new');
let clearExpenses = document.getElementById('clearExpenses');
let addNewExpenses = document.getElementById('addNewExpenses');
let btnsAndInputs = document.getElementById('btnsAndInputs');
let secondInput = null;
let thirdInput = null;
const changes = document.getElementsByClassName('change');
let id;
for (let i = 0; i < changes.length; i++) {
changes[i].addEventListener('click', function(event) {
event.preventDefault(); // предотвращаем переход по ссылке
if (thirdInput) {
// Если input уже создан, то удаляем его
thirdInput.remove();
thirdInput = null;
} else {
thirdInput = document.createElement('input');
const tr = this.parentNode.parentNode; // получаем родительский элемент (строку таблицы)
const td = document.createElement('td'); // создаем новый элемент td
td.appendChild(thirdInput = document.createElement('input')); // добавляем текст в новый элемент
tr.insertBefore(td, this.parentNode.nextSibling); // вставляем новый элемент после ячейки с ссылкой
thirdInput.setAttribute("placeholder", "Введите измененную сумму");
thirdInput.setAttribute("name", "changed");
thirdInput.setAttribute("id", "changed");
id = tr.getElementsByTagName("td")[0].innerText.trim();
console.log(id);
axios.post('update.php', {
'id': id,
}).then(function(res) {
console.log(res)
}).catch(function(error){
console.log(error)
})
}});
}
newAccount.addEventListener('click', function(event) {
if (secondInput) {
// Если input уже создан, то удаляем его
secondInput.remove();
secondInput = null;
} else {
// Если input еще не создан, то создаем его
secondInput = document.createElement('input');
btnsAndInputs.appendChild(secondInput);
secondInput.setAttribute("name", "newAccount");
secondInput.setAttribute("id", "newAccount");
secondInput.setAttribute("placeholder", "Введите новый счет");
secondInput.setAttribute("type", "number");
}
});
addNewExpenses.addEventListener('click', function(event) {
if (secondInput) {
// Если input уже создан, то удаляем его
secondInput.remove();
secondInput = null;
} else {
// Если input еще не создан, то создаем его
secondInput = document.createElement('input');
btnsAndInputs.appendChild(secondInput);
secondInput.setAttribute("name", "addNewExpenses");
secondInput.setAttribute("id", "addNewExpenses");
secondInput.setAttribute("placeholder", "Введите новый вид трат");
}
});
form.addEventListener('submit', function(event) {
event.preventDefault;
let value = new FormData(form).get('value');
console.log(value);
axios.post('update.php', {
'value': value,
}).then(function(res) {
console.log(res)
}).catch(function(error){
console.log(error)
})
});
Не могу отправить ID в PHP
id = tr.getElementsByTagName("td")[0].innerText.trim();
console.log(id);
Здесь
axios.post('update.php', {
'id': id,
}).then(function(res) {
console.log(res)
}).catch(function(error){
console.log(error)
})
Источник: Stack Overflow на русском