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!

Recommended Answers

All 6 Replies

Your current design doesn't allow what you want to do (add multiple itenerary) because the JQuery script is being tied (hard-coded) to a specific HTML element (select tag with ID "it"). I am not an expert in JQuery because I don't use it. I can understand the code from reading but I cannot write a script using it because I am not familiar with its syntax. Anyway, you could add more arguments to distinguish which element is being read from and write to. Sorry, you may need someone else who is familiar with JQuery to help you in this case.

@Taywin, do you have any ideas on how to do this using PHP script only? I too, am not familiar with JQuery or javascript so I'm really really having a hard time right now. :((( Thank you for replying anyway. If you know someone here who can help, please let them know about this. Thank you very much. :)))

Hmm... I've not done PHP for a long time... But if you ask on PHP forum, you may get some help there. :)

ok.. thank you very much for your replies.. :))

Have a look at the jQuery documentation for append. It allows you to inject HTML code into the page.

@pritaeas, I checked it out and I think it'll help a lot. Thanks. But I'm wondering if I'll be able to duplicate the same function from the original, like populating it with data from database and such. Thank you for your reply.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.