Estou ajustando um sistema de venda de fotos, para adicionar as fotos no carrinho por JS. O script funciona 100%, somente com PHP, mas quero fazer sem sair da página, usando JS.
Tenho a seguinte situação:
Cada foto, tem 3 opções de tamanho: P, M, G. Com JS, ele sempre adiciona a primeira opção, não pega o value="< ?php echo $preco_digital['id']; ? >" do tamanho/form/botão seguinte.
Como faço para o JS ir para o registro seguinte, quando clico no botão específico?
Formulário (1 para cada tamanho):
<form style="padding: 0" method="POST" id="add-carrinho" action="carrinho-add.php">
<input type="hidden" name="id_foto" id="id_foto" value="<?php echo $r['id']; ?>" />
<input type="hidden" name="id_evento" id="id_evento" value="<?php echo $r['id_evento']; ?>" />
<input type="hidden" name="id_preco" id="id_preco" value="<?php echo $preco_digital['id']; ?>" />
<input type="hidden" name="id_promo" id="id_promo" value="<?php echo $promocao['id']; ?>" />
<button id="add-carrinho" class="compra-foto" type="submit" role="button">
<span><?php echo $preco_credito; ?> Créditos</span>
<div class="icon">
<i class="fa fa-shopping-cart"></i>
<i class="fa fa-check"></i>
</div>
</button>
</form>
Javascript:
$(function(){
// Executa assim que o botão de salvar for clicado
$('.compra-foto').click(function(e){
// Cancela o envio do formulário
e.preventDefault();
// Pega os valores dos inputs e coloca nas variáveis
var id_foto = $('#id_foto').val();
var id_evento = $('#id_evento').val();
var id_preco = $('#id_preco').val();
var id_promo = $('#id_promo').val();
// Método post do Jquery
$.post('carrinho-add.php', {
id_foto:id_foto,
id_evento:id_evento,
id_preco:id_preco,
id_promo:id_promo
}, function(resposta){
// Valida a resposta
if(resposta == 1){
// Limpa os inputs
$('input, textarea').val('');
}
});
});
});