I have 3 different files:
ajax.js
function ajaxPreTier(index) {
$.ajax({
type: "POST",
url: 'ajax.php',
data:{action: 'setPreTierImg', i: index},
success:function(html) {
alert(html);
}
});
}
function ajaxPostTier(index) {
$.ajax({
type: "POST",
url: 'ajax.php',
data:{action: 'setPostTierImg', i: index},
success:function(html) {
alert(html);
}
});
}
ajax.php
<!-- ajax.php -->
<script>
function setPreTierImg() {
switch($_POST['i']) {
case 0:
document.getElementById("preTier").src = 'images/bronze_rank.png';
break;
case 1:
document.getElementById("preTier").src = 'images/silver_rank.png';
break;
case 2:
document.getElementById("preTier").src = 'images/gold_rank.png';
break;
case 3:
document.getElementById("preTier").src = 'images/platinum_rank.png';
break;
case 4:
document.getElementById("preTier").src = 'images/diamond_rank.png';
break;
}
}
function setPostTierImg() {
switch($_POST['i']) {
case 0:
document.getElementById("postTier").src = 'images/bronze_rank.png';
break;
case 1:
document.getElementById("postTier").src = 'images/silver_rank.png';
break;
case 2:
document.getElementById("postTier").src = 'images/gold_rank.png';
break;
case 3:
document.getElementById("postTier").src = 'images/platinum_rank.png';
break;
case 4:
document.getElementById("postTier").src = 'images/diamond_rank.png';
break;
}
}
</script>
<?php
if($_POST['action'] == 'setPreTierImg') {
setPreTierImg();
}
if($_POST['action'] == 'setPostTierImg') {
setPostTierImg();
}
?>
test2.php
<html>
<head>
---
---
<script src="ajax.js"></script>
<?php
echo "<form action='./test2.php' method='post'>
<select name='tier' style='width:100%;' onclick='ajaxPreTier(this.selectedIndex)'>
<option value='1'>Bronze</option>
<option value='2'>Silver</option>
<option value='3'>Gold</option>
<option value='4'>Platinum</option>
<option value='5'>Diamond</option>
</select>
<select name='division' style='width:100%;'>
<option value='1'>I</option>
<option value='2'>II</option>
<option value='3'>III</option>
<option value='4'>IV</option>
<option value='5'>V</option>
</select>
<select name='lp' style='width:100%;'>
<option value='1'>0-20</option>
<option value='2'>21-40</option>
<option value='3'>41-60</option>
<option value='4'>61-80</option>
<option value='5'>81-100</option>
</select>
<input type='hidden' name='product_id' value='1' />
<input type='submit' name='add_to_cart' value='Add to cart' style='width:206%;'/>
</div>
</div>
</div>";
echo '<div class="col-md-3 col-sm-6" style="width:50%;">
<div>
<div class="item-icon">
<img id="postTier" src="images/bronze_rank.png" style="width:100%"></img>
<p style="line-height: 60px;">Your finished division</p>
</div>
<div class="item-details">';
echo "<select name='post_tier' style='width:100%;' onclick='ajaxPostTier(this.selectedIndex)'>
<option value='1'>Bronze</option>
<option value='2'>Silver</option>
<option value='3'>Gold</option>
<option value='4'>Platinum</option>
<option value='5'>Diamond</option>
</select>
<select name='post_division' style='width:100%;'>
<option value='1'>I</option>
<option value='2'>II</option>
<option value='3'>III</option>
<option value='4'>IV</option>
<option value='5'>V</option>
</select>
</form>";
?>
</head>
</html>
Inside the test2.php I have some php code where I have an input from the user to choose a certain option. When the option is chosen, The select has an onclick button which callbacks to my two functions: ajaxPreTier(index) and ajaxPostTier(index). Then it goes to ajax.php
Inside my ajax.php I have added the functions that I'm using but the functions setPreTierImg() and setPostTierImg() are always unidentified.
enter image description here
