Hello,

 

My query seems to be quite a simple one. The solution, however, I am finding great difficulty to find/understand.

 

This is what I currently have;

 

<select class="choice" id="fijournal" name="fijournal" required="required">

<option value="" disabled selected>Select journal...</option>

<?php

$clientid = $_SESSION['clientid'];

require_once('connection.php');

$query = "SELECT ClientID, JournalID, Title

FROM tbl_jv_journals

WHERE ClientID = $clientid

ORDER BY Title";

$result = mysql_query($query);

while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {

$journalid = $row['JournalID'];

echo "<option id='fijournal' name='fijournal' value='$journalid'>";

echo $row['Title'];

echo "</option>";

}

?>

</select>

What I need is to have a second Select drop-down list to be populated based on the choice made in this first one. I am fine with the php/mySQL side of things but I need help with the Javascript that is required to achieve this.

The second Select drop-down list will house all relevant Volumes for the selected Journal and then, via a third drop-down list, all relevant issues shall be present.

Upon conducting some online research (Including google searches and a lot of headaches) I just could not get my head around the few solutions I came across.

I would very much appreciate a nod in the right direction and an explanation on how the solution works.

Thank you for reading,

- MjA -

You could use an ajax request and create the select using php, then populate the response from the ajax request (the select) inside a div's html.

Similar to:

$.ajax({
type: "POST",
url: "create_select.php",
data: { select_data_one: "John" }
})
.done(function( response ) {
jQuery("#div").html(response);
});

 

 

Thank you for your reply.

 

I have very little experience with JavaScript (Possibly because I find it most difficult to understand out of all the web languages). Would you be able to explain what an ajax request is and how to use it?

 

 

I have the following code which I need to run when a selection is made from the first drop-down list. This is in it's own PHP file called 'form_issue_getter.php'

 

<?php

session_start();
require_once('connection.php');

$choice = $_SESSION['fijournal'];

$query = "SELECT Volume
          FROM tbl_jv_issues
          WHERE JournalID = $choice
          ORDER BY Volume";

$result = mysql_query($query);

while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
    echo "<option style='color: black;' id='fijournal' name='fijournal'>";
    echo $row['Volume'];
    echo "</option>";
}

 

This is what I have on my main page, after what is posted in my first post;

<select class="choice2" id="fivolume" name="fivolume" required="required">
            <option style="color: grey" value="" disabled selected>Select journal first...</option>
        </select>

        <select class="choice3" id="fiissue" name="fiissue" required="required">
            <option style="color: grey" value="" disabled selected>Select volume first...</option>
        </select>

 

Would this setup work with your proposed AJAX solution or am I looking at this all from the wrong angle?

 

- MjA -

Edited March 11, 201412 yr by SkullBob

An ajax request will make a request to a server side script like a php file.
The php file will do whatever you code it to do.

With an ajax request you could take some user input, pass it to a server side script, do some validation/calculation with it and then return a response.

https://api.jquery.com/jQuery.ajax/

 

Good luck!

I forgot to update this post. Thanks to a fair amount of head scratching, headaches, and half working code, I managed to get my head around using ajax to accomplish this need, and many more. Thank you.

 

- MjA -