how to select an option and update the values (price, images ...) that are in the database?

Question

I have a system of computer budgets on the site, with several options, and I want to update the page values when selecting an option without refresh. So I searched I will need to use ajax, but I have no idea how to use it or how to pass the data of the selected option.

Problem Solved:

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);
}

Answer 1

SOLUTION

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);
}

Answer 2

Hello, I came across something similar, I believe that if you adapt the code below will be possible to get the expected result.

Jquery code

     $('#txt_ssd').blur(function(){
 /* Configura a requisição AJAX */
 $.ajax({
 url : 'pagina.php', /* Aqui você irá configurar uma pagina para fazer a consulta no banco e retornar os valores a serem "atualizados" */ 
 type : 'POST', /* Tipo da requisição */ 
 data: 'Valor1=' + $('#txt_ssd').val(), /* dado que será enviado via POST */
 dataType: 'json', /* Tipo de transmissão */
 success: function(data){
 if(data.sucesso == 1){
 $('#Campo1').val(data.Valor1);//Aqui será indicado os campos que irao receber o valor novo
 $('#Campo2').val(data.Valor2);
 }
 }
 }); 
 return false; 
 });

Code page.php

    <?php

include("../../function/conexao.php"); //conect ao banco mysql
$Valor = $_POST['txt_ssd']; //Valor do option enviado via POST

$Dado = mysql_fetch_assoc(mysql_query("Select Campo1, Campo2 from tabela where Condicao = '$Valor'"));


$dados['sucesso'] = (string) 1;
$dados['Valor1']     = (string) $Dado['Campo1']; //Ira enviar o resultado da query para a outra pagina
$dados['Valor2']     = (string) $Dado['Campo2'];
echo json_encode($dados);



?>