Tengo un formulario enorme que oculta o muestra elementos dinámicamente, según la entrada. Para esto, estoy usando muchos eventos onChange. El formulario puede enviarse y cargarse mediante un servidor PHP. El formulario en sí usa Javascript y JQuery. Cuando se carga el formulario, los eventos onChange no se activan automáticamente, así que intenté hacerlo manualmente con el siguiente código:
//Fires the event manually echo 'var element = document.getElementsByName("'.$FieldName.'");'; echo 'event = new Event("change");'; echo 'element.dispatchEvent(event);';La consola me dice que "element.dispatchEvent no es una función". Investigué un poco y traté de poner
<script src="DynamicForm.js" type="text/javascript"> <!--Contains the JQuery code--> </script> <script>$.noConflict(true);</script> <script> <!--Code that fires the event manually here--> </script>Eso todavía me dio el error "element.dispatchEvent no es una función". A pesar de eso, tendría que cambiar todo el código de JQuery, lo que probablemente me dará algunos errores nuevos, por lo que no necesariamente quiero hacer eso. ¿Hay alguna forma (más eficiente) de resolver mi problema? Agradezco cualquier ayuda.
El error que está recibiendo se debe a que el código document.getElementsByName no ha encontrado el "elemento" en su código. El uso de .getElementsByName se depreció hace muchos años. También devolverá una matriz de objetos si coincide con varios nombres.
En su lugar, debe usar getElementById() si desea usar javascript puro, o puede lograr lo que desea hacer en una sola línea con jQuery;
$('#formFieldID').trigger("change");Donde formFieldID es el ID del campo de formulario declarado en su html.
Creo que estás tratando de manipular el elemento DOM antes de su creación.
Puede pedirle a jQuery que espere hasta que se complete el DOM con $(function() { /* code */ }) o, una versión más rápida y nueva, $(() => /* code */) .
Además, puede activar directamente un evento con jQuery, será más fácil si usa un evento personalizado o un evento con espacio de nombres.
echo '$(() => $("[name=\"'.$FieldName.'\""]).trigger("change"));';Para simplificar su código, sugiero usar una clase dedicada para activar el evento. Puede colocar esto directamente en el código JS y no en la parte de PHP.
$(() => $(".js-trigger-change").trigger("change"));