Take a field value by id and put it into a variable

Question

Hello, I have a field on a form that receives the id: "teste", how can I catch via javascript this value and put in a variable??

I found the following on the internet

var str = document.getElementById("teste").value;

But it brings me value undefined, there is some other way?

My form:

<div class="divFormulario">
            @(Html.DevExtreme().Form<FormaPagamentoViewModel>
    ()
    .ID("formularioCadastro")
    .ShowValidationSummary(false)
    .Items(items =>
    {
    items.AddGroup()
    .Items(groupItems =>
    {
       groupItems.AddSimpleFor(m => m.Fpg_quantidade)
      .Editor(e => e.NumberBox().ID("teste").Width("70px").OnKeyPress("key_press").OnEnterKey("enter")); 
    })
    .FormData(Model)
    )

</div>

<script>
 function enter() {
     str = document.getElementById("teste").value;
  }
</script>

Inspected page:

Answer 1

You can try something like this:

HTML:

<form method="get">
    <input type="text" id="inputId" />
    <input type="submit" id="submitId" value="Enviar" />
</form>

Javascript:

// Função que mostra o valor do input num alert
function mostrarValor() {
    alert(document.getElementById("inputId").value);
}

// Evento que é executado toda vez que uma tecla for pressionada no input
document.getElementById("inputId").onkeypress = function(e) {
    if (e.keyCode == 13) {
        mostrarValor();
        e.preventDefault();
    }
}

// Evento que é executado ao clicar no botão de enviar
document.getElementById("submitId").onclick = function(e) {
    mostrarValor();
    e.preventDefault();
}

Answer 2

You are using DevExtreme, I’ve been doing some research and you’d better use it onValueChanged instead of onEnterKey, because whenever the value is changed the function is executed

https://js.devexpress.com/Documentation/ApiReference/UI_Widgets/dxAutocomplete/Configuration/#onValueChanged

Just you do:

<div class="divFormulario">
            @(Html.DevExtreme().Form<FormaPagamentoViewModel>
    ()
    .ID("formularioCadastro")
    .ShowValidationSummary(false)
    .Items(items =>
    {
    items.AddGroup()
    .Items(groupItems =>
    {
       groupItems.AddSimpleFor(m => m.Fpg_quantidade)
      .Editor(e => e.NumberBox().ID("teste").Width("70px").OnKeyPress("key_press").onValueChanged("enter")); 
    })
    .FormData(Model)
    )

</div>

<script>
 function enter(e) { //Tem que passar e como parâmetro 
     str = e.value; //Aqui pega o valor que foi digitado
  }
</script>

Answer 3

The problem is you’re trying to get the value of a div.

Divs has no values, only input, textarea and other elements that receive user input.

If you want to recover internal HTML from div, use

document.getElementById("teste").innerHTML;

Or if you want to recover only the text, without the possible tag declarations, use

document.getElementById("teste").innerText;

Answer 4

You must assign the ID you want to pick up in some html string.

For example:

<p id="teste">Algum texto de exemplo</p>