新卒から文系エンジニア→人材業界に転職した人のブログ

新卒から文系エンジニア→人材業界に転職。技術・スキルがないためブログを通して勉強。その後、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; }