POSTを使用せずinput値を取得したい

Question

cakePHPで選択データの出力フォームを改修しています

画面で設定した日付を帳票に出力させたく、
inputを使用して入力フォームを作成しました。

しかし、出力ボタンが数種類あり、それぞれでPOSTされる項目が異なっている状態です。
あまり既存の処理に変更は加えたくはなく、
ビューファイルの下部に
「ファイル(input_date.txt)に入力した日付を書き込む」ための
新規ファンクションを作成することで対応したいと考えています。

ファイルへの書き込み、書き込まれたデータの帳票への出力は成功したのですが、
肝心な、画面で設定した日付の取得方法が不明な状態です。

押下されたボタンによってPOST範囲が異なるため、
他の手法で取得したいのですが、
方法がわからない状態です。

jQueryを使用すればinputのvalueを取得できるらしいのですが...
コードをご教授願います。
不足な情報等あれば、お知らせください。

##view(output.ctp)

---

input箇所

<?php echo $this->F->input("input_date",array('type' => 'date', 'dateFormat' => 'YMD','monthNames' => false, 'id' => 'inputDateId'));?>

---

ajaxPOST送信箇所

<script> var y = $('#inputDateIdYear').val(); //年 var m = $('#inputDateIdMonth').val(); //月 var d = $('#inputDateIdDay').val(); //日 $.ajax({ type:"post", url:"<?php echo [output.ctpを指定] ?>", data:[y,m,d] success: function(ret){ console.log(ret); }, error:function(XMLHttpRequest, textStatus, errorThrown){ } }); </script>

---

ファイル書き込み箇所

function test(){
<?php
$write_date = ?

	App::uses('Folder', 'Utility');
	App::uses('File', 'Utility');

	$file = new File(WWW_ROOT.'input_date.txt',true);
	$file->write($write_date);
	$file->close();
?>

}

Comments

[退会済みユーザー]

そのinput要素にidもしくはclassは設定できますか？

[mizore]

コメントありがとうございます。
id(inputDateId)を設定したところ。
ブラウザの開発モードで、
年 ID="inputDateIdYear"
月 ID="inputDateIdMonth"
日 ID="inputDateIdDay"
となっていることを確認しました。

Answer 1

idが設定されてあれば
Selectors - jQuery 日本語リファレンス
#id - jQuery 日本語リファレンス

        $(function(){
            // Ajax button click
            $('#ajax').on('click',function(){
                $.ajax({
                    url:'./request.php',
                    type:'POST',
                    data:{
                        'y':$('#inputDateIdYear').val(),  // 年
                        'm':$('#inputDateIdMonth').val(),  // 月
                        'd':$('#inputDateIdDay').val(),  // 日
                    }
                })
                // Ajaxリクエストが成功した時発動
                .done( (data) => {
                    $('.result').html(data);
                    console.log(data);
                })
                // Ajaxリクエストが失敗した時発動
                .fail( (data) => {
                    $('.result').html(data);
                    console.log(data);
                })
                // Ajaxリクエストが成功・失敗どちらでも発動
                .always( (data) => {

                });
            });
        });

みたいな書き方で年月日を取得して送信できるはず。
ボタンにイベントを登録するのを忘れずに。

参考：
[jQuery]フォーム操作、input・selectの値（value）取得のあれこれ - Qiita

んで、POSTせずjs(jQuery)上からphpに送信するためにjQuery.Ajaxつかいます。
はじめてのAjax(jQuery) 2018年版 - Qiita
参考記事内の「$.ajax」とかかいてあるあたりの流れをおさらいしてください。

Comments

[mizore]

jQueryで取得した結果を変数へ入れるところで構文エラーになってしまいます。
y = $('#inputDateIdYear').val(); // 年
m = $('#inputDateIdMonth').val(); // 月
d = $('#inputDateIdDay').val(); // 日

構文エラー,unexpected'(',expecting'valiable

yを$yにしたところ、以下の構文エラーとなりました。
構文エラー,unexpected'(',expecting'valiable'または'$'

また、yを　var yにしてみた結果
構文エラー,unexpected'var’,expecting'EOF'
となりました。

知識不足で申し訳ありません。
PHPの変数に格納する方法をお教えいただけないでしょうか。

[退会済みユーザー]

そもそもjsのコードのつもりで書いてますから、
phpコードブロック内ではなく、フォーム表示するhtml上のjsブロックに記載します。
yやmやdの前になにか文法エラーがないですかね。
私が提示した部分については文法エラーはなさそうに思えるので。
js(jQuery)上でinputから値を取り出して、Ajaxにてphp宛にPOSTする、って流れはOKですか。

[mizore]

質問上のコードを修正しました。
POSTの宛先は自ファイルにしてあります。
構文エラーはなくなりました。
しかし、$_POSTは空の状態です。POST方法が悪いのでしょうか…

[退会済みユーザー]

ボタンにイベントを追加してAjaxでPOST送信するコードを書かないと送信されませんが、いかがでしょうか。