0

Boa tarde Pessoal,

Tenho os seguintes radios em HTML

<input class="form-check-input" type="radio" name="filtro_por" id="filtro_por" value="sinistro_datacadastro" >
<label class="form-check-label" >Data de Cadastro</label>

<input class="form-check-input" type="radio" name="filtro_por" id="filtro_por" value="sinistro_datasinistro" checked>
<label class="form-check-label">Data de Sinistro</label>

E preciso que toda vez que o usuário selecionar uma das opções o valor data existente na td abaixo, altere automaticamente.

<td>{{ obj.sinistro_data }}</td>

Gostaria de realizar essa alteração dinamicamente utilizando Jquery, pois meu projeto foi desenvolvido em Bootstrap.

3
  • É uma coluna para data do cadastro e outra para data do sinistro? Ou é a mesma coluna para as duas datas? A fonte para data é uma para sinistro e outra para cadastro ou a mesma fonte para as duas? Poder ser usada a data atual ou ela vem dum Datepicker? Commented 24/09/2019 às 20:27
  • Bom dia Augusto... - É uma coluna par cada data (cadastro e sinistro)... - Não entendi sua pergunta sobre a fonte, mas basicamente, gostaria que conforme eu selecione o respectivo radios, a td alterne e busque no campo de acordo com o filtro que eu selecionar - Como eu tenho uma coluna para cada data, e as mesmas já estão cadastradas, não quero utilizar a data atual... Commented 25/09/2019 às 13:22
  • 1
    Perguntei sobre a fonte do dado porque não entendi se o dado está presente na página(input ou Datepicker) ou se se precisa fazer a solicitação desse dado a um servidor. Se for o caso de uma solicitação ao back end coloque na pergunta o meio que usa para requerer as datas. Commented 25/09/2019 às 15:38

2 Respostas 2

1

Usando HTML e JavaScript você pode alterar o conteúdo com este comando:

document.getElementById("nomedoelemento").innerHTML = "novo valor aqui";

Um Exemplo:

<html>
<body>    
<table>
    <tr>
        <td>Sinistro: <span id="sinistro_data"></span></td>
    </tr>
</table>    
<input type="button" onclick="mudaHTML()" value="Muda HTML" />
<script>    
function mudaHTML(){
    document.getElementById("sinistro_data").innerHTML = "novo valor aqui" + Date.now();
}
</script>
</body>
</html>
0

Isso pode ser feito adicionando os valores em um data attribute e alternar eles usando o .on("change")

Ao alterar o radio, será disparado o evento change. Nesse evento é verificado qual o valor de data-value do radio selecionado e atribuído ao elemento na tela. Para encontrar esse elemento, basta adicionar um id para esse elemento e usar o seletor do JQuery para inserir o conteúdo no mesmo.

$("input[name='filtro_por']").on("change", function(){
    $("#destino").html($("input[name='filtro_por']:checked").data("value"));
});
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

<input class="form-check-input" type="radio" name="filtro_por" value="sinistro_datacadastro" data-value="24/09/2019" >
<label class="form-check-label" >Data de Cadastro</label>

<input class="form-check-input" type="radio" name="filtro_por" value="sinistro_datasinistro"  data-value="23/09/2019" checked>
<label class="form-check-label">Data de Sinistro</label>
<br>
<table>
    <tr>
         <td id="destino"></td>
    </tr>
</table>

3
  • Boa tarde JrD, realizei a alteração, porém a coluna td, retorna vazia, quando alterno entre as opções... O filtro, funciona, porém a coluna retorna sem valor, como se ele não estivesse alterado o da td para chamar a respectiva tabela do banco. Commented 24/09/2019 às 20:57
  • @CarlosSouza A ideia é trazer as datas prontas do backend e inseri-las no data-value dos inputs, para que assim seja possível alterná-las
    – JrD
    Commented 24/09/2019 às 21:04
  • Na verdade, a ideia é alternar a td, de modo que dinamicamente ela busque no banco colunas diferentes de uma mesma tabela Commented 25/09/2019 às 13:18

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 .