2

私が作成したこの小さなリスト Web アプリに ajax を追加しています。

リストの各項目に対してphpスクリプトによってボタンが出力されています。いずれかのアイテムの削除ボタンがクリックされたときに、php と mysql で ajax を呼び出してアイテムを削除したいと考えています。

以下は、アイテム 62 の削除ボタンです。これには、データベース内のリスト アイテムの ID を含む隠しフィールドがあります。ボタンをクリックすると、jquery クリック イベントが呼び出され、その ID を持つ項目をデータベースから削除する ajax 要求が送信されます。

<form class="actions" action="index.php" method="POST">
<input type="hidden" name="idDel" id="62" value="62">
<input type="submit" class="button delete" value="X">
</form>

これまでに考えたjqueryは以下です。クラス .delete のボタン (削除ボタンのいずれか) がクリックされた場合、非表示フィールドから何らかの方法で id 値を取得する必要があります。

('.delete').click(function(){
              //add click logic here

              var id = $("input.delete").val();

    return false;

    $.ajax({
      type: "POST",
      url: "delete.php",
      data: id,
      success: function() {

今、私は2つの同様の質問を見て、それらの解決策を試しましたが、それらからコードを理解できませんでした.

  1. JQuery - どのフォームが送信されましたか?
  2. フォーム送信イベントから送信を引き起こしたボタンを取得するにはどうすればよいですか?

ありがとう。

4

1 に答える 1

3

$(this)クリックされたボタンを参照するために使用し.prev()てから、ボタンの前の要素を取得するために使用します。これは、この場合に必要な入力です。

$('.delete').click(function() {
    // Add click logic here

    var id = $(this).prev('input').val();

    return false;

    $.ajax({
        type: "POST",
        url: "delete.php",
        data: id,
        success: function() {

        });
    });
});

ボタン自体の属性に ID を保存することもできdata-ます。これにより、HTML が少なくなります (ただし、フォームの非 JS POST 機能が失われます)。

HTML:

<form class="actions" action="index.php" method="POST">
   <input type="submit" class="button delete" value="X" data-id="62">
</form>

jQuery:

$('.delete').click(function() {
    // Add click logic here

    var id = $(this).data('id');

    return false;

    $.ajax({
        type: "POST",
        url: "delete.php",
        data: id,
        success: function() {

        });
    });
});
于 2012-07-17T13:10:23.600 に答える