質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

3154閲覧

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

fnbr

総合スコア5

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

2クリップ

投稿2019/09/16 06:59

現在、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側で受け取って、表示するか行き詰まっております。
どうかよろしくご教示ください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

フォーム入力されたページの名前・住所・商品名を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>

イメージ説明

投稿2019/09/16 10:47

編集2019/09/16 11:02
yktakaha4

総合スコア41

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

reorio

2021/12/13 07:33

var qrCodeText = [queryString.name, queryString.address, queryString.productName].join('、'); 上記の配列の中に入っているテキストデータはどこで宣言し代入しているのでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問