ReferenceError: ajaxfunction is not defined - php

Question

I've been unable to get an ajax script to run for some time.
Basically, I need the user to select an option from one drop down box, then, based on what's selected, the second drop down box with populate accordingly based on a MySQL query.
My Script looks like
<script type="text/javascript">
$(function(){
$('select [name="front-size"]').change(function()
{
$.ajax({
url: '../functions/process.php',
type:'get',
data:{'value' : $(this).val()},
dataType:"html",
success: function(data) {
$("#sub").html(data);
}
});
});
});
</script>
My initial drop down box is populated by a MySQL query like so
<select name="front-size" onchange="ajaxfunction(this.value)">
<?php
$door_size = $db->prepare("SELECT DISTINCT door_size FROM doors WHERE door_model = '".$_SESSION['front_door']."'");
$door_size->execute();
while($row = $door_size->fetch(PDO::FETCH_ASSOC))
{
$size = $row['door_size'];
echo '<option value="'.$size.'">'.$size.'</option>';
}
?>
</select>
The second drop down box is empty
<select name="front-finish" id="sub" onchange="ajaxfunction(this.value)">
</select>
And process.php should do the next query based on what was previously selected (this works on its own)
<?php
session_start();
include ('config.php');
$parent = $_GET['parent'];
$update_option = $db->prepare("SELECT door_finish FROM doors WHERE door_model = '".$_SESSION['front_door']."' AND door_size = '".$parent."'");
$update_option->execute();
while($row = $update_option->fetch(PDO::FETCH_ASSOC))
{
$door_finishes = $row['door_finish'];
echo '<option value="'.$door_finishes.'">'.$door_finishes.'</option>';
}
?>
In Firebug, when I select my first drop down menu, this error is shown and I've been unable to solve it.
ReferenceError: ajaxfunction is not defined
ajaxfunction(this.value)
How can I fix this?

Answer 1

you are calling ajaxfunction but you haven't defined it anywhere in the code.
<script type="text/javascript">
$(function(){
$('select [name="front-size"]').change(function()
{
$.ajax({
url: '../functions/process.php',
type:'get',
data:{'value' : $(this).val()},
dataType:"html",
success: function(data) {
$("#sub").html(data);
}
});
});
});
function ajaxFunction(stuff){
//do ajax stuff here will fix the error
}
</script>
On a broader note, why are you calling that inline in your html (onchange=ajaxfunction(this.value)) when the same thing can be accomplished in your ready function?
<script type="text/javascript">
(function(){
$('select[name="first"]').change(function(){
//do stuff
});
$('select[name="second"]').change(function(){
//do other stuff
});
})
</script>
would be better
EDIT: check this jsfiddle for a working example http://jsfiddle.net/WF8CV/