ajaxでformを作っているが値がNoticeになってしまう。

Question

前提・実現したいこと

formでチェックされた(radioボタン)値をajaxを使ってphpに送る。
phpで受け取った値を見て配列と比較しヒットしたものを表示
（ヒットした場合は全て表示させる　例：["color"=>"red","type"=>"a"]という配列があってcolorの赤がチェックされて入ればcolorとtypeどちらも表示させる）
と、したいのですがまずformの値がうまく受け取れず進んでいません。

発生している問題・エラーメッセージ

//index.html
Notice: Undefined index: color in ...

該当のソースコード

// index.html
<form id="form" name="search" action="" method="POST">
  <input type="radio" id="color01" name="color" value="red"><label for="color01">赤</label>
  <input type="radio" id="color02" name="color" value="blue"><label for="color02">青</label>
  <button class="submit" value="検索">検索</button>
</form>

$(function () {
  $.ajax({
    url: 'ajax.php',
    type: "POST",
    dataType: "html",
    success: function(data){
      var html = '';
      $('.result').html('aaa');
      $('button').on('click',function(event){
        event.preventDefault();

        $('.result').html(data);
      });
    }
  });
});

<?php
$data = [
  "test"=>[
    [
      "color"=>"red",
      "type"=>"a"
    ],
    [
      "color"=>"red",
      "type"=>"b"
    ],
    [
      "color"=>"blue",
      "type"=>"c"
    ]
  ]
];
$color = filter_input( INPUT_POST, "color" );
?>
<p><?php echo $color; ?></p>
<p><?php echo 'ajax' ?></p>

試したこと

上記のコードでNoticeが出てしまいます。

<p><?php echo 'ajax' ?></p>

こちらの方が正常に"ajax"というテキストが表示されています。

ご教示のほど宜しくお願いします。

追記
一部修正しました。

また、

$color = filter_input( INPUT_POST, "color" );
// を書きにしたところ正常にtestと表示されました。
$color = 'test';

Comments

[退会済みユーザー]

dataType: "html" っていう指定はどこかに文献がありますか？

[MeB]

phpでhtmlを組んでそれjsに渡そうと思っているのでdataType: "html"にしているのですが、間違いでしょうか？

[退会済みユーザー]

さくっとネット検索しても、そのような文献がありませんでしたので、どこかに「dataType: "html"を書くべき」という記述があったのかと。

[MeB]

あ、すみません。https://teratail.com/questions/138593　こちらで質問させていただいてご回答がhtmlでしたので使用しております。

[退会済みユーザー]

m6u レスポンスの content-type が text/html なら html か text よ、公式の記述を見る限り DomNode に変換しているらしいですが → "html": Returns HTML as plain text; included script tags are evaluated when inserted in the DOM.

Answer 1

$.ajaxでdataを指定してないからでしょう

sample

postが前提であればデータ渡しはformdataがよいでしょう

<script>
$(function () {
  $('#form').on('submit',function(e){
    var fd = new FormData($('#form').get(0));
    e.preventDefault();
    $.ajax({
      "url": 'ajax.php',
      "type": "POST",
      "dataType": "html",
      "data":fd,
      "cache":false,
      "processData": false,
      "contentType": false,
    }).done(function(data){
      console.log(data);
    });
  });
});
</script>

<form id="form" name="search" action="" method="POST">
  <input type="radio" id="color01" name="color" value="red" checked><label for="color01">赤</label>
  <input type="radio" id="color02" name="color" value="blue"><label for="color02">青</label>
  <button class="submit" value="検索">検索</button>
</form>

一応サブミットしたときにバックグラウンドで処理してあります

Comments

[MeB]

ご回答ありがとうございます。
確かに指定していませんでした…。
上記のようにformを使用する際はserialize()を使用するでよいのでしょうか？
追加の質問で申し訳ございません。

[yambejp]

sample追記しました。formdataをおすすめします

[MeB]

いつもありがとうございます。
試して見ます。

[MeB]

formdataすごい便利でした！うまくとることができました。ありがとうございます！

Answer 2

$.ajaxでの、dataType: "html" っていう指定は不要。あっても邪魔にはならないけど。
$.ajaxでの、data がそもそもないので何もPOSTデータ送信していない。

テックノート – 【jQuery + Ajax】AjaxでPOST送信する方法
この記事の例では、json形式で送りたいから、
dataType: "json" を書いているのであって、
jsonでもjsonpでもなければそもそも指定しなければよいのです。

jQuery.ajax(options) - jQuery 日本語リファレンス

Comments

[MeB]

ご回答ありがとうございます。
記述しないという選択肢を考えていませんでした。
$.ajaxでの、dataですがphpで全て組んだ後にjs側に返してjsではただ特定のclass名の部分に表示させるだけの処理にしようとしているのですが、このような場合dataは教えていただいたサイトにあるように
{parameter1 : param1, parameter2 : param2 }
などと指定をしなければいけないものなのでしょうか？

[MeB]

すみません。
変なことを聞いていたみたいです。
{parameter1 : param1, parameter2 : param2 }
こちらの形で大丈夫そうでした。