質問するログイン新規登録
POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

990閲覧

WordPressで外部JSファイルに、POSTデータを wp_localize_scriptで渡したい。

ximaxin

総合スコア7

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/04/16 07:09

0

0

手詰まりになりまして、以下ご教授いただけましたら幸いです。
何卒よろしくお願いいたします。


#####環境
WordPress 5.3.2
Tehme:OceanWP Child


#####ディレクトリ構成
oceanWP-child
|_fanction.php
|_style.css
|_js
|_apply.js
|_plan.js
|_template
|_page-apply.php // 該当ページのslugは「apply」
|_page-plan.php // 該当ページのslugは「plan」


#####エラー内容
Chromeの検証ツールより以下のエラーが出ます。

Uncaught ReferenceError: acceptedCheck is not defined
at HTMLInputElement.onclick

当該エラーより、JSファイルを読めていないと思慮しています。


#####コード
やりたいこと詳細
example.jp/plan/ページからPOSTして、PHPで受け取り外部JSを経由し、example.jp/apply/ページのテキストエリアで受け取りたいです。

html

1// slugが「plan」の固定ページです。こちらからPOSTします。 2<form action="https://www.example.jp/apply/" method="post" name="form1"> 3 <input type="hidden" name="text-plan-a" value="プランA"> 4 <input type="submit" value="プランA"> 5</form> 6 7<form action="https://www.example.jp/apply/" method="post" name="form2"> 8 <input type="hidden" name="text-plan-b" value="プランB"> 9 <input type="submit" value="プランB"> 10</form> 11 12<!-- --> 13 14// slugが「apply」の固定ページです。こちらでPOSTを受け取りたいです。 15<form method="post" action="https://www.example.jp/apply/form/" id="formapply" name="formapply"> 16 <input type="checkbox" id="accept1" name="accept1" value="sample1_checked">sample1に同意<br> 17 <input type="checkbox" id="accept2" name="accept2" value="sample2_checked">sample2に同意<br> 18 <input type="checkbox" id="accept3" name="accept3" value="sample3_checked">sample3に同意<br> 19 <input type="text" id="hiddenForm" name="hiddenForm" value=""> 20 <input type="button" value="次のページへ" onclick="acceptedCheck('formapply', 'https://www.enecre-denki.jp/apply/form/', 'POST');"> 21 22//上記、<input type=text>の要素は少しトンチンカンですが、POSTデータが受け取れるか確認のために設置しています。 23</form>

php

1//子テーマのfunction.phpの関連箇所の記述です。 2 3function load_google_cdn() { 4 if ( !is_admin() ){ 5 //jQueryを登録解除 6 wp_deregister_script( 'jquery' ); 7 8 //Google CDNのjQueryを出力 9 wp_register_script( 'myJquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js', array(), null, true ); 10 } 11} 12add_action( 'init', 'load_google_cdn' ); 13 14 15function mytheme_scripts(){ 16 if ($pagename = get_query_var('pagename')){ 17 if (file_exists(get_stylesheet_directory(). '/js/' . $pagename . '.js')){ 18 wp_enqueue_script( $pagename, get_stylesheet_directory_uri() . '/js/' . $pagename . '.js', array('myJquery'), null, true ); 19 if (isset($_POST)){ 20 $res = json_encode($_POST, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT); 21 wp_localize_script( $pagename, 'postArray', array('key01' => $res)); 22 } 23 } 24 } 25} 26add_action( 'wp_enqueue_script', 'mytheme_scripts' );

javascript

1// apply.jsファイルの記述です。 2var planA = postArray.key01['text-plan-a']; 3var planB = postArray.key01['text-plan-b']; 4 if (planA != null){ 5 document.getElementById('hiddenForm').value = planA; 6 }else if (planB != null){ 7 document.getElementById('hiddenForm').value = planB; 8 } 9 else{ 10 } 11 12function acceptedCheck(formName, url, method) { 13 var flag = false; 14 var f = document.forms[formName]; 15 if (document.formapply.accept1.checked){ 16 }if (document.formapply.accept2.checked){ 17 }if (document.formapply.accept3.checked){ 18 flag = true; 19 f.method = method; 20 f.action = url; 21 f.submit(); 22 return true; 23 } 24 else{ 25 alert("各種文書に同意される場合はチェックを入れてください。"); 26 return false;  27 } 28 }

以前は、Elementorで制作していた際、shortcodeでPOSTを汎用的に受け渡しできていたのですが、Elementorを削除し、JSファイルを外部化したら、全くPOSTデータの受け渡しを行えなくなりました。
記述内容が間違えているのか、全く見当違いの視点で考えているのかすら、わからない状態です。
現状八方塞がりの状況につき、何卒、お知恵を拝借したく、よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

add_action( 'wp_enqueue_script', 'mytheme_scripts' );

と書いていましたが、'wp_enqueue_scripts'のtypoでして、解決しました。
失礼しました。

投稿2020/04/17 10:00

ximaxin

総合スコア7

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.30%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問