Отправляет email-рассылки с помощью сервиса Sendsay

[prg] изменить надпись кнопки или ссылки после нажатия

Здравствуйте, уважаемые!

Задача такая: На странице start.php имеется либо кнопка формы либо
ссылка с надписью "Запустить!", которые обращаются к файлу finish.php
При нажатии кнопки или ссылки "Запустить" начинает работать файл
finish.php, в котором запускается продолжительный процесс, но на экране
попрежнему отображается кнопка или ссылка с первоначальной надписью. Так
вот задача каким-то понятным и простым способом уведомить пользователя,
что кнопка или ссылка "Запустить!" нажата и результат нужно ожидать в
ближайшее время.
Каким способом это можно проделать?

пробовал файл start.php с таким кодом:

<!DOCTYPE html>
<html>
<head>
<title>Изменяем надпись кнопки или ссылки</title>
</head>
<body>

<form action="finish.php" method="POST">
<input name="sec" type="hidden" value="30" />
<input type="submit" value="Запустить первым способом!" onclick="return
change(this);" />
</form>
<div id="download">
<a href="finish.php?sec=30" onclick="this.innerHTML='Подождите пока
запускается внешнее приложение';return true">Запустить вторым способом</a>
</div>
<script type="text/javascript">
function change( elem) {
if (elem.value "Начинаем!") elem.value ="Подождите немного!";
else elem.value ="Начинаем!";
}
</script>
</body></html>

Файл finish.php для тестирования содержит такой код:

<?php
set_time_limit(90);
$sec =10;
if (!empty($_GET['sec'])) $sec =$_GET['sec'];
if (!empty($_POST['sec'])) $sec =$_POST['sec'];
sleep($sec);
echo "Работа выполнена!<br />";

Одним словом, перед переходом к файлу finish.php нужно чтобы надпись
кнопки или ссылки изменилась на поясняющую.

С уважением Грызунов Александр

Ответить   Fri, 10 May 2019 00:00:53 +0400 (#3617676)

 

Ответы:

Здравствуйте, Александр и все остальные!

Вы писали 10 мая 2019 г., 1:00:53:

Вот я немного изминил содержимое файла start.php
<!DOCTYPE html>
<html>
<head>
<title>Изменяем надпись кнопки или ссылки</title>
</head><body>
<form action="finish.php" method="POST" onsubmit="change(this)">
<input name="sec" type="hidden" value="10" />
<input type="submit" value="Запустить первым способом!"/>
</form>
<div id="download">
<a href="finish.php?sec=10" onclick="this.innerHTML = 'Подождите пока
запускается внешнее приложение'">Запустить вторым способом</a>
</div>
<script type="text/javascript">
function change(elem) {
//дотягиваемся до элемента submit
elem = elem.elements[1];
if (elem.value "Начинаем!") elem.value ="Подождите немного!";
else elem.value ="Начинаем!";
}
</script>
</body></html>

Ответить   Fri, 10 May 2019 18:18:08 +0500 (#3617781)

 

Здравствуйте, Грызунов Александр.

На мой взгляд, надо не менять название элемента управления на текст о
невозможности с ним взаимодействовать, а использовать более традиционный
язык дизайна интерфейса.
Кнопку надо сделать неактивной посредством атрибута disabled.
Ссылку вообще можно просто убрать.
Ну а ниже просто добавить текст с сообщением о необходимости ожидания.
Причём, добавлять не просто блок, а live region:

<p aria-live="polite">Пожалуйста, подождите!</p>

Содержимое появившегося на странице live region будет автоматически
прочитано программой экранного доступа, даже если этот блок находится не в
фокусе. Фактически будет достигнут эффект всплывающего уведомления.
Для зрячих текст оповещения надо выделить визуально, акцентировав его цветом
и/или рамкой.
Если есть возможность получать информацию о прогрессе ожидаемого процесса,
то можно ещё сделать прогресс-бар.

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

Ответить   Fri, 10 May 2019 16:46:09 +0300 (#3617783)

 

Здравствуйте.

Это может выглядеть примерно так:

<a href="#" onclick="ChangeElem(this)">Запустить вторым способом</a>
<script type="text/javascript">
function ChangeElem( elem) {
elem.innerText ="Изменения";
// Тут можно запустить таймер, чтобы отсрочить редирект
setTimeout(() => document.location.assign("finish.php"), 5000);
}
</script>

Ответить   Fri, 10 May 2019 21:17:10 +0300 (#3617820)