Передать переменную 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

Новые блоги и статьи Все статьи Все блоги /
1С: Контроль уникальности заводского номера Maks 23.03.2026 Алгоритм контроля уникальности заводского (или серийного) номера на примере документа выдачи шин для спецтехники с табличной частью. Данные берутся из регистра сведений, по которому настроено. . .	Хочу заставить корпорации вкладываться в здоровье сотрудников: делаю мат модель здравосохранения anaschu 22.03.2026 e7EYtONaj8Y Z4Tv2zpXVVo https:/ / github. com/ shumilovas/ med2. git	1С: Программный отбор элементов справочника по группе Maks 22.03.2026 Установка программного отбора элементов справочника "Номенклатура" из модуля формы документа. В качестве фильтра для отбора справочника служит группа номенклатуры. Отбор по наименованию группы. . .	Как я обхитрил таблицу Word Alexander-7 21.03.2026 Когда мигает курсор у внешнего края таблицы, и нам надо перейти на новую строку, а при нажатии Enter создается новый ряд таблицы с ячейками, то мы вместо нервных нажатий Энтеров мы пишем любые буквы. . .
Krabik - рыболовный бот для WoW 3.3.5a AmbA 21.03.2026 без регистрации и смс. Это не торговля, приложение не содержит рекламы. Выполняет свою непосредственную задачу - автоматизацию рыбалки в WoW - и ничего более. Однако если админы будут против -. . .	1С: Программный отбор элементов справочника по значению перечисления Maks 21.03.2026 Установка программного отбора элементов справочника "Сотрудники" из модуля формы документа. В качестве фильтра для отбора служит значение перечислений. / / Событие "НачалоВыбора" реквизита на форме. . .	Переходник USB-CAN-GPIO Eddy_Em 20.03.2026 Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .	Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .

@Артемий_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

Решение