Updating div based on dropdown response without updating
I am trying to create a dropdown that will update the text on the page without refreshing the page. The updated text will be provided by the php function, which will pass the value from the dropdown. Right now my dropdown is not doing anything, but here's where I succeeded:
webpage.php:
My dropdown list. Populated by the 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, it just loads the default string. You need to figure out how to make this change when submitting the dropdown. 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 will be called on dropdown. Calls a 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 things to my data based on the dropdown value and then outputs 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!
source to share
Probably the easiest one for you would be to return the HTML from yours functions.php
(in fact, you probably probably have to link to another page containing the page functions.php
and echos to the function echoSkill()
):
Dropdown page:
<!-- 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 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);
?>
source to share