大阪のホームページ制作会社 株式会社TREVO
技術ブログ

前ページのデータ(パラメータ)をフォームにJava Scriptで引き継ぐ方法

2022.04.21.

Java Script

twitter Facebook Pocket LINE はてブ

株式会社TREVOの月額制ホームページ制作サービス
PR

商品ページからお問い合わせページに移動した時に、お問い合わせの入力フォームに製品の情報(商品名とか商品番号)の値を受け渡したい場合があります。
このような場合に便利な実装をする方法を紹介します。
商品、製品、不動産物件などページ毎にお問い合わせが必要なサイトに役立てると思います。

商品ページ(Java Script)

shop.html


<!DOCTYPE html>
<html lang="jp">

<head>
    <meta charset="UTF-8">
    <title>商品ページ</title>
</head>

<body>
    <script type="text/javascript">
        function sendQuery(uri, querys) {
            var query = new Array;
            for (var x in querys) {
                query.push(x + '=' + encodeURI(querys[x]));
            }
            location.href = uri + '?' + query.join('&');
        }
    </script>
商品コード:apple001<br>
商品名:りんご<br>
    <input type="button" value="お問い合わせ" onclick="sendQuery('form.html',{'CODE':'apple001','NAME':'りんご'})">
</body>

</html>

お問い合わせページ

form.html


<!DOCTYPE html>
<html lang="jp">

<head>
    <meta charset="UTF-8">
    <title>お問い合わせ</title>
</head>

<body>
    <script type="text/javascript">
        function setQuery() {
            var querys = location.search.replace(/^\?/, '').split(/&/);
            for (var i = 0; querys[i]; i++) {
                var query = querys[i].split('=');
                document.getElementById(query[0]).value = decodeURI(query[1]);
            }
        }
        window.onload = setQuery;
    </script>

    <!--値を受取るフォーム部分 -->
お問い合わせフォーム<br>
商品コード:<input type="text" id="CODE"><br>
商品名:<input type="text" id="NAME">
</body>

</html>

大阪のホームページ制作会社TREVOでは、ホームページ制作に関する情報を掲載しています。最短2日で仮サイトを公開するサービスやSEO対策に特化したホームページ制作、オリジナルホームページデザイン、ライティング、リスティング広告、WEBマーケティングなどのサービスをご紹介しています。

twitter Facebook Pocket LINE はてブ
お見積もり