Alexandre Krabbe Alexandre Krabbe - 2 months ago 39
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


I think this is what you are looking for

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

Fiddle here