Updating div based on dropdown response without refreshing

Question

I am trying to create a dropdown that will update text on a page without refreshing the page. The updated text will be supplied by a php function which is passed a value from the dropdown. Right now, my dropdown does nothing, but here is where I've managed to get:

webpage.php:

My dropdown. Populated by a database.

<form method='post'>
    <select name="skill1_level" id="skill1_level" onchange="skill1ValueChange(this.value)">
        // PHP to dynamically populate list from the DB
        <?php foreach ($skill_levels as $key => $skill_levels_list): ?>
            <option value=""><?= $skill_levels_list->skill_level ?></option>
        <?php endforeach ?>
    </select>
</form>

My div. Currently just loading a default string. Need to figure out how to make this change when the dropdown is submitted. Not sure how to use AJAX here.

<div class="panel-body" id="skill1_text">
    <?php echoSkill($hero->skill1_desc, $placeholders, $id_hero, 1, 1, $dbh); ?>
</div>

functions.js. Javascript to be called when dropdown is submitted. Calls PHP function.

function skill1ValueChange(skill_level) {

$.ajax({
    url: 'functions.php',
    type: 'POST',
    data: {option : skill_level},
    success: echoSkill($hero->skill1_desc, $placeholders, $id_hero, 1, skill_level, $dbh) {
        console.log("Data sent for skill1.");
    }
});

functions.php. does some stuff to my data based on the dropdown value, then echos the resulting string.

function echoSkill ($skill_desc, $placeholders, $id_hero, $skill_num, $skill_level, $dbh) {
    $skill_values = fetchSkillValues($id_hero, $skill_num, $skill_level, $dbh);
    $skill_values = array($skill_values[0]->skill_x, $skill_values[0]->skill_y, $skill_values[0]->skill_z, $skill_values[0]->skill_a);
    $skill_desc = str_replace($placeholders, $skill_values, $skill_desc);
echo $skill_desc;
}

Any help and explanation you can provide would be greatly appreciated!

Answer 1

Probably the easiest for you would be to return HTML from your functions.php (actually, you should probably have it reference a different page that includes the functions.php page and echos the echoSkill() function) file:

Page with dropdown:

<!-- I assume you already have the libraries...-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<form method='post'>
    <!--You can just add the change in the jQuery instead of inline js -->
    <select name="skill1_level" id="skill1_level">
            <option value="1">Value 1</option>
            <option value="2">Value 2</option>
            <option value="3">Value 3</option>
            <option value="4">Value 4</option>
    </select>
    <!-- This is where your empty div will fill with the php content -->
    <div class="panel-body" id="skill1_text"></div>
</form>

<script>
// Select by the <select> named "skill1_level"
// When changed...
$("select[name='skill1_level']").change(function() {
    // Assign the selection's value
    var OptionVal   =   $(this).val();
    $.ajax({
            url: 'functions.php',
            type: 'post',
            data: { option: OptionVal },
            // You need a success function here
            success: function(response) {
                 // This will print out the response from your php page
                 // to the div on this page called "skill1_text"
                 $("#skill1_text").html(response);
            }
    });
});
</script>

functions.php

<?php
    //code here to return just the text or whatever
    // You should actually have the ajax call a page that has the "echoSkill()"
    // function on it rather than the function page itself
    echo 'Response to ajax page.';
    echoSkill($blah,$blah2,$blah3,$blah4,$blah5,$blah6);
    print_r($_POST);
?>