Topic: Error creating a form-outline dynamically
Francesc Pujades free asked 2 months ago
Hi, can you help me fix an error? I get an error when dynamically creating a form-outline. The error is this: bootstrapMDB.js:20 Uncaught TypeError: Cannot read properties of null (reading 'classList') at Object.addClass (bootstrapMDB.js:20:6271) at Xo._showPlaceholder (bootstrapMDB.js:20:94736) at Xo._getLabelData (bootstrapMDB.js:20:93699) at Xo.init (bootstrapMDB.js:20:93155) at new Xo (bootstrapMDB.js:20:92899) at Xo.getOrCreateInstance (bootstrapMDB.js:20:92224) at HTMLButtonElement. (FactVerificar2.aspx:579:23) at HTMLButtonElement.dispatch (jquery-3.7.1.min.js:2:40035) at v.handle (jquery-3.7.1.min.js:2:38006)
And the code:
$('#btnGenerarDiv').click(function () {
event.preventDefault(); // Evita la recarga de la página
// Generar el HTML dinámico para el nuevo form-outline
var divHTML =
<div class="form-outline mb-4 data-mdb-input-init">
<input type="text" id="form${inputCount}" class="form-control" />
<label class="form-label" for="form${inputCount}">Nuevo Input ${inputCount}</label>
</div>
;
// Agregar el nuevo form-outline al contenedor
$('#contenedorInputs').append(divHTML);
// Inicializar el nuevo input con MDBootstrap para asegurar el comportamiento de la etiqueta flotante
mdb.Input.getOrCreateInstance(document.getElementById('form' + inputCount));
// Incrementar el contador para generar IDs únicos
inputCount++;
Kamila Pieńkowska staff answered 2 months ago
I've prepared a working example for you.
https://mdbootstrap.com/snippets/standard/kpienkowska/6243760
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 7.3.2
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No