WordpressのCocoonというテーマでjavascriptを動かしたいです

Wordpressにて『form1』に入力した郵便番号を『form2』に引き継ぎたいです。
PHPのPOSTではなく、javascriptで出来るようなのですけれど、以下のコード
を書いても動いてくれませんでした。
どこが間違っていますでしょうか？

【http://site/form1】
郵便番号<input type="text" name="zip" value="" size="40" id="zip">
<a href="http://site/form2/">
<span class="elementor-button-text">申込む</span>
</a>

【http://site/form2】
郵便番号<input type="text" name="zip" value="" size="40" id="zip2">

【JavaScript.js】
function handleSubmit () {
const zip = document.getElementById('zip').value;
localStorage.setItem('zip', zip);
window.location.href = 'http://site/form1/';
}
function handleSubmitForm2() {
const zip = document.getElementById('zip2').value;
localStorage.setItem('zip2', zip);
window.location.href = 'http://site/form2/';
}
window.addEventListener('load', () => {
// alert(window.location.href);
if (window.location.href == 'http://site/form1/') {

const zip = localStorage.getItem('zip');
document.getElementById('zip').value = zip;
}
if (window.location.href == 'http://site/form2/') {
const zip2 = localStorage.getItem('zip2');
document.getElementById('zip').value = zip2;
}
if (window.location.href == 'http://site/') {

document.getElementById('zip').value = '';
document.getElementById('zip2').value = '';
}
})

No.1 ベストアンサー 回答者： fujillin 回答日時： 2021/05/19 14:26

こんにちは

Wordpressは存じませんけれど・・・

＞『form1』に入力した郵便番号を『form2』に引き継ぎたいです。
が目的なら、余分なスクリプトがいろいろあるように思えます。
（あるからと言って問題にはならないと思いますけれど…）

＞以下のコードを書いても動いてくれませんでした。
HTMLが中途半端にしか提示されていないので構成が不明ですけれど、まずは、form1のsubmitでスクリプトが呼び出されるようにイベント設定がなされているでしょうか？
それがなければ、そもそものスクリプトが動作しません。
（スクリプト内には、その記述は見当たりませんので）

また、formのactionがどうなっているのか不明ですが、スクリプトからジャンプしているので、デフォルト動作の停止は必要ないのですか？
（なくても大丈夫かも知れませんけれど…）

ご質問には関係ありませんが、最後の「h ttp://site/」の判定の場合は、（多分、要素が存在しないので）実行時エラーになりそうに思われます。


いずれにしろ、
＞動いてくれませんでした。
であるなら、どこかでエラーになっている可能性が高いので、手始めにブラウザの開発ツールでエラーの位置（と内容）を確認なさるのが解決への近道と思います。

この回答へのお礼

ありがとうございますっ
イベントがありませんでしたっ
htmlはbodyタグ内全部書きましたつもりですけれど(テストなのでめっちゃ簡単なコードなんです)、イベントにピーンときまして、以下の様に変更しましたら動いてくれました。

<a href="javascript:handleSubmit()">　の部分ですねっ

【http://site/form1】
郵便番号<input type="text" name="zip" value="" size="40" id="zip">
<a href="javascript:handleSubmit()"><img src="http://site/uploads/2021/next.png" alt="" width="100" height="50"></a>

【http://site/form2】
郵便番号<input type="text" name="zip" value="" size="40" id="zip2">


【JavaScript.js】
function handleSubmit() {
const zip = document.getElementById('zip').value;
localStorage.setItem('zip', zip);

window.location.href = 'http://site/form2/';
}
window.addEventListener('load', () => {
// alert(window.location.href);
   if (window.location.href == 'http://site/form2/') {
const zip2 = localStorage.getItem('zip');
document.getElementById('zip2').value = zip2;
}
})

お礼日時：2021/05/19 15:18