Scripts

Zichzelf invullend formulier

Dit is een proof of concept. (dit wegens copyrightschending, bedankt PHPerik om me daar even op te wijzen) Een normaal opstuurbaar html-formulier, maar dan nu uitgebreid met de mogelijkheid om aan de hand van enkele ingevulde velden de overige velden van internet te halen. Op het moment maakt het gebruik van http://www.telefoongids.e2u.cc/ , en werkt het dus alleen voor nederland. Helaas is het nodig om de data via een phppagina binnen te halen aangezien XMLhttpRequest wegens veiligheidsredenen alleen op dezelfde host als de pagina data kan aanvragen. Gemaakt op basis van PHP chatbox en de daarbijstaande tutorial Revisie: - nu krijg je een lijstje met gevonden adressen - klein beetje betrouwbaarder - nog wat kleinigheden (lees: hernoemen en toevoegen van hulpfuncties) - alles in 1 pagina gestopt, die iedere mogelijke naam mag hebben. Revisie 2: - Gebruikksvriendelijkere formgeving - selectmenu wordt pas weergegeven als er meerdere gegevens bekent zijn - beetje wizard-achtige stijl - beetje layout (FF only) toegevoegd Revisie 3: - Andere bron voor de informatie (dankje Martin Nutbeij) Download hier het bijbehorende stylesheet.

zichzelf-invullend-formulier
[code]
<?php
header( "Expires: Mon, 26 Jul 1997 05:00:00 GMT" ); 
header( "Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" ); 
header( "Cache-Control: no-cache, must-revalidate" ); 
header( "Pragma: no-cache" );
function fetchURL( $url ) {
	$in = "";
	$url_parsed = parse_url($url);
	$host = $url_parsed["host"];
	if (!isset($url_parsed["port"])){
		$port = 80;
	}
	else
	{
		$port = $url_parsed["port"];
	}
	$path = $url_parsed["path"];
	//if url is http://example.com without final "/"
	//I was getting a 400 error
	if (empty($path) || empty($host))
	{
		die("Fout: geen path of host bekend");
	}
	if ($url_parsed["query"] != "")
	{
		$path .= "?".$url_parsed["query"];
	}
	$out = "GET $path HTTP/1.0\r\nHost: $host\r\n\r\n";
	$fp = fsockopen($host, $port, $errno, $errstr, 30);
	fwrite($fp, $out);
	$body = false;
	while (!feof($fp)) {
		$in .= fgets($fp, 128);
	}
	fclose($fp);
	return $in;
}

if(isset($_GET['search']))
{
	$url = "";
	foreach($_GET as $key => $value)
	{
		$url .= "&".$key."=".$value;
	}
	$data = split("ms-excel",fetchURL("http://www.nummerboek.com/index.php?".$url));
	echo $data[1];
}
else
{
	if($_SERVER['REQUEST_METHOD'] == "POST")
	{
		echo "<pre style=\"width: 470px;\">";
		print_r($_POST);
		echo "</pre>";
	}
?>
<!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>
<link rel="stylesheet" type="text/css" href="test7/style.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>XMLHttpRequest test 7 - zichzelf invullend formulier</title>
<!--
	Dit script mag vrij gekopieert en bewerkt worden, zolang er niet wordt geclaimt 
	dat het alleen door iemand anders is gemaakt dan mij. 
	
	Ik zou het op prijs stellen als je jouw eventuele verbeteringen doorstuurt aan mij, 
	zodat iedereen ervan kan proviteren.

	Ik hoop dat je er iets aan hebt, 
	vrienderlijke groeten, 

	Jelmer van der Linde
	([email protected])
-->
<style>
label{
	display: block;
}
input[type="text"]{
	width: 100%;
}
#selectwindow
{
	border: 1px solid #666;
	background-color:#FFFFFF;
	-moz-border-radius: 4px;
	-moz-box-sizing: border-box;
	padding: 5px;
	display: block;
	width: 250px;
	height: 232px;
	position: absolute;
	z-index: 20;
	left: 150px;
	top: 80px;
}
</style>
<script type="text/javascript">
function obj(id)
{
	//omdat het sneller te typen is ^^,
	return document.getElementById(id).value;
}
function isset(object)
{
	if (null == object) {
		return false;
	}
	if ("undefined" == typeof(object) ) {
		return false;
	}
	return true;
}
function str_replace(needle, replacement, haystack)
{
	//ik kon geen vergelijkbare functie in javascript vinden, dus heb ik mijn eigen php-clone gemaakt.
	if(haystack.indexOf(needle))
	{
		var output = "";
		var temp = haystack.split(needle)
		for(i=0;i <= temp.length-1; i++)
		{
			if(i == 0)
			{
				output = temp[0];
			}
			else
			{
				output = output + replacement + temp[i];
			}
		}
		return output;
	}
	else
	{
		return haystack;
	}
}

function empty(obj)
{
	//omdat het sneller te typen is ^^,
	//php-clone
	if(document.getElementById(obj).value == "")
	{
		return true;
	}
	else
	{
		return false;
	}
}
function togglediv(id)
{
	if(document.getElementById(id).style.visibility == "hidden")
	{
		document.getElementById(id).style.visibility = "visible";
	}
	else
	{
		document.getElementById(id).style.visibility = "hidden";
	}
}
function fill(data)
{
	var line = data.split(",");
	var street = line[2].split(" ");
	var name = line[1].split(" ");
	var firstname = "";
	for(i = 1; name.length >= i+1; i++)
	{
		firstname = firstname +" "+ name[i];
	}
	document.getElementById('firstname').value = firstname;
	document.getElementById('lastname').value = name[0];
	document.getElementById('streetname').value = street[street.length-2];
	document.getElementById('housenumber').value = street[street.length-1];
	document.getElementById('postalcode').value = line[3];
	document.getElementById('townname').value = line[4];
//	document.getElementById('phonenumber').value = line[0].substring(4, line[0].length);// de eerste 3 karakters zijn rommel, en verneuken mijn form.
	document.getElementById('phonenumber').value = line[0];// de eerste 3 karakters zijn rommel, en verneuken mijn form.
	document.getElementById('status').innerHTML = "filled in data";
	
}
var xmlhttp=false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
// JScript gives us Conditional compilation, we can cope with old IE versions.
// and security blocked creation of the objects.
 try {
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 } catch (e) {
  try {
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (E) {
   xmlhttp = false;
  }
 }
@end @*/
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
  xmlhttp = new XMLHttpRequest();
}

function autofill()
{
	var url = "http://<?php echo $_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'];?>?sort=postalcode,housenr&search=1";
	if(('lastname'))
	{
		url = url + "&lastname=" + obj('lastname');
	}
	if(!empty('streetname'))
	{
		url = url + "&streetname=" + obj('streetname');
	}
	if(!empty('housenumber'))
	{
		url = url + "&housenumber" + obj('housenumber');
	}
	if(!empty('postalcode'))
	{
		url = url + "&postalcode=" + str_replace(" ", "", obj('postalcode'));
	}
	if(!empty('townname'))
	{
		url = url + "&townname_i=" + obj('townname');
	}
	if(!empty('phonenumber'))
	{
		url = url + "&phonenumber=" + str_replace("-", "", obj('phonenumber'));
	}
	url = url + "&export=csv";
	xmlhttp.open("GET", url,true);//method, target, async (set always true!)
	
	xmlhttp.onreadystatechange=function() {
		if (xmlhttp.readyState==0) {
			document.getElementById('status').innerHTML = "xmlhttprequest is uninitialized";
		}
		if (xmlhttp.readyState==1) {
			document.getElementById('status').innerHTML = "connecting...";
		}
		if (xmlhttp.readyState==2) {
			document.getElementById('status').innerHTML = "connection established";
		}
		if (xmlhttp.readyState==3) {
			document.getElementById('status').innerHTML = "retrieving data";
		}
		if (xmlhttp.readyState==4) {
			var data = xmlhttp.responseText;
			if(data != "Geen vermeldingen gevonden." && data != "" && data != null)
			{
				var rows = data.substr(4).split("\n");
				document.getElementById('status').innerHTML = rows.length+" resultaten gevonden.";
				//legen van selectbox
				document.forms['results'].resultslist.options.length = 0;
				if(rows.length <= 2)
				{
					document.getElementById('status').innerHTML = "maar 1 reulstaat -> direct invullen";
					fill(rows[0]);
				}
				else
				{
					for(i = 0; i <= rows.length-1; i++)
					{
						if(isset(rows[i]))
						{
							if(rows[i] != "")
							{
								var line = rows[i].split(",");
								document.forms['results'].resultslist.options[i] = new Option(line[1], rows[i]);
							}
						}
					}
					togglediv("selectwindow");
				}
			}
			else
			{
				document.getElementById('status').innerHTML = "no match found";
			}
		}
	}
	xmlhttp.send(null);
}
</script>
</head>

<body>

<fieldset style="width: 470px;">
	<legend>Persoonlijke Gegevens</legend>
	<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">
	<label for="firstname">Voornaam</label>
		<input type="text" name="firstname" id="firstname" /><br />
		
	<label for="lastname">Achternaam</label>
		<input type="text" name="lastname" id="lastname" /><br />
		
	<label for="streetname">Straat</label>
		<input type="text" name="streetname" id="streetname" /><br />
		
	<label for="housenumber">Huisnummer</label>
		<input type="text" name="housenumber" id="housenumber" /><br />
		
	<label for="postalcode">Postcode</label>
		<input type="text" name="postalcode" id="postalcode" /><br />

	<label for="townname">Stad</label>
		<input type="text" name="townname" id="townname" /><br />
	
	<label for="phonenumber">Telefoonummer</label>
		<input type="text" name="phonenumber" id="phonenumber" /><br />
	<br/>
	<fieldset class="error" style="width: 450px;">
		<p><input type="button" onclick="autofill()" value="Autofill()" /> Druk op "autofill()" om gegevens op te laten zoeken.</p>
	</fieldset>
	<br/>
	<input type="reset" />
	<input type="submit" />
	</form>
</fieldset>
<div id="selectwindow" style="visibility: hidden;">
	<form name="results">
		<select name="resultslist" size="12" style="width: 100%;" onchange="fill(this.options[this.selectedIndex].value);"></select>
		<input type="button" style="width: 100%; margin-top: 5px; float: none;" name="doeso" onclick="togglediv('selectwindow');" value="OK" />
	</form>
</div>
<span id="status"></span>
<br/>
<fieldset style="width: 470px; ">
	<!--<legend>&copy; Copyrights</legend>-->
	<p style="text-align:center;color: #666666;">Script door Jelmer van der Linde - GPL License<br/><!--mijn naam mag weg uit dit gedeelte, maar de vermelding bovenaan de pagina moet behouden blijven. -->
	Adresgegevens &copy; door <a href="http://www.telefoongids.e2u.cc">telefoongids.e2u.cc</a></p>
</fieldset>
</body>
</html>
<?php } ?>
[/code]

Reacties

0
Nog geen reacties.