【PHP・Javascript】簡易な商品購入サイトを作る ~入力画面処理(PHPにJSを埋め込む)~
【今回の内容】
前回から簡単な商品購入サイトを作るみたいな流れでやっています。
今回は、
情報を入力する画面の作成します。
【やること】
1、PHPにJavascriptを埋め込む
2、クライアント側でプルダウン選択時に商品の金額をで自動計算
3、クライアント側でプルダウン選択時に各商品ごとの金額を自動計算
時間がないので、中身の処理についての説明やメモは、時間があるときに整理します。
参考サイト
・テーブルの操作:http://memopad.bitter.jp/w3c/jsref/coll_table_cells.html
・型変換:http://lealog.hateblo.jp/entry/2013/02/28/005010
・PHPにJSの埋め込み:http://www.crystal-creation.com/web-appli/technical-information/programming/php/sample/javascript-cooperation.htm
【参考ソース】
<?php session_start(); $user=$_SESSION["userName"]; if(!strcmp($user,'hiro')==0){ header('Location:login_error.htm');} ?> <html> <head></head> <title>書籍選択画面</title> <body> <h1>書籍選択画面</h1> <?php print "<h2>".$_SESSION["userName"]."さんログイン中</h2>"; ?> <table id="table"> <tr> <td>個数</td> <td>書籍名</td> <td>著者</td> <td>出版社</td> <td>単価(円)</td> <td>合計(円)</td> </tr> <tr> <td> <select onchange="sum_book(this.options[this.selectedIndex],this)"> <option></option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <select></td> <td>田中の本</td> <td>田中</td> <td>田中の会社</td> <td>1000</td> <td></td> </tr> <tr> <td> <select onchange="sum_book(this.options[this.selectedIndex],this)"> <option></option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <select> </td> <td>佐藤の本</td> <td>佐藤</td> <td>佐藤の会社</td> <td>2000</td> <td></td> </tr> <tr> <td> <select onchange="sum_book(this.options[this.selectedIndex],this)"> <option></option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <select> </td> <td>伊藤の本</td> <td>伊藤</td> <td>伊藤の会社</td> <td>3000</td> <td></td> </tr> </table> 合計金額:<input type="text" value="" id="text_all_sum">円</br> <input type="submit" value="送信"> <?php echo <<<EOM <script type="text/javascript"> function sum_book(item,obj){ var sum=item.text*obj.parentNode.parentNode.childNodes[9].innerHTML; obj.parentNode.parentNode.childNodes[11].innerHTML=sum; sum_all(); } function sum_all(){ var table=document.getElementById("table"); sum_all_value=0; for(var i=1;i<table.rows.length;i++){ var k=table.rows[i].cells[5].innerHTML; sum_all_value=sum_all_value+Number(k); } document.getElementById("text_all_sum").value=sum_all_value; } </script> EOM; ?> </body> </html>