Как сделать обновление страницы сайта после нажатия кнопки submit в формах

@Sollita · Регистрация: 30.09.2021

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

У меня на странице сайта, который я пишу для себя, 3 формы. Я хочу, чтобы после нажатия в форме кнопки submit происходило обновление страницы и на странице выводился введённый в форму контент.
Я нашла в интернете образец и по аналогии сделала код, но он не работает. Может быть, кто-то знает, почему?
Теорию ajax в jquery я просмотрела, но не всё поняла, видимо, поэтому и сделала где-то ошибки.
Мой код в файле vopros.php частично для одной из форм:

Code
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
...
 
<head>
<title>Вопрос</title>
<script type="text/javascript" 
  src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js">
  </script>
</head>
 
...
 
$id_vopr = intval($_GET['v']);
 
...
 
//Если это эксперт или админ
if($status_id==3||$status_id==2){       
//Форма для ввода ответа на вопрос
?> 
<p  style="color:#E095B2;font-size: 18px "><b>Добавить ответ<b></p>
<form method='POST' action=''>
Наберите здесь текст ответа:<br>
<textarea name='contentO' cols='100' rows='10'></textarea><br>
 <button type="submit" class="lii" name="s" 
data-v="<?=$value->$id_vopr;?>">Опубликовать ответ</button>
</form><br><br>
 
<script> 
$('.lii').on('click',function(){
        $.ajax({
           url:'/vopros.php',
           data:{v:$(this).data('$id_vopr')},
           success:function(){
              location.reload();
           }
        });
    });
  </script>
<?php
 
}
 
//Обрабатываю форму для ответа
if (isset($_POST['s'])) {
    //Если форма заполнена
if(isset($_POST["contentO"])){
//Сохраняю данные в БД
 $contentO = $_POST['contentO'];
 
//Вставляю дату
// получение текущей даты
$odate = date('Y-m-d  H:i');
 
//Вставляю значение + дату в таблицу otvets в БД
$query7 = "INSERT INTO otvets(id,contentO,dateo,experto)
VALUES('$id_vopr','$contentO','$odate','$uzer_c')";
$res7=mysqli_query($link, $query7);
}
}

Адрес моей виртуальной страницы:
http://host2.localhost/vv2/vopros.php?v=28
где 28 - это $id_vopr

В таком виде после нажатия кнопки submit обновления не происходит и ответ не выводится на странице, приходится вручную перезагружать страницу и только тогда ответ выводится. Значит, или в форме или в скрипте у меня ошибки. Помогите, пожалуйста, их найти.

Или, может быть, есть какой-то другой способ для обновления страницы после нажатия кнопки submit?

@liris · 31.05.2024, 11:55

Сообщение от Sollita

liris, Потому что в таком случае после отправки формы на странице сайта текст из формы не появляется. И чтобы он появился, юзеру нужно перезагружать страницу вручную. Мне это не нравится.

Вам не нужно городить костыли. У вас в этой логике ошибка. Можно просто ее исправить.

@HP Fedora · 31.05.2024, 12:26

сто раз говорено: тег button не попадает в сериализацию таким простым способом, нужно или js учить или у индусов код копировать - рисовать кнопки тегом input (тег input попадает в сериализацию, но кнопка тегом input - это костыль, рабочий, но костыль)

и почему вы навешиваете событие click если отправляете форму, тег form - это событие submit

и событие нужно навешивать на родительский элемент иначе в подгруженном контенте не сработает потом

@sad67man · 31.05.2024, 12:30

Сообщение от Sollita

Я хочу, чтобы после нажатия в форме кнопки submit происходило обновление страницы и на странице выводился введённый в форму контент.

Так работает обычная отправка формы без js. Зачем тут ajax? Вы можете отправлять форму на другой файл, где после завершения операции редиректить назад.

@HP Fedora · 31.05.2024, 12:35

sad67man, он там с бэка тащит данные БД если я правильно понял

@Sollita · 31.05.2024, 13:02 **[ТС]**

liris, какая именно ошибка и как её исправить?

Добавлено через 13 минут
HP Fedora,
Я написала, что скрипт сделала по аналогии с найденным в интернете. И смысла его не поняла. Сейчас читаю Никсона и пытаюсь разобраться.

Но в том скрипте навешивается событие click, хотя отправляется форма. Я подозреваю, что для того, чтобы просто обновить страницу, не обрабатывая в скрипте форму.
А этого я вообще не поняла: "событие нужно навешивать на родительский элемент иначе в подгруженном контенте не сработает потом". Я третий день изучаю jQuery, поэтому понимаю только элементарное.
Не могли бы Вы объяснить подробнее: что значит "событие нужно навешивать на родительский элемент", какой контент нужно подгружать и что не сработает?

Добавлено через 10 минут
sad67man,
"Вы можете отправлять форму на другой файл, где после завершения операции редиректить назад."
Не могли бы Вы объяснить подробнее?
Мне нужно сделать файл, в котором просто сделать редирект? И если я отправлю туда форму , т.е. укажу имя того файла в action, то мой ответ появится на странице без её обновления?
Я попробую сейчас.

@ft4l · 31.05.2024, 13:11

Сообщение от Sollita

что значит:

Мне не хотелось в адресной строке набирать ?id_vopr=2
и я добавил в коде

PHP
1
2
if (!isset($_GET['id_vopr']))  echo '
        <a href="?id_vopr=2"> with id_vopr </a>',   exit;

чтобы просто набрать http:/..../tеst.php и потом кликнуть по этой ссылке

... историю набранного не засорять.
И ещё такое намекает, что извне можно получить и не привильный нумер записи , или вообще не получить...

Сообщение от Sollita

зачем (int)?

затем же зачем у Вас intval() ))
получить извне можно всё что угодно...
php даже заботливо раскодирует всякие %00%03 и можно получать нетекстовые (бинарные) данные.

конкретно (int) или inval() приводят всё к числам, но например и такое

Code
1
2
3
4
5
6
:: d:\
>  php -r "var_export([intval('      1'), intval('2e10'), intval('-.1e6'),]);"
array (
  0 => 1,
  1 => 2147483647,
  2 => -100000,

спрашивали что за язык такой... это вызов php.exe из консоли ... подробнее php.exe -h )
конкретно это php у меня 32-бит... поэтому 2147483647 вместо 20000000000
чтобы php.exe без полного пути в консоли выполняло нужно чтобы был текущий каталог тот в котором в которм php
или в переменной окружения path должен этот быть каталог ...

Сообщение от Sollita

второй экземпляр этой страницы. Видимо, в <div id="output">

поэтому обработка post-запроса у меня вынесена в начало файла, выводит по минимуму и заканчивается exit;
... так удобнее.

Сообщение от Sollita

зачем мне что-то вставлять, если мне нужно просто обновить страницу?

я не знаю

а зачем Вам ?
На этом форуме например без переходов-переадресаций вроде... нажимаете кнопку под сообщениями появляются новые
... без перезагрузки... как вариант.
Предпросмотры тоже прикольно бывает сделать...
сначала посмотреть а потом изменять , пока не понравится, или подтвердить

@sad67man · 31.05.2024, 13:11

Сообщение от Sollita

то мой ответ появится на странице без её обновления?

Сообщение от Sollita

Я хочу, чтобы после нажатия в форме кнопки submit происходило обновление страницы

страница обновлится.

PHP/HTML
1
2
3
4
5
6
<form method='POST' action='/add.php'>
    <input type="hidden" name="id" value="<?= $id_vopr ?>">
    Наберите здесь текст ответа:<br>
    <textarea name='contentO' cols='100' rows='10'></textarea><br>
    <button type="submit">Опубликовать ответ</button>
</form>

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
 
//add.php
 
if (empty($_POST) || empty($_POST['id'])) {
    http_response_code(403);
    die();
}
 
$id_vopr = $_POST['id'];
$contentO = $_POST['content0'];
 
// выпоняем операцию...
 
 
//редирект
header('Location: ' . $_SERVER['HTTP_REFERER']);
die();

@HP Fedora · 31.05.2024, 13:12

Sollita,

есть так называемые - SPA, в них нет обновления страницы в браузере, контент обновляется путём подгрузки контента в один из тегов

если у тебя нет подгрузки контента то тебе даже не нужно навешивать событие - $('.lii').on('click',function(){}, достаточно будет $('.lii').click('function(){}

если у тебя форма - часть подгружаемого контента, то $('.lii').on('click', function(){} сработает только один раз и после подгрузки контента уже не сработает, чтобы работало, то нужно навешивать событие на родительский элемент (тег), внутри которого кнопка, например, тег form, тогда будет $('form').on('submit', function() {} - навесили событие submit на родительский тег form так как тег form это событие submit

@sad67man · 31.05.2024, 13:26

Сообщение от HP Fedora

есть так называемые - SPA, в них нет обновления страницы в браузере, контент обновляется путём подгрузки контента в один из тегов

SPA это немного другое. Как правило используются реактивные js-фреймворки, когда подгружаются только данные в формате json.

Сообщение от HP Fedora

$('.lii').on('click',function(){}, достаточно будет $('.lii').click('function(){}

Это синонимы, я предпочитаю $('.lii').on('click',function(){}

Сообщение от HP Fedora

если у тебя форма - часть подгружаемого контента, то $('.lii').on('click', function(){} сработает только один раз и после подгрузки контента уже не сработает, чтобы работало, то нужно навешивать событие на родительский элемент (тег), внутри которого кнопка, например, тег form, тогда будет $('form').on('submit', function() {} - навесили событие submit на родительский тег form так как тег form это событие submit

Это зависит какой блок html вы подменяете. В ходе подмены удаляются элементы с навешанными на них событиями. И с формы могут слететь. Мне кажется вы тут сами не до конца разобрались)

@Sollita · 31.05.2024, 13:39 **[ТС]**

sad67man,
Я попыталась. Я не знаю, какие писать адреса.
У меня основной файл виртуальный с адресом:
http://host2.localhost/vv2/vopros.php?v=$id_vopr
В нём я вставила в форме action:

Code
1
2
3
4
5
6
<form method='POST' action='/vv2/new_r.php'>
Наберите здесь текст ответа:<br>
<textarea name='contentO' cols='100' rows='10'></textarea><br>
 <button type="submit" class="lii" name="s" 
data-v="<?=$id_vopr?>">Опубликовать ответ</button>
</form><br><br>

И я создала файл new_r.php с редиректом:

Code
1
2
3
4
<?php
header("Location: host2.localhost/vv2/vopros.php?v=$id_vopr");
exit( );
?>

Вылезла ошибка: The requested URL /vv2/host2.localhost/vv2/vopros.php was not found on this server.
Так:
header("Location:/vopros.php");
и так:
header("Location:/vopros.php?v=$id_vopr");
Ошибка: The requested URL /vopros.php was not found on this server.

А этот:
header("Location:/vv2/vopros.php?v=$id_vopr");
Перешёл на страницу http://host2.localhost/vv2/vopros.php?v=
Т.е. на пустую болванку.

Не подскажете, какой мне писать адрес в файле new_r.php?

@HP Fedora · 31.05.2024, 14:00

Сообщение от sad67man

И с формы могут слететь

могу немного ошибаться, но вроде не слетало, если я только на сам тег подгрузки не навешивал, точно уже не помню, знаю, что нужно на родителя вешать

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

Сообщение от sad67man

достаточно будет $('.lii').click('function(){}

после подгрузки контента не будет работать, надо слушать событие на родителе

Добавлено через 53 секунды

Сообщение от sad67man

SPA это немного другое. Как правило используются реактивные js-фреймворки

я в целях повышения скила сам колупал

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

Сообщение от sad67man

header('Location: ' . $_SERVER['HTTP_REFERER']);

я бы даже предложил

PHP
1
header('Location: ' . $_SERVER['HTTP_REFERER'] ?? '/'); // если нет реферера приземляем на главную

@Sollita · 31.05.2024, 14:14 **[ТС]**

sad67man, т.е. Вы предлагаете сделать в этом новом файле обработку формы? Но где я возьму в этом файле данные, которые мне нужно отправить в БД: '$id_vopr' и '$uzer_c', они же не из формы? Переписывать здесь все запросы в БД?
Я попробовала просто:

Code
1
2
3
4
5
<?php
//редирект
header('Location: ' . $_SERVER['HTTP_REFERER']);
die();
?>

Он возвращается на нужную страницу

Значит, это может сработать.
Я попробую вставить в этот файл обработку с запросами.

Добавлено через 13 минут
ft4l, спасибо за объяснения.
1. Я поняла, это для тестирования, значит, можно опустить без боли.
2. У меня id_vopr не юзер вводит, а он из БД и не может оказаться не числом, т.е. и это можно опустить.
3. Можете объяснить, что значит "из консоли"? Я понимаю, что такое "из консоли", когда писала в Эклипс или Нет Бинс код для андроида, но я сейчас пишу код в Notepad++ и тут нет никакой консоли. Ну, или я чего-то не знаю.
4. "поэтому обработка post-запроса у меня вынесена в начало файла, выводит по минимуму и заканчивается exit;
... так удобнее." Поняла, я этого не учла, попробую.
5. Я бы очень хотела знать, как это сделано на этом сайте...

@sad67man · 31.05.2024, 14:14

Сообщение от Sollita

Но где я возьму в этом файле данные, которые мне нужно отправить в БД: '$id_vopr' и '$uzer_c', они же не из формы? Переписывать здесь все запросы в БД?

$id_vopr можно передать через форму. К примеру через hidden input.. (я для чего код прикладываю?)
$uzer_c - не знаю что это?
Можно передать через action <form method="POST" action="/add.php?id_vopr=<?= $id_vopr?>"> - так наверное даже лучше. Если такого вопроса нет, отдавайте 404.

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

@HP Fedora · 31.05.2024, 14:17

Сообщение от sad67man

И с формы могут слететь.

наверное я всё-таки делал $('form').on('submit', 'button', function() {}

то есть жмём же кнопку, а событие отправки на форме, если честно не помню давно было, была навязчивая идея одностраничники делать, особенно понравилось колупать генерацию формы на js по нажатию кнопки с отправкой на API платёжки, некоторые даже знающие люди говорили что первый раз такое чудо видят

ладно проехали

@ft4l · 31.05.2024, 14:21

Сообщение от Sollita

header("Location: host2.localhost/vv2/vopros.php?v=$id_vopr");

это относительный путь, если не начинаются с / или для такого c http://

Сообщение от Sollita

header('Location: ' . $_SERVER['HTTP_REFERER']);

там полный путь обычно c http://,
но не мешает проверять ... передаётся-ли заголовок запроса.
и заголовки так-же как $_GET,$_POST,$_COOKIE ... передаются извне и могут содержать всё что кому-либо захочется...
... вызвать ошибку можно запросто... не то чтобы уязвимость, но лиший способ делать что делать не планировалось.

варианты с

header("Location: vopros.php?v=$id_vopr");

header("Location: ./vopros.php?v=$id_vopr");

header("Location: /vv2/vopros.php?v=$id_vopr");

будут содержать правильный путь, если адресе страницы например /vv2/otvet.php
последний вариантправильный с любых страниц.

@Sollita · 31.05.2024, 14:24 **[ТС]**

sad67man,
Так:
<input type="hidden" name="id_vopr" value="', $id_vopr , '"/>
?

$uzer_c - это в данном случае логин автора ответа. А его можно так же передать?

@ft4l · 31.05.2024, 14:26

Сообщение от Sollita

id_vopr не юзер вводит,

но ему ничто не мешает что-то вводить или скриптами слать любые запросы с любыми данными.
Вообще попытки взлома того, к чему нет кода, начинается с того чтобы нащупывать такие возможные моменты.)
Но и вообще лучше как-минимум предусматривать всё возможное и убеждаться что последствия допустимы.

@HP Fedora · 31.05.2024, 14:28

Сообщение от Sollita

а ты жоская

PHP
1
<input type="hidden" name="id_vopr" value="<?= $id_vopr ?>">

Сообщение от Sollita

А его можно так же передать?

да

@sad67man · 31.05.2024, 14:30

Сообщение от Sollita

$uzer_c - это в данном случае логин автора ответа. А его можно так же передать?

Нет.. Используйте сессию для этого.

@HP Fedora · 31.05.2024, 14:35

Сообщение от sad67man

Нет.. Используйте сессию для этого.

почему не из БД, сессия умерла, в контенте нет данных

или каждому пользуну хранить чужие логины авторов в своей сессии?

чёт не очень понял я

p.s. ТС прочитал слово - сессии, упала в обморок и лежит там без сознания

Новые блоги и статьи Все статьи Все блоги /
Мобильное приложение ColorStep pavlinmavlin 17.09.2026 Реализовал приложение Красный, Зеленый, Синий в Unity3d + c#. Название изменил на ColorStep. Приложение прошло модерацию и теперь доступно для скачивания. Делал его сам, шаг за шагом — и вот,. . .	Запрет дублирования строк в табличной части Maks 13.09.2026 Реализация из решения ниже выполнена на нетиповом справочнике "Нормы ТО" с табличной часть "Виды ТО", разработанного в КА2, со следующими реквизитами: - ВидТО (СправочникСсылка. ВидыТО); - ВидГСМ. . .	Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Jin X 06.09.2026 Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Работая с форумом и нейросетями в браузере часто хочется что-то подкорректировать или добавить какого-то функционала. Ниже прикреплён. . .	Программа опроса у.з. расходомера SLS-720F Argus19 02.09.2026 Программа опроса у. з. расходомера SLS-720F Программа опрашивает один раз в минуту три ультразвуковых расходомера SLS-720F через интерфейс RS-485 по протоколу Modbus RTU. Опрашиваются регистры. . .
Hyper-V: Компьютер должен поддерживать доверенный платформенный модуль 2.0. Maks 31.08.2026 При установке Windows 11 на виртуальную машину Hyper-V 2-го поколения вылезла такая ошибка: Решение: в параметрах виртуальной машины, в разделе "Безопасность" (Security) активировать флаг. . .	Архитектура биовида Стива в Майнкрафте: Зачем бонобо кубический каннибализм anaschu 30.08.2026 Кубический Вагинокапитализм в Minecraft: Математический инвариант ОДУ и рок Стивов-бонобо Главная задача разработанной «Модели Всего» — наглядно продемонстрировать наличие системной «судьбы». . .	Оттачиваю умение писать js программы. russiannick 30.08.2026 Проектом выходного дня стало написание Книги шифров Виженера. Итогом стала версия 200, синий туман. Синий туман назван так, потому что замораживает текст под собой. Нажатие синих кнопок управляют. . .	мат медиц модель 30. презентация проекта anaschu 27.08.2026 хоп хоп хоп хидахоп, а я кладую))

@HP Fedora Заблокирован
	31.05.2024, 12:26
	сто раз говорено: тег button не попадает в сериализацию таким простым способом, нужно или js учить или у индусов код копировать - рисовать кнопки тегом input (тег input попадает в сериализацию, но кнопка тегом input - это костыль, рабочий, но костыль) и почему вы навешиваете событие click если отправляете форму, тег form - это событие submit и событие нужно навешивать на родительский элемент иначе в подгруженном контенте не сработает потом 0

@HP Fedora Заблокирован
	31.05.2024, 12:35
	sad67man, он там с бэка тащит данные БД если я правильно понял 0

@Sollita 7 / 17 / 0 Регистрация: 30.09.2021 Сообщений: 232
	31.05.2024, 13:02 [ТС]
	liris, какая именно ошибка и как её исправить? Добавлено через 13 минут HP Fedora, Я написала, что скрипт сделала по аналогии с найденным в интернете. И смысла его не поняла. Сейчас читаю Никсона и пытаюсь разобраться. Но в том скрипте навешивается событие click, хотя отправляется форма. Я подозреваю, что для того, чтобы просто обновить страницу, не обрабатывая в скрипте форму. А этого я вообще не поняла: "событие нужно навешивать на родительский элемент иначе в подгруженном контенте не сработает потом". Я третий день изучаю jQuery, поэтому понимаю только элементарное. Не могли бы Вы объяснить подробнее: что значит "событие нужно навешивать на родительский элемент", какой контент нужно подгружать и что не сработает? Добавлено через 10 минут sad67man, "Вы можете отправлять форму на другой файл, где после завершения операции редиректить назад." Не могли бы Вы объяснить подробнее? Мне нужно сделать файл, в котором просто сделать редирект? И если я отправлю туда форму , т.е. укажу имя того файла в action, то мой ответ появится на странице без её обновления? Я попробую сейчас. 0

@HP Fedora Заблокирован
	31.05.2024, 13:12
	Sollita, есть так называемые - SPA, в них нет обновления страницы в браузере, контент обновляется путём подгрузки контента в один из тегов если у тебя нет подгрузки контента то тебе даже не нужно навешивать событие - $('.lii').on('click',function(){}, достаточно будет $('.lii').click('function(){} если у тебя форма - часть подгружаемого контента, то $('.lii').on('click', function(){} сработает только один раз и после подгрузки контента уже не сработает, чтобы работало, то нужно навешивать событие на родительский элемент (тег), внутри которого кнопка, например, тег form, тогда будет $('form').on('submit', function() {} - навесили событие submit на родительский тег form так как тег form это событие submit 0

@Sollita 7 / 17 / 0 Регистрация: 30.09.2021 Сообщений: 232
	31.05.2024, 14:24 [ТС]
	sad67man, Так: <input type="hidden" name="id_vopr" value="', $id_vopr , '"/> ? $uzer_c - это в данном случае логин автора ответа. А его можно так же передать? 0

Как сделать обновление страницы сайта после нажатия кнопки submit в формах

Решение