0

Olá, tenho uma função que funciona perfeitamente no javascript uso um ajax ao clicar no botão pra enviar meus dados, só que agora ao inves de clicar no botão, quero trocar para quando a pessoa marcar o checkbox, ele deveria executar a função da mesma forma, só que não funciona de jeito nenhum. Se puderem me ajudar agradeço. Tentei fazer assim:

var addProduto = function(){

      //termos é o nome do meu checkbox
      if (document.getElementById('termos').checked) {

           var id_produto = $(this).attr('data-id');

            $.ajax({
               type: 'post',
               url: url_painel +'carrinho/add',
               data: {id:id_produto},
               dataType: "JSON"
            }).then(function(res){

               if (res.erro == 0) {

                 alert ('produto adicionado com sucesso');

               } else{

                 alert(res.msg);

               }

            }, function(){
                alert('Erro');
            });             
            } else{
                alert('Você precisa aceitar os termos e uso de serviços antes de continuar');
            }


    }

Ela funciona com :

$('.btn-add-produto-carrinho').on('click', function(){

Mas com checkbox não. Se puderem me ajudar agradeço.

2 Respostas 2

3

Bom Dia!!

O Javascript fica escutando eventos, ou seja, seu checkbox não está funcionando pq quando você inicia sua página, ele já inicializa esse JS, provavelmente aparecendo a mensagem da condição Else.

Você pode fazer como o Francisco segeriu, adicionando o evento onclick na sua tag input:checkbox, ou usando o addEventListener, como no exemplo abaixo.

let checkboxTermos = document.querySelector("#termos");

checkboxTermos.addEventListener( 'change', function() {
    if(this.checked) {
        console.log("Executa o código quando a Checkbox estiver ticada")
    } else {
        console.log("Executa quando não estiver ticada")
    }
});
<label>Li e concordo com os termpos</label>
<input id="termos" type="checkbox">

3
  • mto obrigado pela ajuda, eu fiz assim como demostrou só que ai ele anula meu ajax, cai direto no erro. E no botão ele envia os dados normais, só que com o checkbox ele anula a função de ajax.
    – Ragnar
    Commented 16/04/2020 às 19:30
  • Como assim? Você só chama este evendo quando clicar no checkbox. Já que você está usando Jquery no seu Ajax, pq não utiliza para fazer a função? $(function() { $('#termos').change(function(e) { e.preventDefault(); $.ajax({ url: "", type: 'post', success: function(result) { }, error: function() { } }); }); }); Commented 16/04/2020 às 19:47
  • fiz uma mudança no ajax e consegui com sua ajuda. Vlw amigo.
    – Ragnar
    Commented 17/04/2020 às 1:04
3

Olá, você poderia adicionar o evento de clique ao campo checkbox para disparar a função com o ajax.

Exemplo:

const checkboxTermos = document.querySelector("#termos");
checkboxTermos.onclick = function() {
  //verifica se o campo checkbox está marcado
  if (this.checked) {
    console.log("true");
  } else {
    console.log("false");
  }
};
<div>
  <input type="checkbox" id="termos">
  <label for="termos">termos</label>
</div>

1
  • Vlw pela ajuda tb amigos.
    – Ragnar
    Commented 17/04/2020 às 1:04

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 .