How to put id value contained in input elsewhere on the javascript page?

Asked

Viewed 152 times

1

I wonder how I can take a data contained in an id inside an input and put elsewhere in the page with help of javascript as follows in the example below:

HTML:

<!-- Dado ID -->
<input name='dt_situacao' id='dt_situacao' type='hidden'>

<!-- Dado ID A Ser Inserido-->
<table class="table table-responsive" border="0">
<tr>
<th>Situação inicial:</th>
<td>id_situacao</td>
</tr>
</table>

javascript jquery

  • You can do that on the server... that’s an option?

  • @Sergio, he’s learning, go slow.

  • @Augustovasques accurate, so it’s good to learn things the right way from the beginning :)

  • In fact. I researched the term here. Rsrsrsrs

2 answers

1


If I understand this: To get an id value you use document.getElementById, example of use:

var caixa = document.getElementById("divcaixa");
   caixa.style.display = "none";

To get value from an input do the following:

 var teste = document.getElementeById("dt_situação").value;
    var x = document.getElementById("id do lugar que quer colorcar");
    x.innerHTML = teste;

I didn’t test, but I think it’s right, if I’m wrong it’s some syntax, but the logic and the commands are right.

  • 1

    Thank you very much. It was exactly this logic "x.innerHTML = test;" that was behind.

1

You can use the querySelector function to locate the elements in the DOM and the innerText/innerHTML function to update the contents of an element.

From what I understand, your problem would be solved as follows:

var input = document.querySelector('#dt_situacao') //Localizando o input no DOM
var td_situacao = document.querySelector('td') //Recomendo você atribuir um ID ou uma classe nesse elemento para não precisar fazer uma busca pelo nome da TAG.

// Adicionando evento para quando for digitado algo no input, atualizar o TD.
input.addEventListener('keypress', function($event){
    td_situacao.innerText = $event.target.value
})

You can also shorten the function using ES6. Follow the example:

input.addEventListener('keypress', ({target: {value}}) => td_situacao.innerText = value)

Browser other questions tagged javascript jquery

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