I have a system of budgets of computers in the site, with several options, and I want that when selecting an option update the values of the page without the refresh. For what I researched I will need to use 'ajax', however I have no idea how to use it or how to pass the data of the selected 'option'.
Problem Resolved:
HTML code:
div id="campo1">
<select id="cooler">
<option value="-1">Selecione</option>
<option value="350">Cooler 1</option>
<option value="520">Cooler 2</option>
<option value="780">Cooler 3</option>
<option value="910">Cooler 4</option>
</select>
<input type="button" onclick="addCooler()" value="+"/>
<input type="button" onclick="delCooler()" value="-"/>
</div>
<div id="resultado"/>
Jquery code:
$numCooler = 0;
$preco = 0;
$(document).ready(function(){
$("#cooler").change(function(){
if (parseInt($(this).val()) != -1){
// armazena o valor do preco selecionado
$preco = parseInt($(this).val());
// compoe o texto que vai ser exibido
var res = "";
res += $(this).find(":selected").text();
res += ": ";
res += "<span id='qtdCooler'>1</span> und";
res += " - R$ ";
res += "<span id='preco'>";
res += $(this).find(":selected").val();
res += "</span>";
// seta o num de cooler pra 1;
$numCooler = 1;
// coloca o resultado na div
$("#resultado").html(res);
} else {
// reseta o num de cooler;
$numCooler = 0;
// reseta o preco do item selecionado
$preco = 0;
// reseta o resultado
$("#resultado").html("");
}
})
})
/**
* Adiciona 1 cooler ao total já existente sem
* limite, isso é configurável.
*/
function addCooler(){
// adiciona 1 ao total selecionado
$numCooler++;
atualizaResultado();
}
/**
* Remove 1 cooler do total ja existente, se
* for menor que 1, reseta o campo inteiro.
*/
function delCooler(){
// reduz 1 do total selecionado
$numCooler--;
// se for menor que um, reseta o componente
if ($numCooler == 0){
$("#resultado").html("");
$("#cooler").val("-1");
}
atualizaResultado();
}
// atualiza o resultado das combinações
function atualizaResultado(){
// atualiza o tanto de coolers
$("#qtdCooler").text($numCooler);
// atualiza o total calculado de coolers
$("#preco").text($numCooler * $preco);
}