50753


大変お世話になっております。

下記のURLはindex.htmlというページのURLになりますが、そのクエリパラメータであるidの値（256）をindex.html内でjavascriptなどを利用して取得し、その下にあるinputのvalueに代入し送信できるようにしたいのですが、（下記の例では、xxxに256が代入されるような設定にしたいです。）どのような記述にすべきかご教授頂けませんでしょうか。

いろいろと試しておりますが、値を代入できず、しかしながら、xxxを256と手入力し送信すると、期待通りに値が次ページ以降に渡ります。

[code]

    http://www.xxxx.com?id=256
    
[/code]

index.html

[code]

    <script>;
    </script>
    
    <form　method="post">
    <input type="number" name="id" id="id" value="xxx">
    </form>
    
[/code]

## 追記

[Faily
Feely様の回答](https://ja.stackoverflow.com/a/50753/19110)を基に試した記述を上段にて変更致しました。`value=""`の様に空欄に致しました。しかしながら、値を取得していない様でございます。記述のどこに問題があるかご教示頂けませんでしょうか。

[code]

    <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>
    
[/code]

## 追記 2

[code]

    <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>
    
[/code]

Faily Feely様、

ご教示の基に、上記の記述、およびあれこれと変更しながら試しましたが、どうしてもクエリパラメータの値を取得できなく、urlにクエリパラメータおよび値はあるのですが、（見えている）のですが、システムの構成上、実際は存在しない、あるいはjsで読めないということはあり得るでしょうか。送信先のページでvar_dumpを試すとNULLではなく、以下が表示されます。

["id"]=> string(0) ""

また、上記の上から2番目の記述を以下の様に手入力すると次ページに値が渡ります。ですのでurlからクエリパラメータの値の取得に関して何等かの問題があるのかなと考えております。

const id = '256';

## 追記 3

Faily Feely様、

Chrome バージョン 49.0.2623.112環境下のF12で以下の３つエラーが検出されました。

[code]

    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'.
    
[/code]

そして、複数のブラウザーで試したところ、パラメータを取得できたものもありました。ご教授感謝致します。

○取得成功 ×取得できず  
Chrome バージョン 49.0.2623.112 ×  
Chrome バージョン 70.0.3538.110 ○  
Safari バージョン不明 ×  
IE バージョン不明 ×  
Edge バージョン不明 ○

エラーの内容から、JSの記述に補足文を付け足せば問題がなくなりますでしょうか。

ブラウザー、そしてそのバージョン依存ということは、当サイトの性質上、全てのブラウザーおよびそのバージョンに対応しなければなりませんので、やはり、location
searchの方法でためした方が後々良いかもしれませんね。

もし、その場合、上記の記述に多少の記述の付け足しだけで事足りますでしょうか。


CC BY-SA 4.0
2018-11-29T07:05:05.187
50745
2018-11-29T15:58:31.753
2018-11-29T14:22:39.597
19211
19211
question
javascript html
JSを利用してURLのクエリパラメータの値を取得し、inputのvalueに代入したいです。


JavaScriptの`Location`オブジェクトを利用すれば、URLやパラメータを取得できるようです。

[code]

    var url   = location.href;   // URL全体
    var searh = location.search; // "?"以降のパラメータ文字列(?も含む)
    
[/code]

参考：  
[JavaScriptで現在のURLやパラメタを取得する方法
(Location)](http://www.searchlight8.com/javascript-location/)


CC BY-SA 4.0
2018-11-29T07:52:23.483
50748
2018-11-29T07:52:23.483
3060
50745
answer


URLのクエリパラメータを取得する簡単な方法は、[URL](https://developer.mozilla.org/en-
US/docs/Web/API/URL)オブジェクトを使用することです。`URL`コンストラクタに現在のURL（`location.href`）を渡すことで`URL`オブジェクトを作成し、その`searchParams`から目的のクエリパラメータを取得します。

[code]

    // 現在のURLを表すURLオブジェクトを作成
    var url = new URL(location.href);
    
    // searchParamsから目的のクエリパラメータを取得（今回はid)
    var id = url.searchParams.get("id");
    
[/code]

こうすることで、例えばURLが`http://www.xxxx.com?id=256`の場合は`id`変数に`"256"`が入っています。（もし`id`というクエリパラメータが存在しない場合は`null`が入りますので、適宜処理が必要です。）

あとはこれを適当な方法でinputのvalueに代入しましょう。例えば以下のようにします。

[code]

    document.getElementById('id').value = id;
    
[/code]

* * *

注意点ですが、`URL`オブジェクトは比較的新しい機能のため、古いブラウザ（Internet Explorerや、iOS
9以下のSafari等）では動作しません。もしこれらに対応する必要がある場合はcubickさんのもう1つの回答のように、`location.search`に入っている`"?id=123"`のような文字列から目的の部分を抜き出す必要があります。

## 追記

全てのブラウザに対応しなければいけない場合は、特にIEのような古いブラウザでは`URL`の機能が提供されていないため、上記の回答の方法をそのまま使うことはできません。対応方法を2つご紹介します。

  1. **Polyfill** を使う。  
Polyfillとは、古いブラウザに存在しない機能を補ってくれるスクリプトです。`URL`に対応したPolyfillを読み込んで使うことで、古いブラウザでも上記のスクリプトが動くようになります。  
Polyfillは様々なものが存在しますが、例えば[polyfill.io](https://polyfill.io)が提供するPolyfillを読み込んで使う場合は、ページの`head`要素内に以下のscript要素を追加します。

[code]     <script
src="https://cdn.polyfill.io/v2/polyfill.js?features=URL"></script>

    
[/code]

これはよその人が書いたスクリプトを読み込んで利用することになりますが、それが問題ないのであれば簡単な方法ですのでお勧めします。Polyfillに関する詳しいことは上記polyfill.ioなどをご参照ください。一応付記しておくと、上記のPolyfillはCC0で提供されているため、ライセンス表記無しで利用することができます。  
また、古いブラウザで動作させるために、上記のスクリプトを少しだけ変更しています。具体的には、2箇所の`const`を`var`に書き直しました。この変更を適用し、上記のscript要素の追加を行うことで、古いブラウザでも動作するようになるかと思います。

  2. `URL`の使用を諦めて`location.search`を使用する。  
上記1の方法をとることができない場合は、上記の方法は諦める必要があります。この方法は1に比べてお勧めできませんが、それでもやりたい場合は上記のコードの代わりに例えば以下のようにするとよいかと思います。

[code]     // クエリパラメータ部分を取得

    var search = location.search;
    // 最初の"?"を取り除く
    search = search.replace(/^\?/, '');
    // "&"でクエリパラメータを分割
    var params = search.split('&');
    // パラメータの中から"id=数字"の形のものを探す
    for (var i=0; i<params.length; i++){
        if (/^id=\d+$/.test(params[i])) {
            // 目的の形のものが見つかったら数字部分をid変数に入れる
            id = params[i].slice(3);
        }
    }
    // 以下は同様
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('id').value = id;
    });
    
[/code]


CC BY-SA 4.0
2018-11-29T08:38:10.523
50753
2018-11-29T15:58:31.753
2018-11-29T15:58:31.753
30079
30079
50745
answer