2016-08-14 30 views
1

ページには10個のチェックボックスがあります。私は "すべてチェック"ボタンがあり、完璧に動作します。複数送信ボタン複数チェックボックスなしフォームjquery ajax PHP投稿

レコードを削除するには2、レコードを一時停止するには2つの送信ボタンがあります。

チェックボックスはフォームに含まれていません。削除ボタンをクリックすると

<button type="button" class="btn btn-small btn-warning tip suspend" data-original-title="Suspend"><span class="icon-minus icon-white"></span></button> 
<button type="button" class="btn btn-small btn-danger tip delete" data-original-title="Delete"><span class="icon-remove icon-white"></span></button> 

<input type="checkbox" class="checkbox" value="0" /> 
<input type="checkbox" class="checkbox" value="1" /> 
<input type="checkbox" class="checkbox" value="2" /> 
<input type="checkbox" class="checkbox" value="3" /> 
<input type="checkbox" class="checkbox" value="4" /> 
<input type="checkbox" class="checkbox" value="5" /> 
<input type="checkbox" class="checkbox" value="6" /> 
<input type="checkbox" class="checkbox" value="7" /> 
<input type="checkbox" class="checkbox" value="8" /> 
<input type="checkbox" class="checkbox" value="9" /> 

<button type="button" class="btn btn-small btn-warning tip suspend" 
data-original-title="Suspend"><span class="icon-minus icon-white"></span> 
</button> 

<button type="button" class="btn btn-small btn-danger tip delete" 
data-original-title="Delete"><span class="icon-remove icon-white"></span> 
</button> 

は、私は、私がsuspend_record.php

にAJAX経由ですべてのボックスをチェックし送信する必要がクリックされたボタンを中断 delete_record.php

にAJAX経由ですべてのボックスをチェックし送信する必要があります

私は

$("button.delete").on('click', function(){ 
    $("input:checkbox[class=checkbox]").each(function() { 

    }); 
}); 

ような何かをする必要がある。しかし、正直なところ、この時点で私は私がオンラインで見つけるだけで試行錯誤テストコードしています知っています。私はむしろ明確な解答と解説を持っています。

同様に私はこれを吐き出し、PHP(PDO db接続)で配列として処理する方法はありますか?

+0

」はどうですか? –

+0

私のタイトルの提案として、フォームはありません、これはコードの一部です。 – Bruce

+1

したがって、 'form'を追加し、標準submitを使います。 –

答えて

0

は、これを取得するために私の時間を取ったが、ここではjqueryの/アヤックス

です:

$(document).ready(function(){ 
    $('.delete').click(function(){ 
    var checkValues = $('input[type=checkbox]:checked').map(function(){ 
     return $(this).val(); 
    }).get(); 

    $.ajax({ 
    url: 'delete_records.php', 
    type: 'post', 
    data: {ids:checkValues}, 
    success:function(data){ 
    } 
    }); 
    }); 
}); 

のjQueryの最初の関数は、チェックボックスからすべての値をつかむと、それらを設定し、変数配列 - checkValues。

2番目の部分は値を配列としてPHPページに渡します。

とPHP:

$data = $_POST['ids']; 
foreach ($data as $d) { 
    $query = $db->prepare("DELETE FROM sites WHERE username=:username AND id=:id"); 
    $query->bindValue(':username', $username); 
    $query->bindValue(':id', $d); 
    $query->execute(); 
} 
変数$データに配列を設定して、foreachループとしてそれぞれの結果を実行します

0

あなたの意見は混乱しますが、実際にあなたが言うことからフォームラッパーがあるように聞こえるので、ダブルフォームラッパーを持たないことは分かります。これはグループ化であり、これは、多くの1つのグループであれば、私にもわからないので、私はそのように扱うつもりです:これは仮定(

<script> 
$(document).ready(function(){ 
    $('.btn').on('click',function(e){ 
     // Stop submission 
     e.preventDefault(); 
     // Get nearest grouping 
     var getGroup = $(this).closest('.fwrap'); 
     // Select children based on type 
     var checks  = getGroup.find('input[type=checkbox]'); 
     // Fetches the action name 
     var action  = $(this).data('original-title'); 
     // Creates the ajax url 
     var url   = action.toLowerCase()+'_record.php'; 
     // This is our storage 
     var saveData = {}; 
     // Loop through checkboxes 
     $.each(checks,function(k,v) { 
      // Save the data to array 
      saveData[$(v).val()] = $(v).is(":checked"); 
     }); 
     // Store the action and data 
     var sendData = { 
      action: action, 
      data: saveData 
     }; 
     // Do the ajax here using this data and url (from above) 
     console.log(sendData); 
    }); 
}); 
</script> 

HTML:

のJavascriptループからの多くの一つのグループだけ):この方法は、ユーザーがJavaScriptを無効にして提出する場合、それは予期しない結果を持っているということです、それをやって

<!-- I would use a wrap here for easy selection for this grouping --> 
<div class="fwrap"> 
    <button type="button" class="btn btn-small btn-warning tip suspend" data-original-title="Suspend"><span class="icon-minus icon-white"></span></button> 
    <button type="button" class="btn btn-small btn-danger tip delete" data-original-title="Delete"><span class="icon-remove icon-white"></span></button> 

    <input type="checkbox" class="checkbox" value="0" /> 
    <input type="checkbox" class="checkbox" value="1" /> 
    <input type="checkbox" class="checkbox" value="2" /> 
    <input type="checkbox" class="checkbox" value="3" /> 
    <input type="checkbox" class="checkbox" value="4" /> 
    <input type="checkbox" class="checkbox" value="5" /> 
    <input type="checkbox" class="checkbox" value="6" /> 
    <input type="checkbox" class="checkbox" value="7" /> 
    <input type="checkbox" class="checkbox" value="8" /> 
    <input type="checkbox" class="checkbox" value="9" /> 

    <button type="button" class="btn btn-small btn-warning tip suspend" 
    data-original-title="Suspend"><span class="icon-minus icon-white"></span> 
    </button> 

    <button type="button" class="btn btn-small btn-danger tip delete" 
    data-original-title="Delete"><span class="icon-remove icon-white"></span> 
    </button> 
</div> 

ワンノート形。

+0

お返事いただきありがとうございます、私は自分自身で解決策を得ることになりました。 :) – Bruce

+0

いいね! ajax経由で送信するURLを決定する私の部分を見てください。私のものは動的なので、あるコードを実行するために具体的にクラス( '.delete')をクリックする必要はありません。あなたはあなたの 'data'フィールドで指定した名前でajax呼び出しをどこに送るかを決めることができます。とにかくうまく働いてくれてうれしい! – Rasclatt

関連する問題