Hello! I have a code here that has a dropdown box which is populated with data from mysql table, itinerary to be spicific (e.g. Tokyo- London, London - Tokyo, etc.). I also have a textbox that displays the block time (no. of hours required to travel a specific itinerary) of a specific itinerary. Here's a sample of the data from mysql table itinerary:
icode----itinerary----btime
00001----London - Tokyo----10:00:00
00002----Tokyo - London----10:30:00
00003----Manila - Tokyo----3:00:00
So the dropdown should have the options, London - Tokyo, Tokyo-London and Manila - Tokyo respectively. Once I choose Manila - Tokyo from the dropdown, the textbox will display 3:00:00. I can do this by using the following codes:
addres.php
<html>
<body>
<?php
$lsql = "SELECT * FROM itinerary";
$lresult = mysql_query($lsql);
echo "<tr><td><font face=consolas><b>Itinerary:</b></font></td><td><select name='loc' id='it'>";
while ($lrow = mysql_fetch_array($lresult))
{
echo "<option value='" . $lrow['location'] . "'>" . $lrow['location'] . "</option>";
}
//echo"<tr><td></td><td><button id='additbutt'><b>Add Another Itinerary</b></button></td></tr>";
echo"
<tr><td><font face=consolas><b>Block Time:</b></font></td><td><input type=text name=btime id='bt' readonly=readonly /></td></tr>";
?>
<div id="empDiv"></div>
</body>
</html>
new.js
function connectsample(var1){
$.post("add-method.php",{vCase: var1,
location: $("#it").val()},
function(data){
$("#empDiv").html(data);
});
}
function itinerary(vCase, data){
if(vCase == "clickData")
{
$("#bt").val(data);
}
}
$(document).ready(function() {
$("#it").change(function() {
connectsample("itinerary");
});
});
add-method.php
<?php
require("aacfs.php");
$class=$_POST['vCase'];
$location=$_POST['location'];
if($class=="itinerary")
{
$asql = "SELECT * FROM itinerary where location='$location'";
$aresult = mysql_query($asql);
$arow = mysql_fetch_array($aresult);
$btime=$arow['btime'];
echo"<script type=\"text/javascript\">";
echo "itinerary(\"clickData\",\"$btime\");";
echo"</script>";
}
?>
So, what I want to do is, generate another dropdown and textbox whenever the user clicks the 'Add Another Itinerary' button which do the same from the first dropdown and textbox (populate the dropdown itinerary & display blocktime to textbox w/out clicking/submitting any button whatsoever) without deleting the previous itinerary selection. In short, I want to allow multiple itinerary selection (like how shopping cart does). Furthermore, I want to be able to get the values of those itineraries selection and save it to mysql database. I quite got an idea on how to do the saving with mysql but that's the only idea I got.
I do not know how I should do this. I'm very new to jQuery or javascript after all. I just got a friend to help me do this and it seems like I can't ask for help from her for a little while. Any help will be appreciated. Clarifications, questions and suggestions are most welcome! Thank you in advance!
RSS Feed