After unsuccessfully attempting to solve my issue strictly with Ajax, I have made the move to JQuery. Unfortunately I have a limited understanding of JQuery and was hoping someone could tell me what it is I am doing wrong. I have spent multiple days on this problem and have essentially got nowhere!
My task in theory is simple, all I want to do is take the value of a HTML drop down menu and call a php function with the appropriate row of the drop down menu. The php function print_wp_cart_button_for_product outputs an add to cart button. The function is to be called via a row that corresponds to an item in my product array.
<TR>
<TD>
<select id="productcategory1" name="productcategory1" onchange="productchange()">
<option value="$">--Please Select--</option>
<option value="1">Product # 1 - $1.99</option>
<option value="2">Product # 2 - $1.99</option>
<option value="3">Product # 3 - $9.99</option>
<option value="4">Product # 4 - $9.99</option>
</select>
</TD>
<TD>
<div id="test">
</div>
<script type = "text/javascript">
function productchange()
{
var currentrow = $('#productcategory1').val();
//alert(currentrow);
$.ajax({
type: "GET",
url: "http://www.example.com/wp-content/themes/themeX/order.php",
data: "rownum=" + currentrow,
success: function(currentrow){
$("#test").html(currentrow);
}});
return false;
}
</script>
<?php $rownum = $_GET['test']; ?>
<?php echo print_wp_cart_button_for_product($products[$rownum]["Product"], $products[$rownum]["Price"]); ?>
</TD>
</TR>
Order.php:
<?php
$rownum = $_GET['rownum'];
echo "Row Number = $rownum";
?>
