Get modal element value attribute

Asked

Viewed 147 times

0

Hello,

Watching objeto_receita I get the following data:

inserir a descrição da imagem aqui

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

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

  • how are you making sure that objeto_receita.descricao really contains something, and that function is actually being called? And are sure not to have more than one equal ID on the page?

  • If I look at the console I can see, apart from that, the description field is being populated.

  • And where are you checking HTML? Remember that if there is any page change, the value does not persist.

  • all right, I’m aware, the value is being recovered and displayed in the field, but in the modal, when checking the value manually, I can’t see the value attribute.

  • I wonder how the modal bootstrap gets the arrow the recovered value without filling the data-value.

  • 1

    It would be nice if you could have [Dit] and provide more details, just what you went through is difficult to test, without a proper context. The possibilities are many, and what you have in question is very limited. If you could reduce your code to a [mcve] it would help.

  • Already tried to select the element in the inspector and write to the console: $0.value ?? Maybe you’re confusing the concept of property and attributes.

  • I edited the question and tried to explain it better. I have already selected the element through element.value and it is empty

Show 3 more comments

2 answers

0

0


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

  • Okay, I understood a little bit what you meant.. but if it’s a modal dialog, how to get the value attribute, or insert this attribute into the element ? I’m asking why I’m using a plugin, and the plugin checks this attribute. https://github.com/geminilabs/float-labels.js

  • You’d have to see it in the library documentation, wouldn’t it: floatlabels.rebuild();?

  • I have tried, ok. at least your answer already clarifies on the use of properties and attributes. thank you for the answer

Browser other questions tagged

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