POST が分からなくて死亡した件
こんにちは！今回は前回に引き続き PHP の POST 絡みです。
実務ではフォーム絡みの実装で POST を使用することが多いのですが、ドン詰まって◯時間溶かし…(実際に何時間溶かしたか、恥ずかしすぎて言えない)
自分の備忘 & 同じようにハマっている方に少しでも助けになればと思い、
今回は、
と題して PHP の POST について初心者がハマりやすい？ポイントをまとめてみようと思います。
POST についての概略は前回ブログで書いていますので、よろしければこちらも↓
disabled が付与されていると POST できない
フォームが薄くグレーがかってマウスカーソルを合わせても入力できないようになっている、アレです。
こういうの↓
例えば「入力画面」→「確認画面」に遷移した場合は、フォームを無効化しておきたいとかそういうケースに使うことがあると思いますが、
アレはフォームに disabled 属性が付与されているんですね。
その場合 disabled 属性を解除しないと POST できません。
「え？…そうなん……？？」
知らなかった。。
これを知らないがために延々時間溶かしてしまいました。。
しかし慌てることなかれ。
こういう場合は単純に disabled 属性を解除しましょう！
ソースコード
[input[type=”text”] のフォームがいくつかあるケースを想定したケースですが、フォームの要素を querySelectorAll を使って全て取得して、それを for 文で回して disabled 属性を解除します。
// 全てのフォームを有効化する
let disabledForm = document.querySelectorAll('input[type="text"]');
for(let i = 0; i < disabledForm.length; i++){
disabledForm[i].disabled = false;
}上記のフォームの disabled 属性を解除する処理を submit する前にやっておけばきちんと POST されます。
実際 disabled 属性が付与されている場合にどのような挙動になるのかというのは、下記をクリックしていただければわかると思います。
これはドン詰まって指摘されるまで気づかなかった…(悲)
JavaScript で submit する方法
form を submit した際に、データが POST されるわけですが、
いろいろ訳あって「 input type=”submit” 」以外の要素に対して submit させたいというケースもあるかと思います。
(クラスを他と共有していて、div タグや input type=”button” 、画像データを使っているなど)
そういう場合は Javascript で動的に submit させてあげればオッケイです。
ソースコード
submit させたい要素にクリックイベントを設定して、submit() メソッドでフォームを送信します。
// form 要素を取得する
const form = document.querySelector('#form');
const btnSubmit = document.querySelector('.btn_submit'); // submit させたい要素
// クリックイベントを設定する
btnSubmit.addEventListener('click', () => {
form.submit(); // form を送信する
}, false);これもわかるまでめちゃくちゃハマりましたね〜…はぁ悲し。
また上記のクリックイベント内に「 form.action = ‘URL(POST送信先)’; 」とすれば、ボタンごとに POST 送信先を変えるということもできるワケです。
いろいろ奥が深いですね。。
まとめ
いかがだったでしょうか。
今回は PHP の POST 絡みで自分がめちゃくちゃ詰まったポイントについてまとめました。
詰まるとつい自力解決したくなるんですが(自分で解決できたら嬉しいもんね！)、最近は詰まったら早めに質問した方がいいなって思ってます。
会社に所属している限りは勤務時間は限られているし、あんまり時間を溶かすのもモンダイかと…。難しい判断ですが。
時は金なり?
ここまでお読みいただき、ありがとうございました！
