【WEB】フォーム入力された内容のCSVにして遷移先のページでQRコードとして表示

現在、Webページのフォームに入力された情報をCSVにして、遷移先のページにQRコードにして表示したいと考えております。
＃フォーム項目例
・名前（テキストボックス）
・住所（テキストボックス）
・製品名（テキストボックス）

javascript(JQuery)で実現したいと考えております。

＃入力フォームは以下のとおりです。

該当のソースコード

遷移元

HTML
1<form action="#" method="get" name="form1" onsubmit="return send();">
2    <fieldset>
3        <legend>パラメータに渡す値を入力</legend>
4        <table style="text-align: left;">
5　<tr>
6　　<th>名前</th>
7　　　<td><input size="50" type="text" name="名前" /></td>
8　</tr>
9  <tr>
10  　<th>住所</th>
11    　<td><input size="50" type="text" name="住所" /></td>
12　</tr>
13  <tr>
14　　<th>商品名</th>
15    　<td><input size="50" type="text" name="商品名" /></td>
16  </tr>
17        <p>
18            <input type="submit" value="送信" />
19        </p>
20    </fieldset>
21</form>
22
23

Javascript
1 function send() {
2        var name="";
3        var address="";
4        var item="";
5        /* 名前(変換) */
6        if (document.form1.name.value!=""){
7            name=escape(document.form1.name.value);
8        }
9        /* 住所 */
10        if (document.form1.address.value!=""){
11            name=escape(document.form1.address.value);
12        }
13        /* 商品 */
14        if (document.form1.item.value!=""){
15            name=escape(document.form1.item.value);
16        }
17        favorite=escape(favorite);
18        /* パラメータにセット*/
19        var pram="name="+name+"&address="+address+"&address="+address;
20        /* アドレスに付加 */
21        location.href="/module/include/js/location4/test2.html?"+pram;
22        return false;
23    }

遷移先

HTML
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
3    <head>
4        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5        <meta http-equiv="Content-Script-Type" content="text/javascript">
6        <title>PHP & JavaScript Room: test2.html</title>
7        <script type="text/javascript">
8            /* 受取る側 */
9            function pramWrite() {
10                /* アドレスの「?」以降の引数(パラメータ)を取得 */
11                var pram=location.search;
12
13                if (!pram) return false;
14
15                pram=pram.substring(1);
16
17                var pair=pram.split("&");
18                var i=temp="";
19                var key=new Array();
20                for (i=0; i < pair.length; i++) {
21                    temp=pair[i].split("=");
22                    keyName=temp[0];
23                    keyValue=temp[1];
24                    key[keyName]=keyValue;
25                }
26                var name=address=item="";
27
28                 if (!key["name"] || key["name"]==""){
29                    name="お名前が記入されておりません";
30                }else{
31                    /* コード変換 */
32                    name=unescape(key["name"]);
33                }
34
35                
36                 if(key["address"]!="") {
37                    address=unescape(key["address"]);
38                }else{
39                    address="住所が記入されておりません";
40                }
41
42                if(key["item"]){
43                    item=key["item"];
44                }else{
45                    item+="商品が記入されておりません";
46                }
47                document.form1.pram.value="名前："+name+"\n"+"性別："+address+"\n"+"趣味："+unescape(item)+"\n";
48            }
49        </script>
50    </head>
51    <body onload="pramWrite()">
52        <form name="form1" action="#">
53            <fieldset>
54                <legend>パラメータを表示</legend>
55                <textarea cols="40" rows="4" name="pram" style="border:0;overflow:visible" readonly="readonly"></textarea>
56            </fieldset>
57        </form>
58    </body>
59
60<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
61        crossorigin="anonymous"></script>
62    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
63    <script src="js/jquery.qrcode.min.js"></script>
64    <script src="js/encoding.min.js"></script>
65    <script type="text/javascript">
66        $(document).ready(function () {
67
68            $("button[name='size']").on("click" {
69                var source = Encoding.convert($('#value').val(), 'SJIS')
70                
71                    $('#QRCode').html("").qrcode({
72                        text: source,
73                    );
74
75            })
76        })
77    </script>
78</html>

フォーム入力されたページの名前・住所・商品名をcsvにして、それを遷移先のページ（帳票形式）でQRコード（日本語）として表示したいと考えております。（帳票の体裁はまだできておりません）
帳票のわきに一つ表示できればと考えております。
受け取った値をどうやってjavascript側で受け取って、表示するか行き詰まっております。
どうかよろしくご教示ください。

gouf

2019/09/16 07:37

jquery-qrcode は目的に適いそうですか? : https://github.com/jeromeetienne/jquery-qrcode

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

回答1件

ベストアンサー

フォーム入力されたページの名前・住所・商品名をcsvにして

の部分が理解できているか自信がないのですが、
クエリ文字列を読み込んでJavaScriptオブジェクトを表示する こと自体は、
以下のような関数を使用することで実現できるようです

http://phpspot.org/blog/archives/2009/09/jqueryquerystri.html

それを踏まえて、クエリ文字列から帳票の元データを取得し、QRコードを生成するサンプルを作成してみました

実際に動かすときは、ローカルに保存の上、
urlに sample.html?name=太郎&address=東京都&productName=どら焼き の形式でクエリ文字列を設定してhtmlを呼び出してください
（呼び出し元のプログラムでクエリ文字列を作成する際に文字化けのようになってしまう場合は、文字列に対して encodeURIComponent 関数を実行するようにしてください）

https://www.sejuku.net/blog/58913

html
1<html>
2
3<head>
4    <title>
5        proof
6    </title>
7
8    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
9    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
10    <script src="https://cdnjs.cloudflare.com/ajax/libs/encoding-japanese/1.0.30/encoding.min.js"></script>
11</head>
12
13<body>
14    <div class="proof">
15        名前：<span class="name">
16        </span>
17        <br> 住所：
18        <span class="address">
19        </span>
20        <br> 製品名：
21        <span class="productName">
22        </span>
23        <br>
24        <span class="qrcode">
25        </span>
26    </div>
27
28
29    <script>
30        // http://phpspot.org/blog/archives/2009/09/jqueryquerystri.html
31        function getUrlVars() {
32            var vars = [],
33                hash;
34            var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
35            for (var i = 0; i < hashes.length; i++) {
36                hash = hashes[i].split('=');
37                vars.push(hash[0]);
38                vars[hash[0]] = decodeURIComponent(hash[1]);
39            }
40            return vars;
41        }
42
43        $(function () {
44            // クエリ文字列から値を取得
45            var queryString = getUrlVars();
46
47            // 値を設定
48            $('.proof .name').text(queryString.name);
49            $('.proof .address').text(queryString.address);
50            $('.proof .productName').text(queryString.productName);
51
52            var qrCodeText = [queryString.name, queryString.address, queryString.productName].join('、');
53
54            $('.qrcode').qrcode({
55                width: 80,
56                height: 80,
57                text: Encoding.convert(qrCodeText, 'sjis')
58            });
59
60        });
61    </script>
62
63</body>
64
65</html>