As I said, it is recommended that you separate the parts, let php act on the server, and then do the remainder from what you receive.
<form id="compra" method="POST">
<select name="produtos" class="produtos" id="produtos">
<option value="1">Item 1 (10$)</option>
<option value="2">Item 2 (50$)</option>
</select>
x <input type="number" min="1" value="1" name="quantidade" id="quantidade">
<select name="pagamento" class="modo-pagamento" id="modo_pagamento">
<option value="1">Deposito bancario (5% desconto)</option>
<option value="2">Pag Seguro</option>
</select>
</form>
<div id="visualiza">
<span class="desconto"></span>
<span class="valor-total"></span>
</div>
Delineate the two tags span
:
<style type="text/css">
#visualiza > span { display: block; }
</style>
Ajax request:
<script type="text/javascript">
$(document).ready(function() {
$('#compra').on('change', function(){
var modo = $('#modo_pagamento').val();
var produto = $('#produtos').val();
var quantidade = $('#quantidade').val();
var desconto, total;
//var dados = $(this).serializeArray();
$.ajax({
url: 'get.php',
method: 'POST',
dataType: 'json',
data: {produto: produto, quantidade: quantidade, desconto: modo},
success: function(data){
total = 'Total: ' + data.total +'$';
desconto = 'Descontos: (' + data.perc_desconto + '%) pelo '+ data.resp_desconto;
$('.valor-total').html(total);
$('.desconto').html(desconto);
},
error: function(i){ alert('erro'); }
});
});
});
</script>
Lastly, the php script to operate on the server side, and returns the values according to the data passed to it, to be later organized without requiring php .
header("Content-Type: application/json; charset=utf-8;");
# produtos existentes
$produtos = array(
1=> array('nome'=>'item1', 'preco'=>10),
2=> array('nome'=>'item2', 'preco'=>50)
);
# descontos existentes
$descontos = array(
1=> array('nome'=>'Deposito bancario', 'perc'=>5),
2=> array('nome'=>'Pag Seguro', 'perc'=>0)
);
# requisiçoes
$produto = isset($_POST['produto']) ? $_POST['produto'] : false;
$quantidade = isset($_POST['quantidade']) ? $_POST['quantidade'] : false;
$c_desconto = isset($_POST['desconto']) ? $_POST['desconto'] : false;
# reset dos valores
$nome = $r_desconto = "";
$total = $preco = $p_desconto = 0;
if($produto):
$nome = $produtos[$produto]['nome'];
$preco = $produtos[$produto]['preco'];
$total = $preco * $quantidade;
if($c_desconto):
$p_desconto = $descontos[$c_desconto]['perc'];
$r_desconto = $descontos[$c_desconto]['nome'];
$total = $total - ($total * $p_desconto/100);
endif;
endif;
# organizar a saida
$retorno = array(
'total'=>$total,
'produto'=>$nome,
'preco'=>$preco,
'quantidade'=>$quantidade,
'perc_desconto'=>$p_desconto,
'resp_desconto'=>$r_desconto
);
/*
print $nome . " (".$preco."$) " . " x " . $quantidade;
print "<br/>";
print "total: " . $total;
print "<br/>";
print "descontos: " . $p_desconto . "% pelo " . $r_desconto;
*/
# saida json:
print json_encode($retorno);