以下のようなフォームがあるとして、そのフォームの内容をajaxでPOSTしたい
質問のためチェックボックスの数は減らしています。実際は結構多い
html
1<input type='hidden' name='issueid' value=10> 2<input type='checkbox' data-user_id=1 class="user"> 3<input type='checkbox' data-user_id=2 class="user"> 4<input type='checkbox' data-user_id=3 class="user"> 5<input type='checkbox' data-user_id=4 class="user"> 6<input type='checkbox' data-user_id=5 class="user"> 7<button id="send">send</button>
javascript
1$(function(){ 2 3 $("#send").click(function(){ 4 5 var data; 6 // ここから 7 $.each($(".user"),function(){ 8 // $(this).data('user_id') と$(this).prop('checked') 9 // の値のペアをdataにセットしていきたい。 10 }); 11 12 // このあたりまでにdataにissueidの値やチェックボックスの 13 // data-user_id $(this).data('user_id') 14 15 $.ajax({ 16 type: 'POST', 17 url: '/posturl', 18 data: data, 19 dataType: 'json' 20 }).done(function( data, status, xhr ){ 21 22 }); 23 return false; 24 }); 25 26});
POSTの受け取り側(php)で
php
1 array( 2 'issueid'=>10, 3 'users'=>array( 4 '1'=>false, // user_id=>チェックの有無 5 '2'=>true, 6 '3'=>true, 7 '4'=>true, 8 '5'=>false 9 ) 10);
hiddenの値と各チェックボックスのuser_idとチェックの有無を上記のような形に整形したい
そうするためにはjavascriptの
// ここから
// このあたりまで
の箇所でどのようなデータ(data)に整形するのがよいでしょうか?
よろしくお願いいたします。
###追記
html
1<input type='hidden' name='issueid' value=10> 2<?php foreach($this−>users as $user):?> 3// $this->chkdusersはcontroller側でセッションん存在するユーザーの事 4<input type='checkbox' class="user" data-user_id="<?php echo($user['id']); ?>"<?php if(in_array($user['id'],$this->chkdusers)){echo(' checked');} ?>> 5<?php endforeach; ?> 6<button id="send">send</button>
javascript
1// user選択(単発用) 2$(".user").change(function(){ 3 $.ajax({ 4 type: 'POST', 5 url: 'ajax.php', 6 timeout: 10000, 7 data: {'issueid':$("input[name=issueid]").val(),'user_id': $(this).data('user_id'),'checked': $(this).prop('checked')}, 8 dataType: 'json' 9 }).done(function( data, status, xhr ){ 10 11 }); 12}); 13 14// 以下がコメントのやりとりで一気にチェック状態を変化させた時の処理 15 16// 全選択 17$("#allselect").click(function(){ 18 19 // 現在全選択されている場合は全解除 20 if($(".user").length == $(".user:checked").length) 21 { 22 $(".user").prop('checked',false); 23 } 24 else { 25 // 通常は全選択する 26 $(".user").prop('checked',true); 27 } 28 29 // この時$(".user").change(function()は起こらないなので全選択や全解除の情報、つまり 30 // ページ内の全ユーザーのチェックの有無を送らないといけないと思った。 31 32 // この部分を要領良く送るのにどういう書き方が良いのか?という質問でした。 33} 34 35// 一括絞込選択 36$("#ikkatu").click(function(){ 37 // コメントのやりとりで男のみ選択するなど特定の条件で一気にチェックボックスの状態を書き換える場合の処理 38 39 // 簡素化のため単純に偶数番目をチェックして奇数番目をチェックはずす処理にはしょってます。 40 $(".target:even").prop('checked',true); 41 $(".target:odd").prop('checked',false); 42 43 // この時$(".user").change(function()は起こらないなので 44 // ページ内の全ユーザーのチェックの有無を送らないといけないと思った。 45 46 // この部分を要領良く送るのにどういう書き方が良いのか?という質問でした。 47 48}
回答3件
あなたの回答
tips
プレビュー