1

Tenho o seguinte formulário para registar as tarefas. Registo as tarefas separadamente.

Código:

<div class="form-group">
<div>
<label for="Indicar">Comeu Bem: </label>
<label for="Notas"> Sim</label>
<input type="checkbox" name="Notas" id="Notas11" Value="Sim" required />
<label for="check1"> Não</label>
<input type="checkbox" name="Notas" id="Notas12" Value="Não" required />
</div>
<input type="hidden" id="tarefa18" name="tarefa" value="30">
<button class="btn btn-info btn-sm botao" onclick="inserir_registo18();if(confirm('Pretende registar esta atividade?')) this.disabled=true;">Pequeno Almoço</button><button type="button" name="abrir18"><span class="glyphicon glyphicon-comment"></span></button>
<div class="form-group" id="comentario18" style="display:none">
<textarea id="Observacao18" name="Observacao" style="color: black;"></textarea>
</div>
</div>
</div>

Ajax para inserir:

function inserir_registo18()
{

    var dadosajax = {
        'tarefa' : $("#tarefa18").val(),
        'Notas' : $("#Notas11").val(),
        'Notas' : $("#Notas12").val(),
        'Observacao' : $("#Observacao18").val()
    };
    $.ajax({
        url: './insertarefa1',
        type: 'POST',
        cache: false,
        data: dadosajax,
        error: function(){

        },
        success: function(result)
        { 
        }
    });
}

Pretendo que sempre que executa esta ação onclick="inserir_registo18();if(confirm('Pretende registar esta atividade?')) this.disabled=true;" do botão para registar, que verifique se uma das checkboxes está preenchida, caso não esteja preenchida, não execute a ação e obrigue a preencher uma das checkboxes.

Estava a tentar:

function inserir_registo18()
    {
        var checado = $("#Notas11").is(':checked')
        var checado1 = $("#Notas12").is(':checked')
        if(checado == true || checado1 == true){
        var dadosajax = {
            'tarefa' : $("#tarefa18").val(),
            'Notas' : $("#Notas11").val(),
            'Notas' : $("#Notas12").val(),
            'Observacao' : $("#Observacao18").val()
        };
        $.ajax({
            url: './insertarefa1',
            type: 'POST',
            cache: false,
            data: dadosajax,
            error: function(){

            },
            success: function(result)
            { 
            }
        });
       }
    }

Edição de pergunta:

Exemplo:

<div class="form-group">
<div>
<label for="Indicar">Comeu Bem: </label>
<label for="Notas"> Sim</label>
<input type="checkbox" name="Notas" id="Notas11" Value="Sim" required />
<label for="check1"> Não</label>
<input type="checkbox" name="Notas" id="Notas12" Value="Não" required />
</div>
<input type="hidden" id="tarefa18" name="tarefa" value="30">
<button class="btn btn-info btn-sm botao" onclick="inserir_registo18();if(confirm('Pretende registar esta atividade?')) this.disabled=true;">Pequeno Almoço</button><button type="button" name="abrir18"><span class="glyphicon glyphicon-comment"></span></button>
<div class="form-group" id="comentario18" style="display:none">
<textarea id="Observacao18" name="Observacao" style="color: black;"></textarea>
</div>
</div>

<div class="form-group">
<div>
<label for="Indicar">Comeu Bem: </label>
<label for="Notas"> Sim</label>
<input type="checkbox" name="Notas" id="Notas" Value="Sim" required />
<label for="check1"> Não</label>
<input type="checkbox" name="Notas" id="Notas1" Value="Não" required />
</div>
<input type="hidden" id="tarefa19" name="tarefa" value="31">
<button class="btn btn-info btn-sm botao" onclick="inserir_registo19();if(confirm('Pretende registar esta atividade?')) this.disabled=true;">Almoço</button><button type="button" name="abrir19"><span class="glyphicon glyphicon-comment"></span></button>
<div class="form-group" id="comentario19" style="display:none">
<textarea id="Observacao19" name="Observacao" style="color: black;"></textarea>
</div>
</div>

<div class="form-group">
<div>
<label for="Indicar">Comeu Bem: </label>
<label for="Notas"> Sim</label>
<input type="checkbox" name="Notas" id="Notas2" Value="Sim" required />
<label for="check1"> Não</label>
<input type="checkbox" name="Notas" id="Notas3" Value="Não" required />
</div>
<input type="hidden" id="tarefa20" name="tarefa" value="32">
<button class="btn btn-info btn-sm botao" onclick="inserir_registo20();if(confirm('Pretende registar esta atividade?')) this.disabled=true;">Lanche</button><button type="button" name="abrir20"><span class="glyphicon glyphicon-comment"></span></button>
<div class="form-group" id="comentario20" style="display:none">
<textarea id="Observacao20" name="Observacao" style="color: black;"></textarea>
</div>
</div>

javascript:

function inserir_registo18()
{
    var checado = $("#Notas11").is(':checked')
    var checado1 = $("#Notas12").is(':checked')
    var nome = $("#IniciarTarefa").val();

    if(nome == ""){
        alert("Tem de Iniciar a tarefa!");
   }else{   
    if(checado == true || checado1 == true){
    var dadosajax = {
        'codigo' : $("#codigo").val(),
        'IniciarTarefa' : $("#IniciarTarefa").val(),
        'Colaborador' : $("#Colaborador").val(),
        'tarefa' : $("#tarefa18").val(),
        'Notas11' : $("#Notas11").is(":checked") ? $("#Notas11").val() : '',
        'Notas12' : $("#Notas12").is(":checked") ? $("#Notas12").val() : '',
        'check' : $("#check").is(":checked") ? $("#check").val() : '',
        'Acompnhante' : $("#Acompnhante").val(),
        'Observacao' : $("#Observacao18").val()
    };  
    $.ajax({
        url: './insertarefa4',
        type: 'POST',
        cache: false,
        data: dadosajax,
        error: function(){

        },
        success: function(result)
        { 
        $('#check').prop('checked', false).val("Sim");
        $("#Acompnhante").val("").hide();
        }
    });
}else {
      alert('Selecione um campo');
    }

}
}
function inserir_registo19()
{
    var checado = $("#Notas").is(':checked')
    var checado1 = $("#Notas1").is(':checked')
    var nome = $("#IniciarTarefa").val();

    if(nome == ""){
        alert("Tem de Iniciar a tarefa!");
   }else{   
    if(checado == true || checado1 == true){
    var dadosajax = {
        'codigo' : $("#codigo").val(),
        'IniciarTarefa' : $("#IniciarTarefa").val(),
        'Colaborador' : $("#Colaborador").val(),
        'tarefa' : $("#tarefa19").val(),
        'Notas' : $("#Notas").is(":checked") ? $("#Notas").val() : '',
        'Notas1' : $("#Notas1").is(":checked") ? $("#Notas1").val() : '',
        'check' : $("#check").is(":checked") ? $("#check").val() : '',
        'Acompnhante' : $("#Acompnhante").val(),
        'Observacao' : $("#Observacao19").val()
    };
    $.ajax({
        url: './insertarefa5',
        type: 'POST',
        cache: false,
        data: dadosajax,
        error: function(){

        },
        success: function(result)
        { 
        $('#check').prop('checked', false).val("Sim");
        $("#Acompnhante").val("").hide();
        }
    });
    }else {
      alert('Selecione um campo');
    }
}
}
function inserir_registo20()
{ 
    var checado = $("#Notas2").is(':checked')
    var checado1 = $("#Notas3").is(':checked')
    var nome = $("#IniciarTarefa").val();

    if(nome == ""){
        alert("Tem de Iniciar a tarefa!");
   }else{   
    if(checado == true || checado1 == true){
    var dadosajax = {
        'codigo' : $("#codigo").val(),
        'IniciarTarefa' : $("#IniciarTarefa").val(),
        'Colaborador' : $("#Colaborador").val(),
        'tarefa' : $("#tarefa20").val(),
        'Notas2' : $("#Notas2").is(":checked") ? $("#Notas2").val() : '',
        'Notas3' : $("#Notas3").is(":checked") ? $("#Notas3").val() : '',
        'check' : $("#check").is(":checked") ? $("#check").val() : '',
        'Acompnhante' : $("#Acompnhante").val(),
        'Observacao' : $("#Observacao20").val()
    };
    $.ajax({
        url: './insertarefa6',
        type: 'POST',
        cache: false,
        data: dadosajax,
        error: function(){

        },
        success: function(result)
        { 
        $('#check').prop('checked', false).val("Sim");
        $("#Acompnhante").val("").hide();
        }
    });
    }else {
      alert('Selecione um campo');
    }
}
} 
6
  • Qual o erro que está dando amigo? 3/06/2019 às 11:56
  • Está tentando com um id que não existe... 3/06/2019 às 11:58
  • @Maycon F. Castro, não está a dar erro, e não regista na base de dados, mas o utilizador fica com a ideia que fez o registo na base de dados, e não devia finalizar o processo de bloqueio do botão até a checkbox estar preenchida
    – Bruno
    3/06/2019 às 12:01
  • @Darlei Fernando Zillmer já alterei os ids, assim não regista, mas pretendia que ao clicar no botão para inserir, se verificasse que nenhuma das checkboxes não estivesse preenchida, mostrasse um alerta para preencher e só depois de preencher terminasse a ação do botão inserir
    – Bruno
    3/06/2019 às 12:03

2 Respostas 2

1

Tente a seguinte maneira:

function inserir_registo18() {
  var dadosajax = {
    'tarefa': $("#tarefa18").val(),
    'Notas': $("#Notas11").val(),
    'Notas': $("#Notas12").val(),
    'Observacao': $("#Observacao18").val()
  };
  $.ajax({
    url: './insertarefa1',
    type: 'POST',
    cache: false,
    data: dadosajax,
    error: function() {

    },
    success: function(result) {}
  });
}
$(document).on('click', '.botao', function(e) {
  e.preventDefault();
  if (confirm('Pretende registar esta atividade?')) {
    if ($("#Notas11").is(':checked') || $("#Notas12").is(':checked')) {
      alert('Inserindo');
      inserir_registo18();
    } else {
      alert('Selecione um campo');
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="form-group">
  <div>
    <label for="Indicar">Comeu Bem: </label>
    <label for="Notas"> Sim</label>
    <input type="checkbox" name="Notas" id="Notas11" Value="Sim" required />
    <label for="check1"> Não</label>
    <input type="checkbox" name="Notas" id="Notas12" Value="Não" required />
  </div>
  <input type="hidden" id="tarefa18" name="tarefa" value="30">
  <button class="btn btn-info btn-sm botao">Pequeno Almoço</button><button type="button" name="abrir18"><span class="glyphicon glyphicon-comment"></span></button>
  <div class="form-group" id="comentario18" style="display:none">
    <textarea id="Observacao18" name="Observacao" style="color: black;"></textarea>
  </div>
</div>
</div>

0
1

Olhando seu código percebi algumas coisas:

<input type="checkbox" name="Notas" id="Notas11" Value="Sim" required/>
<input type="checkbox" name="Notas" id="Notas12" Value="Não" required/>

Esses input tem o mesmo name="Notas" e eles são do type="checkbox".

  • Se apenas um desses inputs pode ser selecionado por vez o melhor tipo para eles seria o type="radio"
  • Se os dois podem ser marcados ao mesmo tempo você mantem o type="checkbox", porem o ideal é você não colocar o name="Notas" igual para os dois

Agora olhe essas keys em seu objeto:

var dadosajax = {
    'tarefa' : $("#tarefa18").val(),

/// ; ↓ 
    'Notas' : $("#Notas11").val(), 
    'Notas' : $("#Notas12").val(),
/// ; ↑ Essa aqui esta sobrescrevendo a primeira

    'Observacao' : $("#Observacao18").val()
};

Como as duas entradas tem a mesma key(Notas), a ultima sera mantida, veja o exemplo abaixo:

let obj = {
    'Notas': 11111,
    'Notas': 22222,
};
console.log( obj );


Corrigindo e fazendo a checagem

Primeiro passo vou alterar seus input para o type='radio', pois como eles representam Sim e Não acredito que você queira que o usuário escolha entre um ou o outro. Outro problema nesses input é que a label deles não esta com atributo for correto, esse atributo deve indicar o id do elemento alvo. Veja abaixo como ficou após a alteração:

<label for="Notas11"> Sim</label>
<input type="radio" name="Notas" id="Notas11" Value="Sim" required/>

<label for="Notas12"> Não</label>
<input type="radio" name="Notas" id="Notas12" Value="Não" required/>

Segundo passo vamos fazer a checagem.
Como você já esta usando o jQuery e o seu input agora é um input[type='radio'], ou seja, somente 1 pode esta checked, sua checagem pode utilizar o selector :checked e ficar +/- assim:

let elementoChecked = $('input[name="Notas"]:checked');
/// ; Busca:               ↑     ↑              ↑
/// ; Elemento com a tag `input` |              |
/// ; Com o attributo `name` igual a `Notas`    |
/// ;                             Que esteja marcado (checked)

if( elementoChecked.length == 0 )
{
    /// ; Se entrar aqui nenhum elemento esta marcado (checked)
}

Terceiro passo, vou retirar esse codigo if(confirm('Pretende registar esta atividade?')) this.disabled=true; do onclick e colocar ele dentro da sua função inserir_registo18 e no onclick vou fazer a chamada para a função inserir_registo18 passando como parâmetro this que naquele momento é o próprio botão, o botão vai ficar assim

<button class="btn btn-info btn-sm botao" onclick="inserir_registo18(this);">Pequeno Almoço</button>

Quarto passo, como você agora você já sabe que elemento esta checked, basta pegar o .val() deste elemento para colocar em seu objeto dadosajax e como sua função agora recebe como parâmetro o button que foi clicado você pode desativar ele dentro dela, seu código deve ficar +/- assim:

function inserir_registo18( botao )
{
    let elementoChecked = $('input[name="Notas"]:checked');
    /// ; Busca:               ↑     ↑              ↑
    /// ; Elemento com a tag `input` |              |
    /// ; Com o attributo `name` igual a `Notas`    |
    /// ;                             Que esteja marcado (checked)

    if( elementoChecked.length == 0 )
    {
        /// ; Se entrar aqui nenhum elemento esta marcado (checked)
        alert('Você precisa escolher um valor');
        return false;
    }

    var dadosajax = {
        'tarefa' : $("#tarefa18").val(),
        'Notas' : elementoChecked.val(),
        'Observacao' : $("#Observacao18").val()
    };

    console.log('dadosajax:' , dadosajax);
 

    /// ; Desativar botão
    if(confirm('Pretende registar esta atividade?'))
        botao.disabled=true; 


    $.ajax({
        url: './insertarefa1',
        type: 'POST',
        cache: false,
        data: dadosajax,
        error: function(){

        },
        success: function(result)
        { 
        }
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
    <div>
        <label for="Indicar">Comeu Bem: </label>
        <label for="Notas11"> Sim</label>
        <input type="radio" name="Notas" id="Notas11" Value="Sim" required />
        <label for="Notas12"> Não</label>
        <input type="radio" name="Notas" id="Notas12" Value="Não" required />
    </div>
    
    <input type="hidden" id="tarefa18" name="tarefa" value="30">
    <button class="btn btn-info btn-sm botao" onclick="inserir_registo18(this);">Pequeno Almoço</button>
    <button type="button" name="abrir18"><span class="glyphicon glyphicon-comment"></span></button>
    <div class="form-group" id="comentario18" style="display:none">
        <textarea id="Observacao18" name="Observacao" style="color: black;"></textarea>
    </div>
</div>

Referencias: label, jQuery :checked Selector

3
  • mas existe um problema, tenho várias tarefas que tenho de colocar a confirmação de sim e não, <input type="checkbox" name="Notas" id="Notas11" Value="Sim" required/>, se usar radio não posso usar o mesmo nome em cada uma delas e tenho de criar várias colunas na base de dados e pretendo que registe sempre na mesma coluna. Por esse motivo não posso usar radio e o checkbox desta forma permite-me fazer o registo sempre na mesma coluna.
    – Bruno
    7/06/2019 às 8:25
  • @bruno, Acho que vale apena você editar a pegunta e: Colocar mais dessas confirmações , Se possível explicar como você esta gerando esse HTML com essas confirmações. Ex: Se elas são geradas por programação com uma certa linguagem (PHP,JavaScript,...), colocar o código que esta gerando. 7/06/2019 às 14:19
  • editei a pergunta com o código de três exemplos tudo na mesma página.
    – Bruno
    12/06/2019 às 17:28

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 .