Q&A
javascript部分のコードのインデントが滅茶苦茶で大変読みづらいです。調整していただけますか？（javascript整形で調べるとある程度きれいにしてくれる無料サービスが出てくるのでご活用ください）
前提・実現したいこと
(ここの続きです)
jQueryを用いて以下のことをしようとしています。
- jQueryを用いたAjaxを用いてデータをPOST送信する。
- データはPHPの関数で処理し、jsonで返す。
- バリデーションを行うPHPの関数(総称してFとします)はバリデーションを行ってその結果によって文字列を返すものであり、
デフォルトでは空文字列だが異常があればエラーメッセージを返す。
現時点ではバリデーションを行った結果のみを返す。
- バリデーションを行ったらdivタグで指定された位置に出力する。
- バリデーションが通ればエラーメッセージを消去する。
発生している問題・エラーメッセージ
jsonにデフォルトで入る値がエラーメッセージとなることは分かりますが
ラジオボタン等で値を入れた時にそのエラーメッセージがそのまま出力され、jsonの値が更新されません。
尚、PHPで変数の値を定義した際はその値によってjsonの値は問題なく変化します。
また、['name=b[]']のチェックボックスの部分において値を入れてもそれが本来出したい配列として出力されません。
これは、$bにarray("1","2","3")を入れた時に"1X,2X,3X"と表示したいのですがそれができずに空文字列が返される状況です
(エラーメッセージ自体は消えるので配列自体は読み込めているはずです)
2018/4/14追記
指導に基づきソースコードを差し替えました。
該当のソースコード
HTML
1<head> 2 <script type="text/javascript" src="jquery-3.2.0.min.js"></script> 3 <script type="text/javascript" src="validation.js"></script> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title></title></head> 6<p> 7 <input type="radio" name="a" value="a" id="a"><label for="a">A</label> 8 <input type="radio" name="a" value="b" id="b"><label for="b">B</label> 9 <input type="radio" name="a" value="c" id="c"><label for="c">C</label> 10</p> 11 <div id="a_valid"></div> 12<p> 13 <input type="radio" name="a" value="a" id="a"><label for="a">a</label> 14 <input type="radio" name="a" value="b" id="b"><label for="b">b</label> 15 <input type="radio" name="a" value="c" id="c"><label for="c">c</label> 16 17</p> 18 19 20<div id="att_valid"></div> 21<p> 22 23 24 <input type="checkbox" name="b[]" value="0" id="0"><label for="0">0X</label><br><br> 25 <input type="checkbox" name="b[]" value="1" id="1"><label for="1">1X</label><br><br> 26 <input type="checkbox" name="b[]" value="2" id="2"><label for="2">2X</label><br><br> 27 <input type="checkbox" name="b[]" value="3" id="3"><label for="3">3X</label><br><br> 28 <input type="checkbox" name="b[]" value="4" id="4"><label for="4">4X</label><br><br> 29 <input type="checkbox" name="b[]" value="5" id="5"><label for="5">5X</label><br><br> 30 <input type="checkbox" name="b[]" value="6" id="6"><label for="6">6X</label><br><br> 31 <input type="checkbox" name="b[]" value="7" id="7"><label for="7">7X</label><br><br> 32 <input type="checkbox" name="b[]" value="8" id="8"><label for="8">8X</label><br><br> 33 <input type="checkbox" name="b[]" value="9" id="9"><label for="9">9X</label><br><br> 34 <input type="checkbox" name="b[]" value="10" id="10"><label for="10">10X</label><br><br> 35 <input type="checkbox" name="b[]" value="11" id="11"><label for="11">11X</label><br><br> 36 <input type="checkbox" name="b[]" value="12" id="12"><label for="12">12X</label><br><br> 37 <input type="checkbox" name="b[]" value="13" id="13"><label for="13">13X</label><br><br> 38 <input type="checkbox" name="b[]" value="14" id="14"><label for="14">14X</label><br><br> 39 <input type="checkbox" name="b[]" value="15" id="15"><label for="15">15X</label><br><br> 40 <input type="checkbox" name="b[]" value="16" id="16"><label for="16">16X</label><br><br> 41 <input type="checkbox" name="b[]" value="17" id="17"><label for="17">17X</label><br><br> 42 <input type="checkbox" name="b[]" value="18" id="18"><label for="18">18X</label><br><br> 43 <input type="checkbox" name="b[]" value="19" id="19"><label for="19">19X</label><br><br> 44 <input type="checkbox" name="b[]" value="20" id="20"><label for="20">20X</label><br><br> 45 <input type="checkbox" name="b[]" value="21" id="21"><label for="21">21X</label><br><br> 46 <input type="checkbox" name="b[]" value="22" id="22"><label for="22">22X</label><br><br> 47</p> 48<br><br> 49<div id="c_valid"></div> 50<div id="d_valid"></div> 51 52<p> 53 <select name="c"> 54 <option selected disabled></option> 55 <option value="0">0</option> 56 <option value="1">1</option> 57 <option value="2">2</option> 58 <option value="3">3</option> 59 <option value="4">4</option> 60 <option value="5">5</option> 61 <option value="6">6</option> 62 <option value="7">7</option> 63 <option value="8">8</option> 64 <option value="9">9</option> 65 <option value="10">10</option> 66 </select> 67 <select name="d"> 68 <option selected disabled></option> 69 <option value="0">0</option> 70 <option value="1">1</option> 71 <option value="2">2</option> 72 <option value="3">3</option> 73 <option value="4">4</option> 74 <option value="5">5</option> 75 <option value="6">6</option> 76 <option value="7">7</option> 77 <option value="8">8</option> 78 <option value="9">9</option></select></p> 79 80 <div id="f_valid"></div> 81 <p> 82 <input type="radio" name="f" value="0" id="F"><label for="F">F</label><br><br> 83 <input type="radio" name="f" value="1" id="E"><label for="E">E</label><br><br> 84 <input type="radio" name="f" value="2" id="D"><label for="D">D</label><br> 85 <input type="radio" name="f" value="3" id="C"><label for="C">C</label><br><br> 86 <input type="radio" name="f" value="4" id="B"><label for="B">B</label><br><br> 87 <input type="radio" name="f" value="5" id="A"><label for="A">A</label></p> 88 <!--ここまで--> 89</div><br>
PHP
1<?php 2header('Content-Type: application/json'); 3function valid_a($a) 4{ 5 $error_a=""; 6 if (!isset($a)) { 7 $error_a = "<p style=\"color:#ff2800;\">"."入力されていません。"."</p>"; 8 } elseif (($a != "m") && ($a != "f") && ($a != "Q")) { 9 $error_a = "<p style=\"color:#ff2800;\">"."不正な入力です。"."</p>"; 10 } 11 return $error_a; 12} 13 14function valid_a_echo($a) 15{ 16 $a_echo =""; 17 $error_a=""; 18 $a_ans=array("a"=>"A","b"=>"B","c"=>"C"); 19 $error_messe = valid_a($a); 20 if ($error_messe=="") { 21 $a_echo = $a_ans[$a]; 22 }else{ 23 $error_a=$error_messe; 24 } 25 return compact('a_echo','error_a'); 26 } 27 28 29function valid_b($b){ 30 $error_b=""; 31 $b2 = array(/*配列の中身*/); 32 if (empty($b)) { 33 $error_b = "<p style=\"color:#ff2800;\">"."入力されていません。"."</p>"; 34 }else{ 35 for ($i = 0; $i <count($b) ; $i++) { 36 if ((intval($b[$i])<0||intval($b[$i])>count($b2)-1)&&!ctype_digit($b[$i])) { 37 $error_b = "<p style=\"color:#ff2800;\">"."不正な入力です。"."</p>"; 38 break; 39 } 40 } 41 if ($i == count($b) - 1) { 42 $error_b=""; 43 } 44 } 45 return $error_b; 46} 47 48function valid_b_echo($b) 49{ 50 $b_echo = ""; 51 $error_b = ""; 52 $error_messe = valid_b($b); 53 $b2 = array(/*配列の中身*/); 54 $array=array(); 55 if ($error_messe=="") { 56 for ($j = 0; $j <count($b) ; $j++) { 57 array_push($array,$b2[intval($b[$j])]); 58 $b_echo=implode(",",$array); 59 } 60 }else{ 61 $error_b=$error_messe; 62 } 63 return compact('b_echo','error_b'); 64} 65 66function valid_c($c) 67{ 68 $error_c=""; 69 if (!isset($c)) { 70 $error_c = "<p style=\"color:#ff2800;\">"."入力されていません。"."</p>"; 71 } elseif ((intval($c)<0||intval($c)>10)&&!ctype_digit($c)) { 72 $error_c = "<p style=\"color:#ff2800;\">"."不正な入力です。"."</p>"; 73 } 74 return $error_c; 75} 76 77function valid_d($d) 78{ 79 $error_d=""; 80 if (!isset($d)) { 81 $error_d = "<p style=\"color:#ff2800;\">"."入力されていません。"."</p>"; 82 } elseif ((intval($d)<0||intval($d)>9)&&!ctype_digit($d)) { 83 $error_d = "<p style=\"color:#ff2800;\">"."不正な入力です。"."</p>"; 84 } 85 return $error_d; 86} 87 88function valid_e_echo($c,$d) 89{ 90 $e_echo =""; 91 $error_c=valid_c($c); 92 $error_d=valid_d($d); 93 if (($error_c=="")&&($error_d=="")) { 94 $e_echo = $c.$d; 95 } 96 return compact('e_echo','error_c','error_d'); 97 } 98 99function valid_f($f) 100{ 101 $error_f=""; 102 if (!isset($f)) { 103 $error_f = "<p style=\"color:#ff2800;\">"."入力されていません。"."</p>"; 104 } elseif ((intval($f)<0||intval($f)>9)&&!ctype_digit($f)) { 105 $error_f = "<p style=\"color:#ff2800;\">"."不正な入力です。"."</p>"; 106 } 107 return $error_f; 108} 109 110function valid_f_echo($f) 111{ 112 $f_array = array(/*配列の中身*/); 113 $f_echo =""; 114 $error_f =""; 115 $error_messe=valid_f($f); 116 if ($error_messe === "") { 117 $f_echo = $f_array[intval($f)]; 118 }else{ 119 $error_f=$error_messe; 120 } 121 return compact('f_echo','error_f'); 122} 123$a=filter_input(INPUT_POST,'a'); 124$b=filter_input(INPUT_POST,'b',FILTER_DEFAULT,FILTER_REQUIRE_ARRAY); 125$c=filter_input(INPUT_POST,'c'); 126$d=filter_input(INPUT_POST,'d'); 127$f=filter_input(INPUT_POST,'f'); 128$ans=json_encode( 129 array_merge(valid_a_echo($a), 130 valid_b_echo($b), 131 valid_e_echo($c,$d), 132 valid_f_echo($f)),JSON_UNESCAPED_UNICODE); 133 134echo $ans; 135 136 ?>
js
1 $("[name=gender_a]").change( 2 $.post("function-att.php",{gender_a:$("[name=gender_a]").val()}, 3 function(response){$("#gender_valid").html(response.error_gender);},'json'); 4 ); 5 $("[name='attribute[]']").change( 6 $.post("function-att.php",{attribute:attribute},function(response){ 7 var attribute=[]; 8 $("[name='attribute[]']:checked").each(function(){attribute.push(this.value);}); 9 $("#att_valid").html(response.error_att);},'json'); 10 ); 11 $("[name=age10_a]").change( 12 $.post("function-att.php",{age10_a:$("[name=age10_a]").val()}, 13 function(response){$("#age10_valid").html(response.error_10);},'json'); 14 ); 15 $("[name=age1_a]").change( 16 $.post("function-att.php",{age1_a:$("[name=age1_a]").val()}, 17 function(response){$("#age1_valid").html(response.error_1);},'json'); 18 ); 19 $("[name=fond_a]").change( 20 $.post("function-att.php",{fond_a:$("[name=fond_a]").val()}, 21 function(response){$("#fond_valid").html(response.error_fond);},'json'); 22 ); 23}); 24//ajaxメソッドをfunctionでくくっても結果は変わりませんでした
補足情報（FW/ツールのバージョンなど）
フレームワークはなし
PHPは最新版
また「本来出したい配列」と「現在出ている配列」についてもサンプルデータを追記してください。
あと、念のためチェックボックス他省略部分のHTMLも追記してください。
回答2件
0
それぞれのnameごとに送るタイミングをずらしたいのでしょうか？
単純にformdataで掴んで毎回全データをおくってはいけませんか？
- send.htm
javascript
1$(function(){ 2 $('[name=a],[name="b[]"]').on('change',function(){ 3 var fd=new FormData($(this).closest('form').get(0)); 4 $.ajax({ 5 "url":"recv.php", 6 "type":"post", 7 "data":fd, 8 "cache":false, 9 "processData": false, 10 "contentType": false, 11 }).done(function(data){ 12 console.log(data); 13 }); 14 }); 15});
HTML
1<form> 2<input type="radio" name="a" value="a" id="a"><label for="a">A</label> 3<input type="radio" name="a" value="b" id="b"><label for="b">B</label> 4<input type="radio" name="a" value="c" id="c"><label for="c">C</label><br> 5<input type="checkbox" name="b[]" value="0" id="0"><label for="0">0X</label><br> 6<input type="checkbox" name="b[]" value="1" id="1"><label for="1">1X</label><br> 7<input type="checkbox" name="b[]" value="2" id="2"><label for="2">2X</label><br> 8</form> 9
- recv.php
PHP
1<?php 2print_r($_POST); 3?> 4
投稿2018/04/09 02:56
総合スコア114779
0
jsonの値が更新されません。
おそらく引数の順番が違うのでは、と思います。
jQuery.post( url [, data ] [, success ] [, dataType ] )
なので、
javascript
1$.post("function-b.php", 'json', { 2 a: $("[name=a]").val() 3}
ではなく
javascript
1$.post("function-b.php", 2 { 3 a: $("[name=a]").val() 4 }, 5 function(response){ 6 $("#a_valid").html(response.error); 7 }, 8 'json', 9 10
こういう感じ。（未検証です。イメージだけ持ってもらえれば）
PHP側で受け取った$_POSTをjson_encode()してfile_put_contents()とかで出力してみれば分かりますが、下記が渡されています。
{"json":""}
つまり引数の順番が違うため、常に空が送られている状態、ということになります。
明示的にするために、下記のようなsetting方式に変更されては？
javascript
1$.ajax({ 2 type: 'POST', 3 url: url, 4 data: data, 5 success: success, 6 dataType: dataType 7});
※$.post()は内部的には$.ajax()が実行されています。
['name=b[]']のチェックボックスの部分において値を入れてもそれが本来出したい配列として出力されません。
javascript
1$(function () { 2 var b = []; 3 $("[name='b[]']:checked").each(function () { 4 b.push(this.value); 5 });
この位置にあるので、「HTML読み込み完了時のみ」check状態が取得されています。
チェックした場合にチェック状態を取得するのであれば下記の中に入れると良いです。
javascript
1$("[name='b[]']").change(function () { 2
投稿2018/04/09 00:46
総合スコア80850
遅くなってしまい申し訳ありません。
ご教授いただいたとおり直し、冒頭の$(function()...の部分の削除と配列に値を入れる処理を変更時に行うような改良とajaxメソッドへの書き換え･引数の順番変更を行いましたが
状況は変わりませんでした。
他に「ここを変えれば良い」と思い当たることはございますか?
(尚文字数の都合により質問文には書けませんでした。)
ソースコードを追記ではなく差し替えてください。
そのときに「回答から編集した」旨を添えておくと良いです。
どこまで想定通りに通っているのでしょうか？
ajaxのpost前の値、ajaxでのphpの値、response結果それぞれのポイントで確認してみてください。
※javascriptはconsole.log() phpはfile_put_contents()でログファイルに出力すると良いです。
そもそも値が一切代入されませんでした。
ちなみに念の為確認したいのですが
jQueryでajaxをする際に外部ファイルで読み込んでいるのですが
それが原因ということは考えられますか?
(今気づいたのですが現在jQueryのソースファイル(ローカル)と今触れているjavascriptがheadタグで2つともhtmlに読み込まれている状況です)
今追記しました
あなたの回答
tips
プレビュー
