JSを利用してURLのクエリパラメータの値を取得し、inputのvalueに代入したいです。
大変お世話になっております。
下記のURLはindex.htmlというページのURLになりますが、そのクエリパラメータであるidの値(256)をindex.html内でjavascriptなどを利用して取得し、その下にあるinputのvalueに代入し送信できるようにしたいのですが、(下記の例では、xxxに256が代入されるような設定にしたいです。)どのような記述にすべきかご教授頂けませんでしょうか。
いろいろと試しておりますが、値を代入できず、しかしながら、xxxを256と手入力し送信すると、期待通りに値が次ページ以降に渡ります。
http://www.xxxx.com?id=256
index.html
<script>;
</script>
<form method="post">
<input type="number" name="id" id="id" value="xxx">
</form>
追記
Faily Feely様の回答を基に試した記述を上段にて変更致しました。value=""
の様に空欄に致しました。しかしながら、値を取得していない様でございます。記述のどこに問題があるかご教示頂けませんでしょうか。
<script type="text/javascript">
// 現在のURLを表すURLオブジェクトを作成
const url = new URL(location.href);
// searchParamsから目的のクエリパラメータを取得(今回はid)
const id = url.searchParams.get("id");
document.getElementById('id').value = id;
</script>
<form method="post">
<input type="number" name="id" id="id" value="">
</form>
追記 2
<script type="text/javascript">
// 現在のURLを表すURLオブジェクトを作成
const url = new URL(location.href);
// searchParamsから目的のクエリパラメータを取得(今回はid)
const id = url.searchParams.get("id");
</script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
// ページが読み込まれたあとに実行される部分
document.getElementById('id').value = id;
});
</script>
<form method="post">
<input type="number" name="id" id="id" value="">
</form>
Faily Feely様、
ご教示の基に、上記の記述、およびあれこれと変更しながら試しましたが、どうしてもクエリパラメータの値を取得できなく、urlにクエリパラメータおよび値はあるのですが、(見えている)のですが、システムの構成上、実際は存在しない、あるいはjsで読めないということはあり得るでしょうか。送信先のページでvar_dumpを試すとNULLではなく、以下が表示されます。
["id"]=> string(0) ""
また、上記の上から2番目の記述を以下の様に手入力すると次ページに値が渡ります。ですのでurlからクエリパラメータの値の取得に関して何等かの問題があるのかなと考えております。
const id = '256';
追記 3
Faily Feely様、
Chrome バージョン 49.0.2623.112環境下のF12で以下の3つエラーが検出されました。
1.Failed to set referrer policy: The value 'strict-origin' is not one of 'always', 'default', 'never', 'no-referrer', 'no-referrer-when-downgrade', 'origin', 'origin-when-crossorigin', or 'unsafe-url'. This document's referrer policy has been left unchanged.
2.Failed to load resource: net::ERR_FAILED
3.Unrecognized Content-Security-Policy directive 'worker-src'.
そして、複数のブラウザーで試したところ、パラメータを取得できたものもありました。ご教授感謝致します。
○取得成功 ×取得できず
Chrome バージョン 49.0.2623.112 ×
Chrome バージョン 70.0.3538.110 ○
Safari バージョン不明 ×
IE バージョン不明 ×
Edge バージョン不明 ○
エラーの内容から、JSの記述に補足文を付け足せば問題がなくなりますでしょうか。
ブラウザー、そしてそのバージョン依存ということは、当サイトの性質上、全てのブラウザーおよびそのバージョンに対応しなければなりませんので、やはり、location searchの方法でためした方が後々良いかもしれませんね。
もし、その場合、上記の記述に多少の記述の付け足しだけで事足りますでしょうか。