I want to load a page inside a div via load by passing a variable that will define the content of the page to be loaded.
My code:
index.php
<!DOCTYPE html>
<html>
<head>
<script
type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
<script>
$(document).ready(function(){
$('.carrega').click(function(){
$('#aqui').load('pagina.php?variavel='+$('.carrega').val());
});
});
</script>
<?php
$arr = array('azul', 'branco', 'cinza');
for ($i = 0; $i < count($arr); $i++) {
$temp=$arr[$i];
echo "<button class='carrega' value='$temp'>$temp</button>";
}
?>
<div id="aqui"></div>
</html>
page.php
<?php
$variavel=$_GET['variavel'];
echo $variavel;
?>
The page loads correctly, however only the first variable is passed by the URL. I do not know what I'm doing wrong, could someone help me?