<?php
ini_set('display_errors', 'On');
error_reporting(E_ALL);
session_start();
if($_SERVER['REQUEST_METHOD'] == 'POST')
{
foreach($_POST as $sKey => $sValue)
{
$sValue = trim($sValue);
if(empty($sValue))
{
$aErrors[] = 'Je bent vergeten om '.$sKey.' in te vullen.';
}
$_SESSION['data'][$sKey] = $sValue;
}
if(empty($aErrors))
{
$sUrl = 'http://maps.google.nl/maps?&saddr='.$_SESSION['data']['van'].',+Amsterdam+Amsterdam,+Noord-Holland,+Nederland&daddr='.$_SESSION['data']['naar'].',+Amsterdam+Amsterdam,+Noord-Holland,+Nederland';
unset($_SESSION['data']);
header('Location: '.$sUrl);
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHPtuts.nl - PHP Snippets - Routeplanner suggesties</title>
<link rel="stylesheet" href="../../styles/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../../styles/ubb.css" type="text/css" media="screen" />
<style type="text/css">
div.result {
width: 321px;
margin-left: 10px;
margin-top: 3px;
position: absolute;
border: 1px solid #ccc;
background-color: #fff;
display: none;
}
div.result ul {
list-style-type: none;
margin: 0px;
padding: 5px;
}
div.result ul li {
cursor: pointer;
padding: 2px;
width: 100%;
}
div.result ul li:hover {
background-color: #eee;
}
</style>
<script type="text/javascript" src="../../inc/mootools.js"></script>
<script type="text/javascript">
function getStreets (element, result)
{
var url = 'routeplanner_suggesties/script.php?straat=' + element.value;
new Ajax(url, {
method: 'GET',
onRequest: function ()
{
result.style.display = 'block';
result.addClass('loading');
},
onComplete: function (responseText)
{
result.removeClass('loading');
result.innerHTML = responseText;
$$('li').each( function (e)
{
e.addEvent('click', function()
{
element.value = e.innerHTML;
result.style.display = 'none';
});
});
element.addEvent('blur', function ()
{
// Timeout om selecteren van straat goed te laten verlopen
setTimeout(function ()
{
result.style.display = 'none';
}, 200);
});
}
}).request();
}
window.addEvent('domready', function ()
{
$('van').addEvent('keyup', function ()
{
getStreets(this, $('result_van'));
});
$('naar').addEvent('keyup', function ()
{
getStreets(this, $('result_naar'));
});
});
</script>
</head>
<body>
<div id="wrap">
<p class="none small align-right"><a href="/codeSnippets/"><-- Terug naar Snippets</a></p>
<h1>Routeplanner suggesties</h1>
<div id="info">
<p>PHP versie: n.v.t</p>
<p>Javascript: <a href="http://www.phptuts.nl/mootools/mootools.zip" target="_blank">MooTools Framework</a></p>
</div>
<p>Onderstaand formulier zou een onderdeel van een routeplanner kunnen zijn. Vul een deel van een straatnaam in Amsterdam in om de suggestiefunctie in werking te zien. Er worden maximaal 10 straatnamen gesuggereerd die het meest lijken op het ingevulde deel.</p>
<form action="
<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<p>
<label class="field" for="van">Van:</label>
<input type="text" name="van" id="van" autocomplete="off"
<?php if (isset($_SESSION['data']['van'])) echo 'value="'.$_SESSION['data']['van'].'"'; ?> />
</p>
<div id="result_van" class="result"></div>
<p>
<label class="field" for="naar">Naar:</label>
<input type="text" name="naar" id="naar" autocomplete="off"
<?php if (isset($_SESSION['data']['naar'])) echo 'value="'.$_SESSION['data']['naar'].'"'; ?> />
</p>
<div id="result_naar" class="result"></div>
<p>
<input type="submit" value="Zoek in Google Maps" />
</p>
</form>
<?php
if(!empty($aErrors))
{
echo '<ul>';
foreach($aErrors as $sError)
{
echo '<li>'.$sError.'</li>';
}
echo '</ul>';
}
// Weergeven broncode
define('FILE', __FILE__);
require_once('../broncode.php');
?>
</div>
<!-- Google analytics (geen onderdeel van script) -->
<script type="text/javascript" src="/inc/ga1.js"></script>
<script type="text/javascript" src="/inc/ga2.js"></script>
</body>
</html>