Alexandre Krabbe Alexandre Krabbe - 25 days ago 17
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

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

HTML:

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

<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>
</div>
</form>
</div>
</dialog>


Javascript:

//Do something
$("#numero-ficha").val(value.number);
$("#nome-ficha").val(value.username);
//Do something

Answer

I think this is what you are looking for

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

Fiddle here

Comments