jQueryで取得した値をPHPに変数として渡したい

実現したいこと

チェックボックスで選択した値を変数としてPHPに渡したい。

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

チェックボックスの値を変更すると、PHPに変数として値が渡される事が理想ですが、以下のエラーメッセージが表示され、PHPに値を渡す事が出来ません。
dataTypeを"text"にするとconsole.logに値が入ってきます。
またdataTypeを"text"にするとエラーメッセージは表示されませんが、PHPの方に値が入ってきません。
エラーメッセージも構文エラーを指摘されていると思うのですが、dataTypeを"text"と"json"に変更したのみでどこが間違っているのか検討がつきません。

SyntaxError: Unexpected token < in JSON at position 0

該当のソースコード

PHP
1<input type="checkbox" name="val[]" value="val1" id="ckpoint1"><label for="ckpoint1">選択肢1</label>
2<input type="checkbox" name="val[]" value="val2" id="ckpoint2"><label for="ckpoint2">選択肢2</label>
3<input type="checkbox" name="val[]" value="val3" id="ckpoint3"><label for="ckpoint3">選択肢3</label>
4
5<?php
6    if (isset($_POST['selectval'])) {
7        echo '変数有り';
8        if ($_POST['selectval'] == 'val1') {
9            //val1の処理
10        } elseif ($_POST['selectval'] == 'val2') {
11            //val2の処理
12        } elseif ($_POST['selectval'] == 'val3') {
13            //val3の処理
14        }
15    } else {
16        echo '変数無し';
17    }
18?>

JavaScript
1$('input[type="checkbox"]').on('click', function() {
2    if ($(this).prop('checked')){
3        $('input[type="checkbox"]').prop('checked', false);
4        $(this).prop('checked', true);
5
6    var getval = $(this).val();
7    $.ajax({
8        type: "POST",
9        url: "index.php",
10        dataType : "json",
11        data: {
12            "selectval" : getval,
13        }
14      })
15    .done(function(data){
16        console.log(getval);
17      })
18    .fail(function(XMLHttpRequest, status, e){
19        console.log(e);
20      });
21    }
22});

試したこと

var getval = $(this).val();をvar getval = 'aaa';などに変更しても同じ結果なのでvar getvalの取得には問題はないと思いますが、原因があればご教授頂けたらと思います。

url: "index.php"の部分をインクルードしているPHPファイルに修正したところ、（url: "include-test.php"に修正）
エラーメッセージは表示されなくなりましたが、PHP側に変数が渡っていないようです。
確認用に入れている「変数無し」が表示されたままになっています。

補足情報

該当のPHPコードはindex.phpではなく、index.phpで呼び出している別のPHPファイルに記述しています。
includeを使用していても問題にはならないと思っていますが、間違っていましたらご指摘頂ければと思います。

参考にしたURL：https://tagsqa.com/detail/57110

m.ts10806

2022/07/31 11:49

「該当のソースコード」にhtmlが書かれていますが、これは？ htmlも「レスポンス出力」の情報ですよ。

uzr1709

2022/07/31 12:39

「レスポンス出力」の意が理解できず申し訳ありません。チェックボックスで選択した値を変数としてPHPに渡したいので、そのチェックボックス部分です。選択した値をjQueryで拾い、ajaxでPHPに変数として渡しその下の処理を選択肢によって変更したいです。チェックボックスの値取得までは問題なく出来ているのでエラー箇所とは無関係と思っておりましたが、違うのでしょうか。

m.ts10806

2022/07/31 20:54

Ajaxとして実行されるPHPにHTMLを書いてあるのであれば、それも「出力」なのでJSON形式としてのエラーが出るのは当然という意味になります。 PHPタグ以外は全部出力として扱われるので。 https://www.php.net/manual/ja/language.basic-syntax.phptags.php 違うPHPなのであれば、コードブロックも別にしてもらった方が良いです。

uzr1709

2022/07/31 23:37

ありがとうございます。新しくajax.phpを作成し、該当のソースコードのPHPコード部分のみ切り出したところ、dataType : "json"であっても「SyntaxError: Unexpected token < in JSON at position 0」のエラーメッセージは表示されなくなりました。ただ、ajaxからの値が取れていないのは変わらないようで「変数無し」が表示されています。

行動規範の内容に同意します

回答3件

dataType : "json"にしているのにPHPが戻しているデータがJSON形式の文字列じゃないのでエラーになってるんじゃないかと

試しにこんな感じのPHP組んで動かしてみたけどPHPにデータ渡りましたよ？これで渡ってなかったら違う原因があるのかも

php
1<?
2    if (isset($_POST['selectval'])) {
3        $result = '変数有り';
4        if ($_POST['selectval'] == 'val1') {
5            //val1の処理
6        } elseif ($_POST['selectval'] == 'val2') {
7            //val2の処理
8        } elseif ($_POST['selectval'] == 'val3') {
9            //val3の処理
10        }
11        echo $_POST['selectval'];
12        exit();
13    } else {
14        $result = '変数無し';
15    }
16?>
17<!DOCTYPE html>
18<html lang="ja">
19
20<head>
21    <meta charset="UTF-8">
22    <title>PHPテスト</title>
23    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
24    <script>
25        $('document').ready(function () {
26            $('input[type="checkbox"]').on('click', function () {
27                if ($(this).prop('checked')) {
28                    $('input[type="checkbox"]').prop('checked', false);
29                    $(this).prop('checked', true);
30                    var getval = $(this).val();
31                    $.ajax({
32                        type: 'POST',
33                        url: 'checked.php',
34                        dataType: 'text',
35                        data: {
36                            'selectval': getval,
37                        }
38                    }).done(function (data) {
39                        console.log(getval);
40                        $('#result').html(data);
41                    }).fail(function (XMLHttpRequest, status, e) {
42                        console.log(e);
43                    });
44                }
45            });
46        });
47    </script>
48</head>
49
50<body>
51    <input type="checkbox" name="val[]" value="val1" id="ckpoint1"><label for="ckpoint1">選択肢1</label>
52    <input type="checkbox" name="val[]" value="val2" id="ckpoint2"><label for="ckpoint2">選択肢2</label>
53    <input type="checkbox" name="val[]" value="val3" id="ckpoint3"><label for="ckpoint3">選択肢3</label>
54    <div id="result">
55        <?= $result ?>
56    </div>
57</body>
58
59</html>

投稿2022/07/31 10:22

編集2022/08/01 07:59

RiaFeed

総合スコア2703

uzr1709

2022/07/31 11:32

回答ありがとうございます。 json_decode()で文字列の変換をしようとしたのですが、PHPのif (isset($_POST['selectval'])){}に入ってこないため処理が出来ません。またajaxのurlを修正したところ、dataType : "json"でもdataType : "text"でも同じ状態で、if (isset($_POST['selectval'])){}に処理が入らず、echo '変数無し';が表示されている状態です。 PHPに渡す前、ajaxの方の処理で文字列を返還する必要があるのでしょうか？

uzr1709

2022/08/01 16:06

回答頂きありがとうございます。修正していただいたコードで動作自体は確認出来ました。動作したものを見て考え違いをしていたかもしれない事に気付きました。理想の動きは、var getval = $(this).val();で取得した値（val1など）が変数としてPHP（index.php）に返り変数の値によって処理を分ける事だったのですが、 getvalの値のみを変数としてPHPの処理に渡すことはajaxでは不向きなのでしょうか？ ajaxは最近勉強を始めたばかりで見当違いの事としていましたらすみません。

行動規範の内容に同意します

自分自身にpostするのでしょうか？変更したチェックボックスの値を渡す場合は
チェックされていなくてもデータが飛びますが良いのでしょうか？

PHP
1<?PHP
2if($_SERVER["REQUEST_METHOD"]=="POST"){
3  $val=$_POST["selectval"]??null;
4  print json_encode($val);
5  exit;
6}
7?>
8<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
9<script>
10$(function(){
11  $('[name="val[]"]').on('change', function() {
12    var getval = $(this).val();
13    $.ajax({
14    type: "POST",
15    dataType : "json",
16    data: {
17      "selectval" : getval,
18    },
19    cache:false,
20    }).done(function(getval){
21      console.log(getval);
22    }).fail(function(XMLHttpRequest, status, e){
23      console.log(status);
24    });
25  });
26});
27
28</script>
29<form>
30<input type="checkbox" name="val[]" value="val1" id="ckpoint1"><label for="ckpoint1">選択肢1</label>
31<input type="checkbox" name="val[]" value="val2" id="ckpoint2"><label for="ckpoint2">選択肢2</label>
32<input type="checkbox" name="val[]" value="val3" id="ckpoint3"><label for="ckpoint3">選択肢3</label>
33</form>

投稿2022/08/01 00:46

編集2022/08/01 00:47

yambejp

総合スコア117674

uzr1709

2022/08/01 06:29

回答ありがとうございます。チェックボックスは1つだけ選択されるようにしています。（質問時のJSコードを修正致しました。）本来選択が1つのみの場合ラジオボタンを使うべきなのですが、事情がありチェックボックスにしております。ページ内で値を切り替えたいため、自分自身へのPOSTになります。もし考え方が違っていましたらご指摘頂けたら助かります。また教えて頂きましたコードをまずそのまま動作させてみようとしたのですが、「XMLHttpRequest : 200」「parsererror」エラーが出てしまいました。使用しているjQueryのバージョンが3.6.0なのですが関係はあるでしょうか？

行動規範の内容に同意します

自己解決

RiaFeed様、yambejp様、回答ありがとうございました。

RiaFeed様に教えて頂いた方法でtext形式でjsonを動かす事ができ、
yambejp様のPHPの受け取り方法を参考にさせて頂き希望通りの動きを実装する事が出来ました。
またm.ts10806様に教えて頂いたようにajax.phpを作成し、受け取るためのPHPの記述を切り離して作成致しました。
以下のコードとなります。
お知恵を貸して頂きありがとうございました。

JavaScript
1$('input[type="checkbox"]').on('click', function() {
2    if ($(this).prop('checked')){
3        $('input[type="checkbox"]').prop('checked', false);
4        $(this).prop('checked', true);
5
6    var getval = $(this).val();
7    $.ajax({
8        type: "POST",
9        url: "ajax.php",
10        dataType : "json",
11        data: {
12            "selectval" : getval,
13        }
14      })
15    .done(function(data){
16        console.log(getval);
17        $('#result').html(data);
18      })
19    .fail(function(XMLHttpRequest, status, e){
20        console.log(e);
21      });
22    }
23});

PHP
1<?php
2    if($_SERVER["REQUEST_METHOD"]=="POST"){
3        $val=$_POST["selectval"];
4        $valstr = json_encode($val, JSON_UNESCAPED_UNICODE);
5        $vala = json_decode($valstr, true);
6
7        if ($vala == 'val1') {
8            //val1の処理
9        } elseif ($vala == 'val2') {
10            //val2の処理
11        } elseif ($vala == 'val3') {
12            //val3の処理
13        }
14        } else {
15            echo '変数無し';
16        }
17        exit;
18    }
19?>