読者です 読者をやめる 読者になる 読者になる

FOR SE

文系の学部から新卒でメーカー系のSIerに就職。技術・スキルがないためブログを通して勉強。その後、IT業界の業界知識が活かせる人材業界に就職

このエントリーをはてなブックマークに追加

【PHP・Javascript】簡易な商品購入サイトを作る ~入力画面処理(PHPにJSを埋め込む)~

【今回の内容】


前回から簡単な商品購入サイトを作るみたいな流れでやっています。


今回は、

情報を入力する画面の作成します。

【やること】

 1、PHPJavascriptを埋め込む
 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>
.hatena-module:nth-of-type(10) { background: transparent; } .hatena-module:nth-of-type(10) .hatena-module-title{ display: none; } .hatena-module:nth-of-type(10) .hatena-module-body { padding: 0; }