Get modal element value attribute

Question

Hello,

Watching objeto_receita I get the following data:

After receiving this data, I assign its value to the respective fields.

Basically using the function below:

function objeto_form() {
    $('#txt-descricao').val(objeto_receita.descricao);
}

As for that, all right, I can fill out the form normally.

But when checking in html, I realize that the value of the element is empty.

So how can I get the value of the element?

I know this way, I can $('#sel-conta').val();

But because this element is empty when viewed in html ?

Using the function below, shows me an empty value.

function(elem){
    var value = elem.value;
    var id    = elem.id;
}

Answer 1

The jquery .val('value') does not update the DOM, if you really want to update it use the jquery .attr.

Example:

$('#txt-descricao').val('novo valor');    
//after jQuery 1.5.2
$('#txt-descricao').attr('value', 'novo valor');

Read this topic exactly on this issue (English): https://www.willis-owen.co.uk/jquery-changing-form-values-not-affecting-the-dom/

I hope I’ve helped!

Answer 2

Attributes and properties are separate things, when you inspect the HTML you are seeing the attributes of the elements, when you are working with one HMLTInputElement in your javascript you are seeing its properties.

The browser will read your HTML, recognize your attributes and assemble the objects with their properties based on these attributes. There is no need for you to mirror every change in properties in their related attributes. Just use javascript and inspect your values per console.

You can access HTML attributes through the method HTMLElement.getAttribute() and properties are accessed directly from the javascript object. Ex:

console.log(element.value)

To illustrate the concept, below is an example where the initial state is printed, the property is changed and then the attribute is changed. You will see that one does not reflect on the other.

let input = document.getElementById('teste')

console.log("-- Estado inicial")
console.log("Propriedade:", input.value)
console.log("Atributo:", input.getAttribute('value'))

console.log("-- Alterada a propriedade 'value'")
input.value = "valor da propriedade"
console.log("Propriedade:", input.value)
console.log("Atributo:", input.getAttribute('value'))

console.log("-- Alterado o atributo 'value'")
input.setAttribute('value', 'Novo valor do atributo')
console.log("Propriedade:", input.value)
console.log("Atributo:", input.getAttribute('value'))

<input id="teste" value="valor do atributo" />