はじめに

ミニアンケートシステム作成の第2回目です。
今回は、前回触れていませんでしたが、Javascriptを使って投票結果画面をミニウインドウでポップアップする形を追加しようと思います。

Contents

前回のコード

まず、前回の投票ページのコードを見てみましょう。

// enquete.php
<?php
// データベース接続
// サーバー
$sv = 'your server';
// データベース名
$db = 'your db';
//　ユーザー名
$uid = 'your username';
// パスワード
$pwd = 'your password';

$conn = mysql_connect($sv,$uid,$pwd) or die("connection failed\n");
mysql_select_db($db, $conn) or die("connection failed\n");
mysql_set_charset('utf8', $conn);

// idはひとまず1で..
$strsql = "SELECT * FROM `enquete_tbl` WHERE id = 1";
$res = mysql_query($strsql, $conn);
$row = mysql_fetch_array($res);
$question = $row["question"];

// 選択肢の数”num”の数だけラジオボタンを生成
for ($i=1; $i <= $row["num"]; $i++) { 
    $select .= '<div><label><input type="radio" value="'.$i.'" id="mini_enq_ans_'.$i.'" name="type">'.htmlspecialchars($row["answer0{$i}"], ENT_QUOTES, "UTF-8").'</label></div>';
}

mysql_close();
?>

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Script-Type" content="text/javascript">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<title>アンケートテスト</title>
</head>
<body>

<p><?php echo htmlspecialchars($question, ENT_QUOTES, "UTF-8"); ?></p>
<form method="POST" action="enqres.php">
    // 生成したラジオボタンを出力
    <?php echo $select; ?>
    <input type="submit" value="投票">
</form> 

</body>
</html>

追加点

前述の、前回のコードに次のようなJavascriptを追加します。

<script type="text/javascript"> 
function popup_window(obj) { 
    wobj = window.open("", "pwin", "width=480, height=360"); 
    obj.target = "pwin"; 
    wobj.focus(); 
    return true; 
} 
</script>

widthやheightはお好みで。

次にもう一つの追加点について。
投票ページのコードの下のほうにあるform要素に次のようにonsubmit属性を追加します。

<form method="POST" action="enqres.php" onsubmit="return popup_window(this)">

で、最終的にはこんな感じになります。

// enquete.php
<?php
// データベース接続
// サーバー
$sv = 'your server';
// データベース名
$db = 'your db';
//　ユーザー名
$uid = 'your username';
// パスワード
$pwd = 'your password';

$conn = mysql_connect($sv,$uid,$pwd) or die("connection failed\n");
mysql_select_db($db, $conn) or die("connection failed\n");
mysql_set_charset('utf8', $conn);

// idはひとまず1で..
$strsql = "SELECT * FROM `enquete_tbl` WHERE id = 1";
$res = mysql_query($strsql, $conn);
$row = mysql_fetch_array($res);
$question = $row["question"];

// 選択肢の数”num”の数だけラジオボタンを生成
for ($i=1; $i <= $row["num"]; $i++) { 
    $select .= '<div><label><input type="radio" value="'.$i.'" id="mini_enq_ans_'.$i.'" name="type">'.htmlspecialchars($row["answer0{$i}"], ENT_QUOTES, "UTF-8").'</label></div>';
}

mysql_close();
?>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <title>アンケートテスト</title>
    //追加点１
    <script type="text/javascript"> 
    function popup_window(obj) { 
        wobj = window.open("", "pwin", "width=480, height=360"); 
        obj.target = "pwin"; 
        wobj.focus(); 
        return true; 
    } 
    </script>
</head>
<body>

<p><?php echo htmlspecialchars($question, ENT_QUOTES, "UTF-8"); ?></p>
//追加点２
<form method="POST" action="enqres.php" onsubmit="return popup_window(this)">
    // 生成したラジオボタンを出力
    <?php echo $select; ?>
    <input type="submit" value="投票">
</form> 

</body>
</html>

これで、投票ページで投票ボタンを押すと、投票結果ページが小さいウインドウで開くようになりました。

今回は思いつきで寄り道しましたが、次回は元の目標の一つでもある、連続投票の防止について書いていこうと思います。

参考サイト