0

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

    });
}); 

1 Resposta 1

0

Vinicius, quando você clica em qualquer um dos botões de enviar, o jquery pega os dados do primeiro formulário, você não está dizendo pra ele os inputs de qual formulário você quer que ele pegue. você pode resolver isso fazendo isso.

Faça as seguintes alterações:

Mude o type de "Submit" para "Button" em seus botões de todos os formulários

ficando assim

<button id="add-carrinho" class="compra-foto" type="button" role="button">

E seu javascript atualize para ficar assim.

$(function(){
    // Executa assim que o botão de salvar for clicado
    $('.compra-foto').click(function(){

        // Pega os valores dos inputs e coloca nas variáveis
    var id_foto = $(this).closest("form").find("input[name='id_foto']").val();
    var id_evento = $(this).closest("form").find("input[name='id_evento']").val();
    var id_preco = $(this).closest("form").find("input[name='id_preco']").val();
    var id_promo = $(this).closest("form").find("input[name='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('');
            }
        });

    });
}); 

Espero ter ajudado. Se funcionar por favor, marque ao lado a resposta como correta, ficaria grato :)

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .