Mbv ajax wordt na de eerste keuze (provincies) een tabel met plaatsen uit de provincie geopend, en daarna een derde.
Probleem is dat na de eerste live update een blanco insert in de database wordt gedaan terwijl ik eigenlijk de insert pas gedaan wil hebben nadat men op de verzend knop drukt aan het einde van het formulier, en dus niet na de 3 selects.
Ik maak gebruik van 2 files, funct.php file met daarin de ajax opbouw van de drie selectboxes, en een php file waarin het formulier en de insert zijn opgebouwd.
Hier volgt de funct.php:
<?php
//**************************************
// Pagina dropdown resultaten //
//**************************************
function getTierOne()
{
$result1 = mysql_query("SELECT
provincie
FROM
plaatsen
GROUP BY
provincie")
or die(mysql_error());
while($tier = mysql_fetch_array( $result1 ))
{
echo '<option value="'.$tier['provincie'].'">'.$tier['provincie'].'</option>';
}
}
//**************************************
// Eeerste selectie resultaten //
//**************************************
if($_GET['func'] == "drop_1" && isset($_GET['func'])) {
drop_1($_GET['drop_var']);
}
function drop_1($drop_var)
{
//DATABASE VARIABELEN >>> wordt nog vervangen door include
$host="xxxxxxxxx"; // De MySQL host van de server
$gebruiker = "xxxxxxxxxxxxxx"; // De gebruikersnaam van de MySQL database op de server
$wachtwoord = "xxxxxxxxxxxxxx"; // Het wachtwoord van de MySQL database op de server
$dbnaam="xxxxxxxxxxx"; // De naam van de database op uw server
mysql_connect($host, $gebruiker, $wachtwoord); // Niet wijzigen
mysql_select_db($dbnaam) or die (mysql_error()); // Niet wijzigen
$result2 = mysql_query("SELECT * FROM plaatsen WHERE provincie='$drop_var' GROUP BY plaats ORDER BY plaats ASC")
or die(mysql_error());
echo '<select name="drop_2" id="drop_2">
<option value=" " disabled="disabled" selected="selected">Kies plaatsnaam</option>';
while($drop_2 = mysql_fetch_array( $result2 ))
{
echo '<option value="'.$drop_2['stadid'].'">'.$drop_2['plaats'].'</option>';
}
echo '</select>';
echo "<script type=\"text/javascript\">
$('#wait_2').hide();
$('#drop_2').change(function(){
$('#wait_2').show();
$('#result_2').hide();
$.get(\"http://www.xxxxxxxxxxxxx.nl/inc/php/funct.php\", {
func: \"drop_2\",
drop_var: $('#drop_2').val()
}, function(response){
$('#result_2').fadeOut();
setTimeout(\"finishAjax_tier_three('result_2', '\"+escape(response)+\"')\", 400);
});
return false;
});
</script>";
}
//**************************************
// Second selection results //
//**************************************
if($_GET['func'] == "drop_2" && isset($_GET['func'])) {
drop_2($_GET['drop_var']);
}
function drop_2($drop_var)
{
//DATABASE VARIABELEN >>> wordt nog vervangen door include
$host="xxxxxxxxx"; // De MySQL host van de server
$gebruiker = "xxxxxxxxxxxxxx"; // De gebruikersnaam van de MySQL database op de server
$wachtwoord = "xxxxxxxxxxxxxx"; // Het wachtwoord van de MySQL database op de server
$dbnaam="xxxxxxxxxxx"; // De naam van de database op uw server
mysql_connect($host, $gebruiker, $wachtwoord); // Niet wijzigen
mysql_select_db($dbnaam) or die (mysql_error()); // Niet wijzigen
$result3 = mysql_query("SELECT * FROM categories ORDER BY catname")
or die(mysql_error());
echo '<select name="drop_3" id="drop_3">
<option value=" " disabled="disabled" selected="selected">Kies categorie</option>';
while($drop_3 = mysql_fetch_array( $result3 ))
{
echo '<option value="'.$drop_3['catname'].'">'.$drop_3['catname'].'</option>';
}
echo '</select> ';
}
?>
Hier is de pagina zelf:
<script type="text/javascript">
$(document).ready(function() {
$('#wait_1').hide();
$('#drop_1').change(function(){
$('#wait_1').show();
$('#result_1').hide();
$.get("http://www.xxxxxxxxxxxxxxxx.nl/inc/php/funct.php", {
func: "drop_1",
drop_var: $('#drop_1').val()
}, function(response){
$('#result_1').fadeOut();
setTimeout("finishAjax('result_1', '"+escape(response)+"')", 400);
});
return false;
});
});
function finishAjax(id, response) {
$('#wait_1').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
function finishAjax_tier_three(id, response) {
$('#wait_2').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
</script>
<script type=\"text/javascript\">
$('#wait_2').hide();
$('#drop_2').change(function(){
$('#wait_2').show();
$('#result_2').hide();
$.get(\"http://www.xxxxxxxxxxxxxxxx.nl/inc/php/funct.php\", {
func: \"drop_2\",
drop_var: $('#drop_2').val()
}, function(response){
$('#result_2').fadeOut();
setTimeout(\"finishAjax_tier_three('result_2', '\"+escape(response)+\"')\", 400);
});
return false;
});
</script>
<form action="" id="provincies" method="post">
<select name="drop_1" id="drop_1">
<option value="" selected="selected" disabled="disabled">Kies provincie</option>
<?php getTierOne(); ?>
</select>
<div id="wait_1" style="display: none;">
<img src="http://www.xxxxxxxxxxxxxxxx.nl/images/ajax-loader.gif" alt="Even geduld aub"/>
</div>
<div id="result_1" style="display: none;"></div>
<div id="wait_2" style="display: none;">
<img src="http://www.xxxxxxxxxxxxxxxx.nl/images/ajax-loader.gif" alt="Even geduld aub"/>
</div>
<div id="result_2" style="display: none;"></div>
