Задать вопрос
Platton
@Platton
javascript

Всплывающие окно предупреждения JS?

Только начал изучать JavaScript. Задача в следующем, на странице сайта есть кнопка удаление записи из таблицы mysql. Мне нужно, при нажатии на эту кнопку, чтобы всплывало окно подтверждения удаления с двумя кнопками Да и Нет. Если нажимаю ДА идет отправка на сервер и запись удаляется, если кликаю НЕТ - отправка на сервер не осуществляться и всплывающие окно исчезает.

Вот написал такой код:
function checkButton()
{
	var hid = document.getElementById('hidden'); //Находим id всасывающегося окна
	var yes = document.getElementById('yes'); // id кнопки ДА
	var no = document.getElementById('no'); // id кнопки НЕТ
	
	if(yes.onclick) //если была нажата кнопка ДА
	{
		hid.className = ''; // скрывается окно подтверждения
		return true; //// отправка на сервер происходит
	}
	else if(no.onclick) // Если была нажата кнопка НЕТ
	{
		hid.className = ''; //скрывается окно подтверждения
		return false;  // отправка на сервер не происходит
	}
	else // Иначе отображается окно подтверждения.
	{
		hid.className = 'substrate';
		return false; // отправка на сервер не происходит
	}
}

window.onload = function()
{
	var myf = document.getElementById('dell');
	myf.onclick = checkButton; //Подписка на событие клика по кнопке УДАЛИТЬ
}


<body>

<form method="get">
	<input id="dell" type="submit" name="dell" value="Delete">
</form>

<div id="hidden" class="show-none">
<div class="warn-window">
	<div class="warn-title">Предупреждение</div>
	<span>Вы действительно хотите удалить?</span>
	<div class="warn-act">
		<input id="yes" type="button" name="yes" value="Да">
		<input id="no" type="button" name="no" value="Нет">
	</div>
</div>
</div>

</body>


.substrate{
	z-index:1;
	position: absolute;
	background-color: #000;
	opacity: 0.8;
	filter: alpha(opacity=80);
	width: 100%; 
	height: 100%;
	top: 0; 
	left: 0;
	display: block;
}
.show-none{
	position: absolute;
    top: -10000px;
    left: -10000px;
}
.warn-window{
	z-index:2;
	background: #fff;
	height: 180px;
	width: 300px;
	border: 1px #3CCB34 solid;
	border-radius:5px;
	margin:150px auto;
}
.warn-window span {padding:7px 10px; display:block; width:100%; height: 77px; overflow:hidden; font-size:16px;}
.warn-title {background-color:#3CCB34; height:30px; color:#fff; padding:4px 5px 0; font:bold 17px tahoma;}
.warn-act {width:100%; text-align:center; margin-top:10px;}
.warn-act input {margin:3px; cursor: pointer; width:100px; height: 27px;}


При нажатии кнопки Delete все нормально работает - всплывает окно с кнопками да и нет. Но при нажатии на эти кнопки ничего не происходит(. Подскажите где ошибки пожалуйста.
  • Вопрос задан
  • 3110 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 1
PretorDH
@PretorDH
HTML5, CSS3, PHP, JS - люблю в чистом виде. 
<form method="get" id="delForm">
  <input id="dell" type="button" name="dell" value="Delete">
</form>


Создаем простую кнопку вместо Submit.

function checkButton()
{
  var hid = document.getElementById('hidden'); //Находим id всасывающегося окна
  var yes = document.getElementById('yes'); // id кнопки ДА
  var no = document.getElementById('no'); // id кнопки НЕТ
  
  yes.onclick  = function(e) //если будет нажата кнопка ДА
  {
    var frm = document.getElementById('delForm'); //Находим id формы
    this.onclick = null;
    hid.className = ''; // скрывается окно подтверждения
    frm.submit();  //// отправка на сервер происходит
    e.stopPropagation();
    e.preventDefault();
  };
  no.onclick = function(e) // Если будет нажата кнопка НЕТ
  {
    var hid = document.getElementById('hidden'); //Находим id всасывающегося окна
    this.onclick = null;
    hid.className = ''; //скрывается окно подтверждения
    // отправка на сервер не происходит
    e.stopPropagation();
    e.preventDefault();
  }

   // Oтображается окно подтверждения.
   hid.className = 'substrate';
}

window.onload = function(e)
{
  var myf = document.getElementById('dell');
  myf.onclick = checkButton; //Подписка на событие клика по кнопке УДАЛИТЬ
  e.stopPropagation();
  e.preventDefault();
}

И привязываем события, а не проверяем наличие привязаного события на кнопках yes и no

И еще поправим CSS:
.show-none{
  display:none;       /* просто прячем окно, а не задвигаем его в минуса */
}
.substrate{
...
Ответ написан
13 комментариев
13 комментариев
Пригласить эксперта
Ответы на вопрос 1
Taraflex
@Taraflex
Ищу работу. Контакты в профиле.
https://t4t5.github.io/sweetalert/
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript Developer (backend / fullstack)
Brightdata • Тель-Авив
от 5 500 до 6 500 $
JavaScript FullStack разработчик
Rocket • Брянск
от 60 000 до 100 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработка онлайн-виджета для публикации, записи и продажи билетов
17 мая 2024, в 07:47
20000 руб./за проект
Разработка слот казино на pixi.js
16 мая 2024, в 23:36
200000 руб./за проект
Сделать модуль отправки сообщений в веб приложение
16 мая 2024, в 23:14
15000 руб./за проект
Ещё заказы