First Part

Form for the First Select Box

Second Part-JQuery

Third Part

Jregz:
yes you can,both codes are pretty much small to have stand-alone files.....
what's the file is to look like depends on what you are trying to achieve,
1.)do you want to select the irrespective of the other.... you could build different form tags in your layout and include this

2.)if you want to select them in the same form, fix everything in just one form tag


Then again, your Call

for the JavaScript --- you can also place it in the same file but you must make sure the jquery library is included before it

Jregz:
yes you can,both codes are pretty much small to have stand-alone files.....
what's the file is to look like depends on what you are trying to achieve,
1.)do you want to select the irrespective of the other.... you could build different form tags in your layout and include this

2.)if you want to select them in the same form, fix everything in just one form tag


Then again, your Call

for the JavaScript --- you can also place it in the same file but you must make sure the jquery library is included before it

Emusan:
First Part

<?php
// An array of options for the first select box.
$makes = array('Acura', 'BMW', 'Lexus', 'Toyota', 'Honda');

// Displays the posted info
if(isset($_POST['submit']))
{ echo '<pre>'; print_r($_POST); echo '</pre>'; }
?>
<form action="" method="post">
<select id="makes" name="makes">
<?php
// Build the options for the first select box
foreach($makes as $m){ echo '<option value="'.$m.'">'.$m.'</option>'; }
?>
</select>
<select id="models" name="models">
</select>
<input type="submit" name="submit" value="Submit">
</form>

Second Part-JQuery

<script>
$('#makes').change(function(){ //Basically saying when the first select box changes values run the function below.
var make = $(this).val(); // Grab the value of the selection to send to the select-request.php via ajax
$.post('select-request.php', {make:make}, function(data){ // Run a ajax request and send the var make as a post variable named "make" and return the info in the "data" var.
$('#models').html(data); // Have jquery change the html within the second select box with the "data" we got back from the ajax request.
});
});
</script>

Third Part

<?php
error_reporting(E_ALL); //Remove this line for production, it simply will allow php to display any errors

// I built arrays based on the value names in the $makes array
$acura = array('Integra', 'TSX', 'MDX');
$bmw = array('1 Series', '3 Series', '5 Series', 'X5');
$lexus = array('ES300', 'GX470', 'GS350', 'LS400H');
$toyota = array('Venza', 'Camry', 'Corolla', 'Echo');
$honda = array('Pilot', 'Accord', 'Civic', 'Ridgeline');

//We check to see if the "make" post has come through before we do any processing.
if(isset($_POST['make']))
{
$model = strtolower($_POST['make']);

foreach($$model as $mo){ echo '<option value="'.$mo.'">'.$mo.'</option>'; }
}
?>

Emusan:


<?php
$makes = array('Acura', 'BMW', 'Lexus', 'Toyota', 'Honda');

if(isset($_POST['submit']))
{ echo '<pre>'; print_r($_POST); echo '</pre>'; }
?>

<form action="" method="post">
<select id="makes" name="makes">
<?php
foreach($makes as $m){ echo '<option value="'.$m.'">'.$m.'</option>'; }
?>
</select>
<select id="models" name="models">
</select>
<input type="submit" name="submit" value="Submit">
</form>



<script>
$('#makes').change(function(){
var make = $(this).val();
$.post('select-request.php', {make:make}, function(data){
$('#models').html(data);
});
});
</script>


<?php
error_reporting(E_ALL);

$acura = array('Integra', 'TSX', 'MDX');
$bmw = array('1 Series', '3 Series', '5 Series', 'X5');
$lexus = array('ES300', 'GX470', 'GS350', 'LS400H');
$toyota = array('Venza', 'Camry', 'Corolla', 'Echo');
$honda = array('Pilot', 'Accord', 'Civic', 'Ridgeline');

if(isset($_POST['make']))
{
$model = strtolower($_POST['make']);

foreach($$model as $mo){ echo '<option value="'.$mo.'">'.$mo.'</option>'; }
}
?>

Emusan:


Please a need someone to help here;
1. I want to put the whole thing on the same file
2. How can I re-write the jQuery/<script> so that it won't contain the $.post(select-request)?
3. I want onchange event to occur at the second select box.

Please if you want to help, kindly use the above codes as an example.

Thanks!

<?php
$makes = array('Acura', 'BMW', 'Lexus', 'Toyota', 'Honda');
if(isset($_POST['submit']))
{ echo '<pre>'; print_r($_POST); echo '</pre>'; }
?>

<form action="" method="post">
<select id="makes" name="makes">
<?php
foreach($makes as $m){ echo '<option value="'.$m.'">'.$m.'</option>'; }
?>
</select>
<select id="models" name="models">
</select>
<input type="submit" name="submit" value="Submit">
</form>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$( "select#makes" ).change(function () {
var make = $( "#makes" ).val();
var string = 'make='+make;
$.ajax({
type: "POST",
url: "select.php",
data: string,
cache: false,
success: function(data){
$('#models').html(data);
}
});
});
return false;
});
</script>


<?php
error_reporting(E_ALL);

$acura = array('Integra', 'TSX', 'MDX');
$bmw = array('1 Series', '3 Series', '5 Series', 'X5');
$lexus = array('ES300', 'GX470', 'GS350', 'LS400H');
$toyota = array('Venza', 'Camry', 'Corolla', 'Echo');
$honda = array('Pilot', 'Accord', 'Civic', 'Ridgeline');

if(isset($_POST['make']))
{
$model = strtolower($_POST['make']);

foreach($$model as $mo){ echo '<option value="'.$mo.'">'.$mo.'</option>'; }
}
?>

onyengbu:


Below is the same code with the jquery part re written. Save in a php file named select.php or update line 27 if you save in another file.
You can see the jquery library I added is hosted online so run the file in a internet connected system or change line 19 to link to to your local copy of jquery library if you are offline.
Cheers.

Emusan:


Thanks so much for your contribution but I'm having problem with the second select box now because the first select box (for #makes) populated but the second select box (for #models) doesn't populate.

What can I do?
Thanks once again.

onyengbu:

The second select box (models) populating is the main plot behind the code and it is properly populating when you change makes value.

If you copied my code verbatim and followed the instructions, it must work.

Emusan:


Yes I copied everything just as you wrote them, just don't know the reason why it couldn't populate.

Thanks once again.

Can you help me with another alternative?

*modify
Let me say this, I'm using this code inside a PHP file where getheader was placed, so where exactly will the SCRIPT fit to be inserted?
Could it be after the gethearder or before?
Inside the form tag or outside the form tag?

because I placed the SCRIPT inside the form tag.