- ベストアンサー
画面切り替え時のデータ受け渡しと処理について
- HP製作の素人が、商品一覧から選択した商品の情報を次の画面に表示する方法と、選択した商品の金額を計算する方法について教えてください。
- JavaScriptのみで処理する必要があり、商品一覧から選択した商品の情報を次の画面に表示する方法について具体的なスクリプトを教えてください。
- さらに、選択した商品の金額を計算する処理についても、JavaScriptで実装する方法を教えていただけますか？
- sasakuri
- お礼率76% (494/644)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
javascriptが前提になっているのであれば、 大いに活用すればよいでしょう。 次ページに移動せずに、表示部分のinnerHTMLを 書き換えるだけです。以下サンプルです。 あとは受け側がどのような形式でデータを受けるか を決めないといけないですね。 <html> <head> <script language=javascript> function setList(id,name,price){ this.id=id; this.name=name; this.price=price; } list=new Array(); list[list.length]=new setList("id001","商品1",1000); list[list.length]=new setList("id002","商品2",100); list[list.length]=new setList("id003","商品3",200); list[list.length]=new setList("id004","商品4",1500); list[list.length]=new setList("id005","商品5",500); function buyFunc(f){ var html=""; var flg=false; var allprice=0; for (var i=0;i<f.length;i++){ if(f[i].type=="checkbox"){ if(f[i].checked==true){ html+="<input type='hidden' value='1' name='"+list[i].id+"'><tr><td>"+list[i].id+"</td><td>"+list[i].name+"</td><td align=right>"+list[i].price+"</td></tr>"; allprice+=list[i].price; flg=true; } } } if (flg==false){ alert("商品を選択してください"); return; } html ="<table border=1><tr><th>ID</th><th>商品名</th><th>価格</th></tr>"+html; html+="<tr><th> </th><th> </th><th>"+allprice+"</th></tr>"; html+="</table>"; html+="<input type='submit' value='買い物をする(2)'>"; html+="</form>"; document.getElementById('area1').innerHTML=html; } </script> </head> <body> <form action="uketsuke.htm" method="get"> <div id="area1"> <script> for (var i=0; i<list.length;i++){ document.write("<input type='checkbox' name='"+list[i].id+"'>"+list[i].name+"<br>"); } </script> <input type="button" value="買い物をする" onClick="buyFunc(this.form)"> </div> </form> </body> </html>
その他の回答 (2)
//Cookie function Fckr() { var x = this.name + "="; var cStr = document.cookie; this.val = null; this.fx= false ; if (cStr.length > 0) { offset = cStr.indexOf(x) ; if (offset != -1) { offset += x.length; end = cStr.indexOf(";", offset); if (end == -1) { end = cStr.length } this.val = cStr.substring(offset, end) this.fx= true ; } } .................. .................. document.cookie = "key=value; "+ "expires=dtstr; domain=hostname; path=pathname; " ;
お礼
ありがとうございます。
- kokorone
- ベストアンサー率38% (417/1093)
JavaScriptだけというのであれば、ＵＲＬで引数を渡してはいかがですか？ ＴＯＰ画面 location.href = "hoge.htm?chk=0101111101111111・・1" この"chk="以降は、チェックボックス全てのON/OFF情報です。 次画面： var sea_length = location.search.length; var equal_chara = location.search.indexOf("="); var result = location.search.substring(equal_chara + 1,sea_length); これで、"chk="以降の値がresult にセットされますので、 resultの文字数分、ループし、それぞれに対応する商品名の表示 と配送先の入力エリアを定義する っていう方法はいかがですか？
お礼
なるほど、ありがとうございます。
お礼
ありがとうございます なんとなく骨組みが見えてきました。 期限が切れてしまったみたいなのでまた別のところで質問します。 何もないところからのスタートだったので非常に助かりました。