Beste allemaal,

Wie heeft of kent een goed werkend stratenherkenninsscript dat ik kan gebruiken voor mijn agenda om taxiritten in te voeren.

IK deel online een agenda met 4 collega's en wij voeren met z'n allen veel reserveringen in.
Dit vergt in de regel allemaal veel tijd en niet iedereen voert de straatnamen soms goed in.
Ik ben op zoek naar een soort systeem dat wanneer ik bijvoorbeeld bij het invoerveld "adres" de letter D invul, ik automatisch kan kiezen uit een lijst met alle straten in Zaanstad beginnende met een D.
Vul ik Do in, dat dan de mogelijkheden automatisch minder worden en het systeem alle straten laat zien beginnende met Do, om vervolgens uit de lijst die verschijnt, Dorpsstraat te kunnen selecteren en dat dat dan in het veld adres terecht komt.
Ik stel me zo voor dat ik in de database en paar tabellen erbij moet maken, en daar alle straten van Zaanstad moet invoeren.
Nu is het geval dat Zaanstad bestaat uit een aantal samengevoegde gemeenten en dat de Dorpstraat dus wel 3 keer voor kan komen.
Ik stel me zo voor dat ik dan een aparte tabel per deelgemeente moet maken enz enz.

Is er iemand van jullie dat ooit eens zo'n script ontwikkelt heeft, kent, of wil helpen(heel veel wil helpen om dit te realiseren.

mvg

Peter Arendse
Hallo allemaal in het nieuwe jaar, en nogmaals de beste wensen!
Blanche, ik ben aan het puzzelen geweest met de ajax_straatnamen.php en loop behoorlijk vast(kan iemand dat woord "expert" onder mijn naam weghalen).
Ik ben bang dat de php nu waardeloos geworden is en weet niet meer wat er oorspronkelijk stond, kun jij nog even kijken als je er tijd voor hebt?

ajax_straatnamen.php

<?php
include("db_werk.php");
if (isset ($_GET['result'])) {
    mysql_connect($dbhost,$dbuser,$dbpass) or die(mysql_error());
    mysql_select_db($db) or die(mysql_error());
  $sql = "
    SELECT
        s.straat,
        g.gemeente
    FROM
        straten AS s,
        gemeenten AS g,
        straten_gemeenten AS sg
    WHERE
        g.id = sg.gemeente_id
    AND
        sg.straat_id = s.id
    AND
        s.straat LIKE '".mysql_real_escape_string($_GET['result_van'])."%'
";
    if ($res = mysql_query ($sql)) 
    {
        if (mysql_num_rows ($res) > 0) 
        {
            while ($row = mysql_fetch_assoc ($res)) 
            {
               
			   echo '<p onclick="document.getElementById (\'result\').value = this.innerHTML; document.getElementById (\'result\').innerHTML = \'\'">'.$row['straat'].' ('.$row['gemeente'].')</p>';
            }
        }
        else
        {
            echo 'Geen straatnamen gevonden die overeenkomen met de databese gegevens ';
        }
    }
    else
    {
        trigger_error(mysql_error().'<br />In query: '.$sql);
    }
}
?> 


Ik heb het nu alleen over de invoervelden "van" en "naar", dat van die locatie's laat ik even zitten, die voor ik wel bij de straatnamen per plaats in!
Aan het PHP script had je eigenlijk (nog) niets mogen veranderen. Het maakt namelijk niet uit of je resultaten zoekt voor het 'van' of 'naar' veld, je gebruikt voor beiden precies hetzelfde PHP script.

Het enige dat het script moet doen is een GET variabele 'straat' accepteren waarin een (deel van een) straatnaam staat en vervolgens met een query alle overeenkomende straatnamen uitlezen en outputten.
Ik heb het php script weer teruggezet in de oude situatie hoor.
Ik hed nu twee divs met twee verschillende id's in het formulier waar de straatnamen in komen.

Wat betreft de php, dan heb ik je op de vorige pagina verkeerd begrepen toen je zei" - PHP script aanpassen zodat de namen het juiste onclick event meekrijgen."
Ja, maar dat is pas de laatste stap die we eventueel doen. Eerst maar eens proberen om de namen op de juiste plaats in het formulier te krijgen als we een bepaald veld invullen...

Heb je dat al werkend?
.........nee, snik.
Ik moet nu helaas de weg weer op, ik ga er vanavond weer mee verder.
Maar als je tips in de goede richting hebt graag.
Je hoeft niet alles voor te kauwen, ik moet mijn hersenen ook maar eens laten werken, maar die hebben niet zo'n hoog php gehalte als die van jou hoor ;-)
Hoe ziet je script er nu uit dan? Dan zien we misschien waar het foutgaat...
Dit is de ajax.js


<script type="text/javascript">
    function ajaxFunction (element, result)
    {
        var xmlHttp;
        var lijst = document.getElementById (result);

        try
        {
            // Firefox, Opera 8.0+, Safari
            xmlHttp=new XMLHttpRequest ();
        }
        catch (e)
        {
            // Internet Explorer
            try
            {
            xmlHttp=new ActiveXObject ("Msxml2.XMLHTTP");
            }
            catch (e)
            {
                try
                {
                xmlHttp=new ActiveXObject ("Microsoft.XMLHTTP");
                }
                catch (e)
                {
                alert ("Your browser does not support AJAX!");
                return false;
                }
            }
        }
        xmlHttp.onreadystatechange=function ()
        {
        if (xmlHttp.readyState == 4)
        {
            lijst.display = 'block';
            lijst.innerHTML = xmlHttp.responseText;
        }
        }
        var get = element.value;
        if (get.length > 0) {
            xmlHttp.open ("GET", "ajax_straatnamen.php?straat=" + get, true);
            xmlHttp.send (null);
        }
        else {
            lijst.display = 'none';
            lijst.innerHTML = '';
        }
    }
</script> 

Dit is invoeren.php(een helelap, maar de css van ons stratenscript en de datepicker staan er nog in, die kan ik scheiden.


<?php
ob_start();
?>
<!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=iso-8859-1" />
<script type="text/javascript" src="./js/datepicker.js"></script>
<link href="./css/datepicker.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//<![CDATA[

/* The following function creates a new input field and then calls datePickerController.create();
   to dynamically create a new datePicker widgit for it */
function newline() {
        var total = document.getElementById("newline-wrapper").getElementsByTagName("table").length;
        total++;

        // Clone the first div in the series
        var tbl = document.getElementById("newline-wrapper").getElementsByTagName("table")[0].cloneNode(true);

        // DOM inject the wrapper div
        document.getElementById("newline-wrapper").appendChild(tbl);

        var buts = tbl.getElementsByTagName("button");
        if(buts.length) {
                buts[0].parentNode.removeChild(buts[0]);
                buts = null;
        }

        // Reset the cloned label's "for" attributes
        var labels = tbl.getElementsByTagName('label');

        for(var i = 0, lbl; lbl = labels[i]; i++) {
                // Set the new labels "for" attribute
                if(lbl["htmlFor"]) {
                        lbl["htmlFor"] = lbl["htmlFor"].replace(/[0-9]+/g, total);
                } else if(lbl.getAttribute("for")) {
                        lbl.setAttribute("for", lbl.getAttribute("for").replace(/[0-9]+/, total));
                }
        }

        // Reset the input's name and id attributes
        var inputs = tbl.getElementsByTagName('input');
        for(var i = 0, inp; inp = inputs[i]; i++) {
                // Set the new input's id and name attribute
                inp.id = inp.name = inp.id.replace(/[0-9]+/g, total);
                if(inp.type == "text") inp.value = "";
        }

        // Call the create method to create and associate a new date-picker widgit with the new input
        datePickerController.create();

        // No more than 5 inputs
        if(total == 5) document.getElementById("newline").style.display = "none";

        // Stop the event
        return false;
}

function createNewLineButton() {
        var nlw = document.getElementById("newline-wrapper");

        var a = document.createElement("a");
        a.href="#";
        a.id = "newline";
        a.title = "Create New Input";
        a.onclick = newline;
        nlw.parentNode.appendChild(a);

        a.appendChild(document.createTextNode("+"));
        a = null;
}

datePickerController.addEvent(window, 'load', createNewLineButton);

//]]>
</script>
<style type="text/css">
        #result_van {
            /*display: none;*/
            position: absolute;
            border: 1px solid #99f;
            left: 750px;
            background: white;
            z-index: 1000;
        }
        #result_van p {
            margin: 0px;
            padding: 2px;
            cursor: pointer;
        }
        #result_van p:hover {
            background: #ccf;
        }
		  #result_naar {
            /*display: none;*/
            position: absolute;
            border: 1px solid #99f;
            left: 850px;
            background: white;
            z-index: 1000;
        }
        #result_naar p {
            margin: 0px;
            padding: 2px;
            cursor: pointer;
        }
        #result_naar p:hover {
            background: #ccf;
        }
        pre {
            margin: 20px;
            padding: 20px;
            border: 2px solid red;
        }
    </style>
</head>
<?php
require_once "prepend.php";
if ($_SESSION['user'] == null) {
 require "form.php";
} else {
    $user = $_SESSION['user'];
  	 
}
if (!check_auth_user($user,'expert')) return;	
include("header.html");
include("db_werk.php");
include("ajax.js");
$mysql_id=mysql_connect("$dbhost","$dbuser","$dbpass");
if(isset($_POST['invoeren'])) {
$datum= sprintf (
        '%02d-%02d-%02d %02d:%02d:00',
        $_POST['jaar'],
        $_POST['maand'],
        $_POST['dag'],
        $_POST['uur'],
        $_POST['min']
        );
$nacht=$_POST[nacht];
$soort=$_POST[soort];
$dag =  $_POST['dag']; 
$maand =  $_POST['maand'];
$jaar =  $_POST['jaar'];
$uur = $_POST['uur'];
$min = $_POST['min'];
$tijd = $uur .':'. $min;
$van = $_POST[van];
$naar = $_POST[naar];
$naam = $_POST[naam];
$aantal = $_POST[aantal];
$bedrag = $_POST[bedrag];
$telefoonnummer = $_POST[telefoonnummer];
$vluchtnummer = $_POST[vluchtnummer];
$opmerking = $_POST[opmerking];
$sql=" INSERT into werk (datum,nacht,soort,van,naar,naam,aantal,bedrag,telefoonnummer,vluchtnummer,opmerking,user) VALUES ('$datum','$nacht','$soort','$van','$naar','$naam','$aantal','$bedrag','$telefoonnummer','$vluchtnummer','$opmerking','$user')";
$res=mysql_db_query("$db","$sql",$mysql_id);

$recipient="[email protected],[email protected],[email protected],[email protected]";
       $subject="Invoer Database Zaanlandgroep";
		   $header="From: " . $user . "\r\n";
       $mail_body ="Deze ritopdracht of Schipholreservering is op " . date("d-m-Y") . " om " . date("H:i") . " uur ingevoerd door " . $user ."\n\n";
       $mail_body.="Datum: " . $dag ."-".$maand."-".$jaar."\n";
       $mail_body.="Tijd: " . $tijd . "\n";
       $mail_body.="Nacht: " . $nacht . "\n";
       $mail_body.="Soort: " . $soort . "\n";
	   $mail_body.="Van: " . $van . "\n";
	   $mail_body.="Naar: " . $naar . "\n";
	   $mail_body.="Naam: " . $naam . "\n";
	   $mail_body.="Aantal: " . $aantal . "\n";
	   $mail_body.="Bedrag: " . $bedrag . "\n";
	   $mail_body.="Telefoonnummer: " . $telefoonnummer . "\n";
	   $mail_body.="Vluchtnummer: " . $vluchtnummer . "\n";
       $mail_body.="Opmerking: " . $opmerking . "\n\n ---- Einde Schipholreservering ----";
	   
mail($recipient,$subject,$mail_body,$header);

$relative_url = 'index.php';
header("Location: http://".$_SERVER['HTTP_HOST']
                          .dirname($_SERVER['PHP_SELF'])
                          ."/".$relative_url);

}
else {
ob_end_flush(); 

?>
<center>
<form name="myForm" action="<?php echo $_SERVER[PHP_SELF];?>" method="post">
<div align="left">

<table border="1" cellspacing="1" style="border-collapse: collapse" bordercolor="#000066" width="100%" cellpadding="5">
<tr>
	<td colspan="3" bgcolor="#B5CBEF" height="17" width="100%" bordercolor="#FFFFFF" background="tile_back.gif">
	<font face="Verdana" size="2" color="#FFFFFF"><img border="0" src="nav_m.gif" width="8" height="8">
	<font face='Verdana' size=2 color='#FFFFFF'><b></font>
	<font face="Verdana" size="2" color="#000066">Voer hier de reserveringen in:</font></td>
	
</tr>
<div id="result_van"></div><div id="result_naar"></div>
<tr>
	<td height="30" width="55" bgcolor="#EFF3F7" bordercolor="#FFFFFF">
	<img border="0" src="bc_new.gif" width="28" height="28"></td>
		<td height="30" width="189" bgcolor="#EFF3F7" bordercolor="#FFFFFF">
		<font face="Verdana" size="2"><span class="style1">Datum:</span></td><td height="30" width="189" 
		bgcolor="#EFF3F7" bordercolor="#FFFFFF" class="split-date-wrap" >
		<input type="text" class="w2em" id="date-1-dd" name="dag" value="" maxlength="2" size="2"/><label for="date-1-dd    "></label>
		<input type="text" class="w2em" id="date-1-mm" name="maand" value="" maxlength="2" size="2"/><label for="    date-1-mm"></label>
		<input type="text" class="w4em split-date" id="date-1" name="jaar" value="" maxlength="4" size="4"/><label for="		    date-1"></label></class></td>                
</tr>

<tr>
	<td height="30" width="55" bgcolor="#EFF3F7" bordercolor="#FFFFFF">
	<img border="0" src="bc_new.gif" width="28" height="28"></td>
  		<td height="30" width="189" bgcolor="#EFF3F7" bordercolor="#FFFFFF">
		<font face="Verdana" size="2"><span class="style1">Tijd:</span></td>
  			<td height="30" width="469" bgcolor="#EFF3F7" bordercolor="#FFFFFF">
			<font face="Verdana"><input name='uur' type=text size=2 maxlength="2">:<input type=text name='min' size=2 			    maxlength="2"></td>
</tr>
	
<tr>
	<td height="30" width="55" bgcolor="#EFF3F7" bordercolor="#FFFFFF">
	<img border="0" src="bc_new.gif" width="28" height="28"></td>
  		<td height="30" width="189" bgcolor="#EFF3F7" bordercolor="#FFFFFF">
		<font face="Verdana" size="2"><span class="style1">D/N:</span></td>
  			<td height="30" width="469" bgcolor="#EFF3F7" bordercolor="#FFFFFF"><font face="Verdana">
    		<select name='nacht'>
			<option value='n.v.t.'>n.v.t.</option>
			<option value='nacht ma/di'>nacht ma/di</option>
			<option value='nacht di/wo'>nacht di/wo</option>
			<option value='nacht wo/do'>nacht wo/do</option>
			<option value='nacht do/vrij'>nacht do/vrij</option>
			<option value='nacht vrij/zat'>nacht vrij/zat</option>
			<option value='nacht zat/zon'>nacht zat/zon</option>
			<option value='nacht zon/ma'>nacht zon/ma</option>
	  </select></tr>

<tr>
	<td height="30" width="55" bgcolor="#EFF3F7" bordercolor="#FFFFFF">
	<img border="0" src="bc_new.gif" width="28" height="28"></td>
  		<td height="30" width="189" bgcolor="#EFF3F7" bordercolor="#FFFFFF">
		<font face="Verdana" size="2"><span class="style1">Soort:</span></td>
  			<td bgcolor="#EFF3F7" bordercolor="#FFFFFF">
			<font face="Verdana">
 			<select name='soort'>
      		<option value='Ritopdracht'>Ritopdracht</option>
     	    <option value='Schipholreservering'>Schipholreservering</option>
      		<option value='Mededeling'>Mededeling</option>
    		</select></td>
</tr>

<tr>
	<td height="30" width="55" bgcolor="#EFF3F7" bordercolor="#FFFFFF">
	<img border="0" src="bc_new.gif" width="28" height="28"></td>
  		<td height="30" width="189" bgcolor="#EFF3F7" bordercolor="#FFFFFF">
		<font face="Verdana" size="2"><span class="style1">Van:</span></td>
  			<td height="30" width="469" bgcolor="#EFF3F7" bordercolor="#FFFFFF"><font face="Verdana">
    		<label>
            <input id="straat" name="van" type="text" onkeyup="ajaxFunction (this, 'result_van');" size= "50">
            </label></font>
        </td></tr>

<tr>
	<td height="30" width="55" bgcolor="#EFF3F7" bordercolor="#FFFFFF">
	<img border="0" src="bc_new.gif" width="28" height="28"></td>
  		<td height="30" width="189" bgcolor="#EFF3F7" bordercolor="#FFFFFF">
		<font face="Verdana" size="2"><span class="style1">Naar:</span></td>
  			<td height="30" width="469" bgcolor="#EFF3F7" bordercolor="#FFFFFF">
    		<label>
            <input id="bestemming" name="naar" type="text" onkeyup="ajaxFunction (this, 'result_naar');" size= "50">
            </label></td>
</tr>

<tr>
	<td height="30" width="55" bgcolor="#EFF3F7" bordercolor="#FFFFFF">
	<img border="0" src="bc_new.gif" width="28" height="28"></td>
  		<td height="30" width="189" bgcolor="#EFF3F7" bordercolor="#FFFFFF">
		<font face="Verdana" size="2"><span class="style1">Naam:</span></td>
  			<td height="30" width="469" bgcolor="#EFF3F7" bordercolor="#FFFFFF"><font face="Verdana">
    		<label>
    		<input type="text" size= "50"name="naam" />
    		</label></td>
</tr>

<tr>
	<td height="30" width="55" bgcolor="#EFF3F7" bordercolor="#FFFFFF">
	<img border="0" src="bc_new.gif" width="28" height="28"></td>
  		<td height="30" width="189" bgcolor="#EFF3F7" bordercolor="#FFFFFF">
		<font face="Verdana" size="2"><span class="style1">Aantal personen:</span></td>
  			<td bgcolor="#EFF3F7" bordercolor="#FFFFFF"><font face="Verdana">
 			<select name='aantal'>
   			<option value="n.v.t.">n.v.t.</option>
   			<option value="1 pers.">1 pers.</option>
   			<option value="2 pers.">2 pers.</option>
   			<option value="3 pers.">3 pers. </option>
   			<option value="4 pers.">4 pers.</option>
    		</select></td>
</tr>

<tr>
	<td height="30" width="55" bgcolor="#EFF3F7" bordercolor="#FFFFFF">
	<img border="0" src="bc_new.gif" width="28" height="28"></td>
  		<td height="30" width="189" bgcolor="#EFF3F7" bordercolor="#FFFFFF">
		<font face="Verdana" size="2"><span class="style1">Bedrag:</span></td>
  			<td bgcolor="#EFF3F7" bordercolor="#FFFFFF"><font face="Verdana">
 			<input name="bedrag" type="text" size="7" maxlength="7"></td>
</tr>

<tr>
	<td height="30" width="55" bgcolor="#EFF3F7" bordercolor="#FFFFFF">
	<img border="0" src="bc_new.gif" width="28" height="28"></td>
  		<td height="30" width="189" bgcolor="#EFF3F7" bordercolor="#FFFFFF">
		<font face="Verdana" size="2"><span class="style1">Telefoonnummer:</span></td>
  			<td bgcolor="#EFF3F7" bordercolor="#FFFFFF"><font face="Verdana">
 			<input name="telefoonnummer" type="text" size="30" maxlength="30"></td>
</tr>
		
<tr>
	<td height="30" width="55" bgcolor="#EFF3F7" bordercolor="#FFFFFF">
	<img border="0" src="bc_new.gif" width="28" height="28"></td>
  		<td height="30" width="189" bgcolor="#EFF3F7" bordercolor="#FFFFFF">
		<font face="Verdana" size="2"><span class="style1">Vluchtnummer:</span></td>
  			<td bgcolor="#EFF3F7" bordercolor="#FFFFFF"><font face="Verdana">
 			<input name="vluchtnummer" type="text" size="8" maxlength="8" ></td>
</tr>
		
<tr>
	<td height="30" width="55" bgcolor="#EFF3F7" bordercolor="#FFFFFF">
	<img border="0" src="bc_new.gif" width="28" height="28"></td>
  		<td height="30" width="189" bgcolor="#EFF3F7" bordercolor="#FFFFFF">
		<font face="Verdana" size="2"><span class="style1">Opmerking:</span></td>
		<td bgcolor="#EFF3F7" bordercolor="#FFFFFF"><font face="Verdana"><input name="opmerking" type="text" size="50" /></td>
</tr>
	
<tr>
	<td colspan="3" bgcolor="#B5CBEF" height="25" width="737" background="tile_sub.gif"><p align="center"><font face="Verdana" size="2">
	<input type=submit name= 'invoeren'value='bevestigen'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type=reset value='reset'></font></td>
</tr>	
</table>
</form> 

 </p>
   
</center>
<?php
}
include("footer.html");
?>


En dit is ons ajax_straatnamen.php


<?php
include("db_werk.php");
if (isset ($_GET['straat'])) {
    mysql_connect($dbhost,$dbuser,$dbpass) or die(mysql_error());
    mysql_select_db($db) or die(mysql_error());
  $sql = "
    SELECT
        s.straat,
        g.gemeente
    FROM
        straten AS s,
        gemeenten AS g,
        straten_gemeenten AS sg
    WHERE
        g.id = sg.gemeente_id
    AND
        sg.straat_id = s.id
    AND
        s.straat LIKE '".mysql_real_escape_string($_GET['straat'])."%'
";
    if ($res = mysql_query ($sql)) 
    {
        if (mysql_num_rows ($res) > 0) 
        {
            while ($row = mysql_fetch_assoc ($res)) 
            {
               
			   echo '<p onclick="document.getElementById (\'straat\').value = this.innerHTML; document.getElementById (\'lijst\').innerHTML = \'\'">'.$row['straat'].' ('.$row['gemeente'].')</p>';
            }
        }
        else
        {
            echo 'Geen straatnamen gevonden die overeenkomen met de databese gegevens ';
        }
    }
    else
    {
        trigger_error(mysql_error().'<br />In query: '.$sql);
    }
}
?> 


Het probleem is dat als ik in het "naar" veld iets invoer, de straten te voorschijn komen zoals bedoeld, en ik selecteer er 1 dan plaatst het script de straat mooi in het veld, maar het zoekgedeelte blijft openstaan.
Mooier zou zijn, na selectie dat dit veld verdween.
Als ik in het "naar" veld iets intik, komen er weer de straten, maar als ik er 1 selecteer, plaatst het script de straat weer in het "van" veld, tevens blijft hier het zoekgedeelte ook weer open staan.
Aha, dus de namen komen wel al in beeld te staan...

Maak van regel 42 in je ajaxfunctie eens:

xmlHttp.open ("GET", "ajax_straatnamen.php?straat="+ get +"&veld="+ element.id +"&result="+ result, true);


En van regel 28 in je phpscript:
<?php
echo '<p onclick="document.getElementById (\''.$_GET['veld'].'\').value = this.innerHTML; document.getElementById (\''.$_GET['result'].'\').style.display = \'none\'">'.$row['straat'].' ('.$row['gemeente'].')</p>';
?>
Ongelofelijk, het werkt!!!
Nu moet ik de divs die de straten showen nog even mooi met de css positioneren dat ze precies onder de invoervelden te voorschijn komen.
De locaties voer ik wel tussen de straten in hoor, zoveel zijn dat er ook weer niet.
De oplossing die ik gaf is niet de meeste elegante, maar hij werkt blijkbaar wel :)

Reageren