Передать переменную HTML ->JS->PHP

@Артемий_124314 · Регистрация: 25.07.2019

Студворк — интернет-сервис помощи студентам

Всем привет!

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

Пока без проверок и т.п. Это локальный хостинг.

Направьте, плиз, как это это возможно реализовать?

Есть код JS:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function upIncome(){
// Здесь забор данных из формы в HTML 
 
    var dy = document.getElementById('year').options.selectedIndex;
    var year = document.getElementById('year').options[dy].text;
    var dm = document.getElementById('month').options.selectedIndex;
    var month = document.getElementById('month').options[dm].text;
  
    
 
    var php = new XMLHttpRequest();
    php.open('POST','income.php',true);
    php.addEventListener('onreadystatechange',function(){
    if ((php.readyState==4) && (php.status==200)){
        document.getElementById("income").innerHTML=php.responseText; 
    }
});
    php.send();
 
    
}

Есть код PHP:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?php
 
 
$server ='127.0.0.1';
$user ='root';
$password ='';
$db ='mysql';
$db_connect = mysqli_connect($server,$user,$password,$db) OR DIE ("ALL ASS");
mysqli_set_charset($db_connect,'utf8');
 
 
 
 
$query ='Select * from `form_income` ';
$result = mysqli_query($db_connect,$query);
 
while($row=mysqli_fetch_assoc($result)){
    echo "<table class='tablephp'>";
    echo "<tr>";
    echo "<td>".$date=$row['date']."</td>";
    echo "<td>".$name=$row['name']."</td>";
    echo "<td>".$amount=$row['amount']."</td>";
    echo "<td>".$count=$row['count']."</td>";
    echo "<td>".$total_amount=$row['total_amount']."</td>";
    echo "</tr>";
    echo "</table>";
    
 
}
 
mysqli_close($db_connect);
 
?>

@Mr_Sergo · 26.07.2019, 02:47

Артемий_124314,

http://some-test.onlinewebshop... nd-select/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<form id="my-form">
    <label>Год</label>
    <select name="year">
        <option>2000</option>
        <option>2010</option>
        <option>2015</option>
    </select>
 
    <label>Мес</label>
    <select name="month">
        <option>Январь</option>
        <option>Март</option>
        <option>Сентябрь</option>
    </select>
    <br><br>
    <button type="button">Кнопка</button>
</form>
<br>
<div class="from-server"></div>

JavaScript
1
2
3
4
5
6
7
8
9
async function upIncome(){
    let response = await fetch('income.php',{
        method: 'POST',
        body: new FormData(document.querySelector('#my-form'))
    });
    document.querySelector('.from-server').innerHTML = await response.text();
}
 
document.querySelector('[type="button"]').addEventListener('click', upIncome);

PHP
1
2
3
4
5
6
7
8
header('Content-Type: text/html; charset=utf-8');
echo "
    <h1>Ответ от сервера</h1>
    <h2>
        Год: $_POST[year]<br>
        Месяц : $_POST[month]
    </h2>
";

@Артемий_124314 · 29.07.2019, 12:44 **[ТС]**

По Вашему коду всё ок работает, НО!

если я уберу строку

JavaScript
1
document.querySelector('.from-server').innerHTML = await response.text();

, то PHP всё равно пишет что индекс не определён. А если я не хочу чтобы ответ выводился в документ HMTL - то есть JS передал данные PHP и там переменные и остались?

Я, конечно, сейчас сам попарюсь, но будет круто если поможете)

@Mr_Sergo · 29.07.2019, 12:56

Сообщение от Артемий_124314

А если я не хочу чтобы ответ выводился в документ HMTL

Не выводите переменные в html, работайте дальше с ними в php кто вам запрещает-то?

В $_POST[year] находится выбранный год а в $_POST[month] выбранный месяц - работайте дальше с ними на стороне php

Сообщение от Артемий_124314

если я уберу строку
document.querySelector('.from-server').innerHTML = await response.text();
, то PHP всё равно пишет что индекс не определён.

Этого не понял. Вы о каком индексе говорите?

@Артемий_124314 · 29.07.2019, 17:25 **[ТС]**

Если я вставлю Ваш код, то данные передаются в PHP и я могу их вывести в div. Он покажет то, что было выбрано до нажатия кнопки.

Вот только на стороне PHP документа он ругается

Code
1
Undefined index: year in C:\xampp\htdocs\Разработка приложений\HOME_FINANCE\income.php on line 3

Эта строчка выглядит так $year = $_POST ['year']

И следовательно потом null попадает в SQL запрос и ничего не выдаётся.

Вот это побороть не удаётся...и очень странно.

Добавлено через 1 час 55 минут
Так...у меня получилось...но хотелось бы закрепить понимание....

JavaScript
1
2
3
4
5
6
7
8
9
10
11
async function upIncome(){{
    let response = await fetch('income.php',{
        method: 'POST',
        body: new FormData(document.querySelector('#data'))
    });
    document.querySelector('.income').innerHTML = await response.text();
}
 
document.querySelector('[type="submit"]').addEventListener('click', upIncome);
 
}

async это значит, что запрос будет асинхронным, так?

Затем мы делаем подключение к файлу php, где в теле передаём объект - всю нашу форму...
Затем мы заполняем div с классом income ответом с сервера
Затем создаём событие, по которому начинает работать отрабатывать javascript...

Прошу поправить...хочется понимать как правильно рассуждать на этом языке

@Mr_Sergo · 29.07.2019, 17:41

Артемий_124314,

JavaScript
1
2
3
4
5
6
7
8
9
async function upIncome(){  // async - значит что функция асинхронная
    let response = await fetch('income.php',{  // делаем аджакс запрос
        method: 'POST',  // методом POST
        body: new FormData(document.querySelector('#my-form'))  // в качестве тела запроса отправляем форму с данными (сериализация)
    });
    document.querySelector('.from-server').innerHTML = await response.text();  // выводим ответ сервера
}
 
document.querySelector('[type="button"]').addEventListener('click', upIncome);  // по клику запускаем вышесозданную функцию

Добавлено через 3 минуты

Сообщение от Артемий_124314

Так...у меня получилось

Как исправили ошибку с индексом? Случайно не name-а не хватало у year?

@Артемий_124314 · 30.07.2019, 12:36 **[ТС]**

Есть подозрения что нахимичил просто)

У меня в одной функции был и Ваш метод передачи и ещё XMLHttpRequest, который выводил данные из обработчика php.
В общем всё решилось путём удаления этого вывода данных.

А так и id, и class, и name я прописывал для нужных div'ов в обязательном порядке.

Добавлено через 30 минут
Ещё я обратил внимание, что в обработчики php изначально не лежит year и month, а значит php не знает, что такие есть и где их искать. Узнаёт он это получается, только когда начинает отрабатывает JS на основании события.

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

Добавлено через 2 минуты
Ну и осталась проблема с тем, что результат исчезал сразу после вывода.

Сразу подумал, что где-то что-то отправляется ещё раз. Потом уже атрибут onsubmit добавил в form

Новые блоги и статьи Все статьи Все блоги /
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Нашел на реддите интересную статью под названием «Кто-нибудь знает, где получить бесплатный компьютер или. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .

@Артемий_124314 0 / 0 / 0 Регистрация: 25.07.2019 Сообщений: 25
	30.07.2019, 12:36 [ТС]
	Есть подозрения что нахимичил просто) У меня в одной функции был и Ваш метод передачи и ещё XMLHttpRequest, который выводил данные из обработчика php. В общем всё решилось путём удаления этого вывода данных. А так и id, и class, и name я прописывал для нужных div'ов в обязательном порядке. Добавлено через 30 минут Ещё я обратил внимание, что в обработчики php изначально не лежит year и month, а значит php не знает, что такие есть и где их искать. Узнаёт он это получается, только когда начинает отрабатывает JS на основании события. Так что если открывать php файл, то там также проблема с индексами, а если на стороне клиента поработать с этим фильтром и кнопкой, то работает как предполагалось и без явных ошибок. Добавлено через 2 минуты Ну и осталась проблема с тем, что результат исчезал сразу после вывода. Сразу подумал, что где-то что-то отправляется ещё раз. Потом уже атрибут onsubmit добавил в form 0

Передать переменную HTML ->JS->PHP

Решение