formでの受け渡しが上手くできない(スペースが%20ではなく+になってします)

前提・実現したいこと

フォーム1から別ページのフォーム2へ値を飛ばして、フォーム2を開いた時にはフォーム1で選んでいた項目が選択されている状態にしたいです。

フォーム1からフォーム2へ移った時にURLを見ると

http://example/form2/?iro=あか+濃いめ&kudamono=ばなな

と言うふうにエンコードされており、”iro”の受け取りができません。
（スペースが+に変換されていることが原因？）

スペースが+に変換されているので、URLを直接
http://example/form2/?iro=あか%20濃いめ&kudamono=ばなな

というふうに変換して、アクセスすると受け取りは正しくできています。

なので、スペースを+ではなく%20として値を飛ばしたいのですが、方法が分からず困っております。

試したこと

Replacing the plus sign (+) in URL with %20 in a HTML form

上記サイトを参考にformタグに

onsubmit="replacespace();

を追加し、

formタグの下に

<script>
function replacespace() {
    var p = document.getElementById('color')
    p.value = p.value.replace(/\s+/g, 'SPACE');
}
</script>

こちらを追加したのですが、
http://example/form2/?kudamono=ばなな

このようになったしまい　”iro”　の値が取得されないようになってしまいました。

もしわかる方がいらっしゃいましたら、ご教授いただけますと幸いでございます。
宜しくお願い致します。

該当のソースコード


<form action="form2" method="GET">
    <dl class="form_wrap">
        <div class="form_content form_row">
            <dt>いろ</dt>
            <dd id="color">
                <select name="iro">
                    <option value="">選択して下さい</option>
                    <option value="あか 濃いめ">あか 濃いめ</option>
                    <option value="あか 薄め">あか 薄め</option>
                </select>
            </dd>
            <dt>くだもの</dt>
            <dd id="fruits">
                <select name="kudamono">
                    <option value="">選択して下さい</option>
                    <option value="りんご">りんご</option>
                    <option value="ばなな">ばなな</option>
                </select>
            </dd>
        </div>
    </dl>
    <div class="form_submit">
        <button type="submit" class="submitbtn">送信する</button>
    </div>
</form>

<form action="" method="GET">
    <dl class="form_wrap">
        <div class="form_content form_row">
            <dt>いろ</dt>
            <dd id="color">
                <select name="iro" >
                    <option value="">選択して下さい</option>
                    <option value="あか 濃いめ">あか 濃いめ</option>
                    <option value="あか 薄め">あか 薄め</option>
                </select>
            </dd>
            <dt>くだもの</dt>
            <dd id="fruits">
                <select name="kudamono">
                    <option value="">選択して下さい</option>
                    <option value="りんご">りんご</option>
                    <option value="ばなな">ばなな</option>
                </select>
            </dd>
            <dt>さかな</dt>
            <dd id="fruits">
                <select name="sakana">
                    <option value="">選択して下さい</option>
                    <option value="さんま">さんま</option>
                    <option value="イワシ">イワシ</option>
                </select>
            </dd>
        </div>
    </dl>
    <div class="form_submit">
        <button type="submit" class="submitbtn">送信する</button>
    </div>
</form>

m.ts10806

2020/01/02 23:40

せめてnameを半角英数にしませんか。

m.ts10806

2020/01/02 23:41

あと、PHPはどう関係するのでしょう

otn

2020/01/03 00:46

受け取った側で + をスペースに変換するのがシンプルだと思います。

退会済みユーザー

2020/01/03 01:18

そもそも「replacespace」を作成・使用を行わなければいけなった理由は何ですか

退会済みユーザー

2020/01/03 01:23

ブラウザは何ですか？　ブラウザによってエンコーディングが変わってきませんか？　form を submit する場合とは違うかもしれませんが、ブラウザのアドレスバーに日本語のクエリ文字列をタイプして要求をかけると、ブラウザによってエンコーディングが変わってきますが（下記記事参照）そういうことはありませんか？ブラウザによる URL のエンコーディング http://surferonwww.info/BlogEngine/post/2011/11/07/Encoding-of-URL-directly-written-in-address-bar-of-browser.aspx

kii.32

2020/01/03 01:53

皆様ご回答いただきありがとうございます。また、多く説明不足の部分があり、申し訳ございません。 >m.ts10806様 nameタグを半角英数にしました。ワードプレスでフォームを作っておりましたので、phpのタグもつけてしまっておりましたので、削除しました。 >otn様受け取り側で、変換するというのはjavascriptを利用して可能なのでしょうか。 >asahina1979様「replacespace」を作成利用した理由は ’http://example/form2/?iro=あか+濃いめ&kudamono=ばなな’だとiroの値が空欄のままだったのですが、 ’http://example/form2/?iro=あか%20濃いめ&kudamono=ばなな’へ直接アクセスするとiroの値が「あか濃いめ」と初期値で選択されていたので、replacespaceを使ってurlの＋を%20へ置換すれば良いと考え利用しました。 >SurferOnWww様ブラウザに関しては、クロムを利用していたのですが、他ブラウザ（firefox,safari）を利用しても結果は変わりませんでした。

otn

2020/01/03 02:13

> 受け取り側で、変換するというのはjavascriptを利用して可能なのでしょうか。言葉があいまいでした。サーバーサイドでという意味です。あるいは、クエリー文字列の中の空白が+に変わるので、クエリー文字列を使わないPOSTを使うといいかもしれません。

退会済みユーザー

2020/01/03 02:19 編集

だとすると、受信側のコードをそれに合わせるべき。無知識に変換するとブラウザ側が再度変換を行う場合がある。また「color」は form要素ではないのでそれを不用意に書き換えているので <select > 要素がきえてるなのかもな

退会済みユーザー

2020/01/03 02:20

試してみましたが、method="get" で submit する場合のクエリ文字列は IE, Chrome, Firefox などで違いはなくて UTF-8 のパーセントエンコーディングとなり、半角空白は + になるのは同じでした。+ が問題と言うことはなさそうです。

退会済みユーザー

2020/01/03 02:26

> ”iro”の受け取りができません。それは具体的にどのようにした確認したのですか？　少なくともブラウザは + を含めたクエリ文字列をサーバーに送信するので、文字列内に＋があると問題と言うのが間違いなければ（そこがちょっとホントかなという気がしますが）サーバー側の処理系の問題ということになるのですが・・・

行動規範の内容に同意します

回答1件

ベストアンサー

”iro”の受け取りができません。

それは具体的にどのようにした確認したのですか？

少なくともブラウザは + を含めたクエリ文字列をサーバーに送信するので、もし + に問題があるとするとサーバー側の処理系の問題ということになるのですが。（やり方の問題とか勘違いのような気がします）

試しに以下のコードで（ASP.NET を使ってますがクエリ文字列の送信とは直接関係ないので気にしないでください）、ブラウザに　Windows 10 の Chrome 79.0.3945.88 を使って試してみました。

ブラウザで以下のように選択して、［送信する］ボタンをクリックすると、

以下のような要求がブラウザからサーバーに送信されます（Fiddler でキャプチャしたものです）。赤枠で囲ったクエリ文字列は + を含めて期待通り送信されています。

後はサーバー側の処理の問題で、+ を含めたクエリ文字列をどう処理できるかという話になるはずです。半角空白が + に変換されるのはメジャーなブラウザのデフォルトのようですので、%20 でなくても当たり前に処理できてしかるべきと思うのですが。

ちなみに、ASP.NET Web Forms では問題なく + は半角空白に変換されます。

投稿2020/01/03 02:59

退会済みユーザー

総合スコア0

kii.32

2020/01/04 07:22

ご丁寧にありがとうございます(＞＜) iroの受け取りができないを確認した方法は１、http://example/form2/?iro=あか+濃いめ&kudamono=ばなな２、http://example/form2/?iro=あか%20濃いめ&kudamono=ばななこの2つのURLにアクセスした場合に iroの選択ボックスは1の場合に空白、2の場合に「あか濃いめ」が選択された状態になっているためです。直接の解決にはなっていないのですが、取り急ぎ、valueのスペースを消して <option value="あか濃いめ">あか濃いめ</option> という風に対応しました。

退会済みユーザー

2020/01/04 08:18

せっかく説明いただいたのですが、分かりませんでした。最初 PHP のタグが付いていたので、form1 からクエリ文字列で iro, kudamono のデータをサーバーに送信し、PHP のコードでそれを受けて必要な処理を行い、処理の結果を form2 に反映してブラウザに返すというのが全体の流れと想像してました。半角空白が + に変換されるのはメジャーなブラウザのデフォルトなので、PHP は + を含んだデータを問題なく期待通りに処理できるはずと思っていたのですが・・・

行動規範の内容に同意します