Calculatorish problem using form elements
Hello all,
I am pretty new at jquery and don't know much javascript either. I've been handed a calculator function that calculates a taxi price to multiple airports depending on the location of the client. This has already been created by a former employee. But now there is a need to add some extra functions to the calculator, and I have no idea and not much time to solve it. So I hope someone could point me in the right direction.
So I will just post the working code and I have already started to add the new form fields to come.
I need to implement 3 form elements (checkbox which adds 7.50 to the total price, dropdown 1-7 adding each 7.50 to the price, and another dropdown 1-7 each adding 17.50 to the price). I've marked in red what I have added.
Additional information: This code is beign implemented into a single article of a Joomla website.
ajax.js
- jQuery.noConflict();
jQuery(window).load(function() {
if (jQuery('#itsel').length > 0) {
jQuery.post('ajax.php?field=plaats', {}, function (data) {
jQuery('#i_plaats').html(data).change(updateAirport);
}, 'html');
}
});
updateAirport = function(ev) {
if (jQuery(ev.currentTarget).val() != '') {
jQuery.post('ajax.php?field=airport', jQuery('select, input').serializeArray(), function (data) {
jQuery('#i_airport').html(data).change(updatePersonen);
jQuery('#i_personen').html('');
jQuery('#i_reistype').html('');
jQuery('#tarief').html('');
}, 'html');
}
}
updatePersonen = function(ev) {
if (jQuery(ev.currentTarget).val() != '') {
jQuery.post('ajax.php?field=personen', jQuery('select, input').serializeArray(), function (data) {
jQuery('#i_personen').html(data).change(updateTarief);
jQuery('#i_reistype').html('');
jQuery('#tarief').html('');
}, 'html');
}
}
updateTarief = function(ev) {
if (jQuery(ev.currentTarget).val() != '') {
jQuery.post('ajax.php?field=tarief', jQuery('select, input').serializeArray(), function (data) {
jQuery('#tarief').html(data);
}, 'html');
}
}
ajax.php
-
require_once('config.inc.php');
define('FARE_TABLE', 'faredata');
echo $_GET['field'];
if (isset($_GET['field'])) {
switch ($_GET['field']) {
case 'plaats':
$q = mysql_query('SELECT DISTINCT plaats FROM ' . FARE_TABLE . ' ORDER BY plaats ASC');
echo '[Kies uw woonplaats]';
while ($r = mysql_fetch_row($q)) {
$plaats = array_shift($r);
printf('%s', $plaats, $plaats);
}
break;
case 'airport':
$q = mysql_query(sprintf('SELECT DISTINCT airport FROM ' . FARE_TABLE . ' WHERE plaats = "%s" ORDER BY airport ASC', mysql_real_escape_string($_POST['plaats'])));
echo '[Kies een airport]';
while ($r = mysql_fetch_row($q)) {
$plaats = array_shift($r);
printf('%s', $plaats, $plaats);
}
break;
case 'personen':
$q = mysql_query(sprintf('SELECT DISTINCT personen FROM ' . FARE_TABLE . ' WHERE plaats = "%s" AND airport = "%s" ORDER BY personen ASC', mysql_real_escape_string($_POST['plaats']), mysql_real_escape_string($_POST['airport'])));
echo '[Kies aantal personen]';
while ($r = mysql_fetch_row($q)) {
$plaats = array_shift($r);
printf('%s', $plaats, $plaats);
}
break;
case 'reistype':
$q = mysql_query(sprintf('SELECT DISTINCT reistype FROM ' . FARE_TABLE . ' WHERE plaats = "%s" AND airport = "%s" AND personen = "%s" ORDER BY personen ASC', mysql_real_escape_string($_POST['plaats']), mysql_real_escape_string($_POST['airport']), mysql_real_escape_string($_POST['personen'])));
echo '[Kies reistype]';
while ($r = mysql_fetch_row($q)) {
$plaats = array_shift($r);
printf('%s', $plaats, $plaats);
}
break;
case 'tarief':
$q = mysql_query(sprintf('SELECT monetary FROM ' . FARE_TABLE . ' WHERE plaats = "%s" AND airport = "%s" AND personen = "%s" AND reistype = "%s" LIMIT 0, 1', mysql_real_escape_string($_POST['plaats']), mysql_real_escape_string($_POST['airport']), mysql_real_escape_string($_POST['personen']), mysql_real_escape_string($_POST['reistype'])));
print_r(array_shift(mysql_fetch_row($q)));
break;
}
}
?>
index.php
I can't seem to figure out how to insert html code without it being rendered as a real html page.