Диалог подтверждения Javascript

Question

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

Если нет, ничего не должно произойти, иначе должен быть выполнен URL.

Я знаю, как реализовать это с помощью некоторого кода JavaScript, но я ищу решение, в котором меньше кода. Я имею в виду, например, :

<a href="mysite.de/xy/delete" onClick="...">Delete</a>

Можно ли поместить всю функциональность в элемент onClick, не добавляя в заголовок лишний javascript?

Answer 1

Вы можете return confirm() (который возвращает true / false), например:

<a href="mysite.de/xy/delete" onClick="return confirm('You sure??');">Delete</a>

Вы можете проверить это здесь

Answer 2

Лучше (хотя и далеко от идеала!): Переверните его. Не позволяйте ссылке делать что-либо, если у вас нет JavaScript:

<a href="#" 
  onclick="if confirm('Sure?') { window.location='http://mysite.de/xy/delete';}">
    Click to delete
</a>

Это как минимум мешает ссылке работать без JavaScript. Это также снижает риск случайного сканирования ссылки Google или даже каким-либо локальным плагином. (Изображение, если у вас есть плагин, который пытается загрузить / показать в виде эскиза) целевая страница при наведении ссылки!)

Тем не менее, это решение не идеально. Вы фактически перейдете к URL, и из-за этого URL может появиться в истории. Вы действительно можете удалить Боба, создать нового Боба, а затем удалить его случайно, просто щелкнув «назад» в браузере!

Лучшим вариантом было бы использовать JavaScript или форму для публикации желаемого действия. Вы можете сделать запрос к серверу с помощью метода POST или, возможно, лучше, метода DELETE. Это также должно предотвратить индексацию URL-адресов.

Answer 3

Подумайте, что произойдет, если у пользователя отключен JavaScript, или если придет Google и отобразит ссылку. Будет ли ваша сущность удалена?

Лучшим способом было бы опубликовать форму для удаления.

Answer 4

Существует плагин jQuery, который делает это: jquery.confirm .

Пример:

<a href="home" class="confirm">Go to home</a>

Код JS:

$('.confirm').confirm();

Если пользователь подтверждает, он перенаправляется на ссылку <a>, иначе ничего не происходит.

Answer 5

Вы можете использовать это: Загрузите bootboxjs из: [1]: http://bootboxjs.com/

Создать кнопку (HTML)

<button type="submit" id="btn">Delete</button>

Позвоните в диалог:

  var myBtn = document.getElementById('btn');


  myBtn.addEventListener('click', function(event) {
      bootbox.confirm({
          size: "small",
          message: "Are you sure?",
          callback: function (result) {
              /* result is a boolean; true = OK, false = Cancel*/
              if (result == true) {
                  alert("ok pressed");
              }
              else {
                  alert("cancel pressed");
              }
          }
      })
  });