Change value <td> dynamically with Javascript

Question

Change value <td> dynamically with Javascript

Asked 5 years, 2 months ago

Viewed 643 times

0

Good afternoon Personal,

I have the following radios in 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>

And I need that every time the user selects one of the options the date value in td below, automatically change.

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

I would like to make this change dynamically using Jquery, because my project was developed in Bootstrap.

Is it a column for date of registration and another for date of claim? Or is it the same column for both dates? Is the source for the date one for the claim and the other for the registration or the same source for both? Can the current date be used or it comes from a Datepicker?

– Augusto Vasques

2019/09/24 at 20:27
Good morning Augusto... - It is a column for each date (registration and sinister)... - I didn’t understand your question about the source, but basically, I would like that as I select the respective radios, td change and search in the field according to the filter I select - As I have a column for each date, and they are already registered, I do not want to use the current date...

– Carlos Souza

2019/09/25 at 13:22
1

I asked about the data source because I didn’t understand if the data is present on the page (input or Datepicker) or if we need to request this data from a server. If a back end request is the case, ask the question the means you use to request the dates.

– Augusto Vasques

2019/09/25 at 15:38

2 answers

Browser other questions tagged javascript html jquery

You are not signed in. Login or sign up in order to post.

by Tony • **2,478** points · Answer 1 · 2019-09-24T20:28:30+00:00

Using HTML and Javascript you can change the content with this command:

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

A Case:

<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>

by JrD • **1,319** points · Answer 2 · 2019-09-24T20:27:22+00:00

This can be done by adding the values into one data attribute and alternate them using the .on("change")

When changing the radio, the change event will be triggered. This event checks the value of data-value of the radio selected and assigned to the element on the screen. To find this element, just add an id for that element and use the Jquery selector to insert the content into it.

$("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>