JavaScript - окно подтверждения. | Да? > удалить данные из MySQL / Нет - ничего не делать

Question

У меня нет большого опыта работы с JavaScript. Однако я хотел сделать небольшую вещь с JavaScript и MySQL. И я мог бы использовать некоторую помощь.

У меня есть страница в PHP, которая что-то ищет, и она дает результаты на основе поискового запроса. Для каждого результата добавляются 3 изображения, одно из которых в виде URL-адреса, где вы можете просматривать содержимое. Другое, где вы можете редактировать этот контент.

И третий вы можете удалить. Для этого я хотел сделать что-то хорошее.

Например, пользователь щелкает изображение, появляется диалоговое окно подтверждения. В этом поле он спрашивает, действительно ли вы хотите удалить данные. Если да, это приведет к удалению данных. где ID =

ID печатается в действии onclick внутри функции JavaScript на изображении с использованием PHP echo.

Если нет, мы бы закрыли диалоговое окно и продолжили.

Answer 1

ОК, поэтому давайте предположим следующее (простите за повторное разъяснение вопроса):

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

Давайте предположим следующий HTML-код:

<tr>
   <td>Some Item 1</td>
   <td><a href="?mode=delete&id=1" class="delete-link">Delete</a></td>
</tr>
<tr>
   <td>Some Item 2</td>
   <td><a href="?mode=delete&id=2" class="delete-link">Delete</a></td>
</tr>
<tr>
   <td>Some Item 3</td>
   <td><a href="?mode=delete&id=3" class="delete-link">Delete</a></td>
</tr>

Итак, я предполагаю, что тот же PHP-скрипт может запустить удаление, взяв параметр mode:

<?php
    if($_GET['mode'] == 'delete') {
       //Check if there is something in $_GET['id'].
       if($_GET['id']) {

          //Prevent SQL injection, just to be safe.
          $query = "DELETE FROM sometable WHERE id='" . mysql_real_escape_string($_GET['id']) . "'";

          mysql_query($query);
       }
    }

Я собираюсь дать два решения для этого на стороне JavaScript - первое с встроенным, немного уродливым решением, второе с использованием jQuery (http://jquery.com/), и ненавязчивый JavaScript.

Хорошо, для начала я бы связал событие onclick каждой ссылки.

<tr>
   <td>Some Item 3</td>
   <td><a href="?mode=delete&id=3" class="delete-link" onclick="checkDeleteItem();">Delete</a></td>
</tr>

Затем создайте функцию JavaScript:

//This will get called when the link is clicked.
function checkDeleteItem() {
   //show the confirmation box
   return confirm('Are you sure you want to delete this?');
}

Как я уже сказал, мне не нравится это решение, потому что оно ужасно навязчивое, а также не особенно надежное.

Теперь решение jQuery:

//Do all this when the DOM is loaded
$(function() {
   //get all delete links (Note the class I gave them in the HTML)
   $("a.delete-link").click(function() {
       //Basically, if confirm is true (OK button is pressed), then
       //the click event is permitted to continue, and the link will
       //be followed - however, if the cancel is pressed, the click event will be stopped here.
       return confirm("Are you sure you want to delete this?");
   });
});

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

Answer 2

Не могу помочь с PHP-частью, но вы можете использовать JavaScript Confirm:

var ok = confirm('Are you sure you want to delete this row');
//ok is true or false

Вы можете привязать функцию к событию нажатия на кнопках удаления. Возвращение false заставит их игнорировать щелчок.

Answer 3

Если у вас есть кнопка, которая удаляет нужную вам строку, затем вызовите функцию ниже, чтобы подтвердить пользователю, хочет ли он удалить:

function confirmDelete()
{
  if (confirm('Do you want to delete ?'))
  {
      return true;
  }
  else
  {
      return false;
  }
}

Назовите это так:

<input type="button" value="Delete Record" onclick="confirmDelete()" />

Answer 4

Вам нужна базовая HTML-форма, которая отправит и выполнит удаление. Сначала получите правильный HTML-код - я бы предложил, чтобы каждое изображение имело свою собственную форму со скрытым полем для значения идентификатора, а изображение использует кнопку изображения: <input type="image" />

Когда у вас все получится, вы можете добавить диалоговое окно предупреждения JavaScript. Вам нужно будет заменить событие отправки формы вашей собственной функцией, которая предотвращает отправку формы (возвращая false), а затем показать ваш диалог. Если пользователь нажимает «да», вам нужно вызвать событие формы onsubmit() с помощью JavaScript, а если пользователь нажимает «нет», просто скрыть диалог.

Кроме того, прочитайте о ненавязчивом JavaScript - DOM Scripting от Джереми Кейта - фанатичная книга, которая просто объяснит, как это делать.