Alexandre Krabbe Alexandre Krabbe - 1 year ago 169
jQuery Question

Changing MDL Text Field text dynamically with JQuery

I'm trying to change a MDL Text Field text using JQuery. However, there are some problems occurring, firstly the label is not animating UP and for basic Text Fields the placeholder text is not going away. Secondly, if a text field is marked as

, after setting it's value via JQuery the field remains red like nothing was placed in there. JSFiddle


<dialog id="adicionar-editar-campista" class="mdl-dialog" style="text-align: center">
<div class="mdl-dialog__content">
<h4>Ficha de Cadastro</h4>
<p style="color: red">Campos em vermelho são obrigatórios.</p>

<form action="#">
<div id="cadastro-numero-ficha" class="mdl-textfield mdl-js-textfield">
<input id="numero-ficha" class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?">
<label class="mdl-textfield__label" for="numero-ficha">N&#186; Ficha</label>
<span class="mdl-textfield__error">Apenas numeros!</span>

<div id="cadastro-nome-ficha" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input id="nome-ficha" class="mdl-textfield__input" type="text" required>
<label class="mdl-textfield__label" for="nome-ficha">Nome Completo</label>


//Do something
//Do something

Answer Source

I think this is what you are looking for

$('#nome-ficha')[0].parentElement.MaterialTextfield.change("some text");

Fiddle here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download