Skip to main content
se añadieron 38 caracteres en el cuerpo
Origen Enlace
Lobos
  • 16.4k
  • 3
  • 14
  • 31

Esta es la forma...

<form id="ed" method="POST">
   <input type="hidden" id="tipoAccion" name="tipoAccion" value="delete">
   <input type="submit" id="buttonDelete" value="BORRAR">

   <input type="hidden" id="tipoAccion" name="tipoAccion" value="edit">
   <input type="submit" id="buttonEdit" value="EDITAR">
</form>

Para poder saber que boton presiono el usuario utilizo JS

const formEditDel = document.querySelector('form#ed');
        const userDel = formEditDel.querySelector('input#buttonDelete');
        const userEdit = formEditDel.querySelector('input#buttonEdit');

        eventListeners();

        function eventListeners() {
            userDel.addEventListener('submit', markDeleted);
            userEdit.addEventListener('submit', userEdited);
        }

        function markDeleted(event) {
            event.preventDefault();

            console.log('^*^*^ markDeleted *^*^*');

        }

        function userEdited(event) {
            event.preventDefault();

            console.log('^*^*^ userEdited *^*^*');
        
        }
    <form id="ed" method="POST">
       <input type="hidden" id="tipoAccion" name="tipoAccion" value="delete">
       <input type="submit" id="buttonDelete" value="BORRAR">
    
       <input type="hidden" id="tipoAccion" name="tipoAccion" value="edit">
       <input type="submit" id="buttonEdit" value="EDITAR">
    </form>
<script>
        const formEditDel = document.querySelector('form#ed');
        const userDel = formEditDel.querySelector('input#buttonDelete');
        const userEdit = formEditDel.querySelector('input#buttonEdit');

        eventListeners();

        function eventListeners() {
            userDel.addEventListener('submit', markDeleted);
            userEdit.addEventListener('submit', userEdited);
        }

        function markDeleted(event) {
            event.preventDefault();

            console.log('^*^*^ markDeleted *^*^*');

        }

        function userEdited(event) {
            event.preventDefault();

            console.log('^*^*^ userEdited *^*^*');
        
        }
</script>
 

Esta es la forma...

<form id="ed" method="POST">
   <input type="hidden" id="tipoAccion" name="tipoAccion" value="delete">
   <input type="submit" id="buttonDelete" value="BORRAR">

   <input type="hidden" id="tipoAccion" name="tipoAccion" value="edit">
   <input type="submit" id="buttonEdit" value="EDITAR">
</form>

Para poder saber que boton presiono el usuario utilizo JS

<script>
        const formEditDel = document.querySelector('form#ed');
        const userDel = formEditDel.querySelector('input#buttonDelete');
        const userEdit = formEditDel.querySelector('input#buttonEdit');

        eventListeners();

        function eventListeners() {
            userDel.addEventListener('submit', markDeleted);
            userEdit.addEventListener('submit', userEdited);
        }

        function markDeleted(event) {
            event.preventDefault();

            console.log('^*^*^ markDeleted *^*^*');

        }

        function userEdited(event) {
            event.preventDefault();

            console.log('^*^*^ userEdited *^*^*');
        
        }
</script>

const formEditDel = document.querySelector('form#ed');
        const userDel = formEditDel.querySelector('input#buttonDelete');
        const userEdit = formEditDel.querySelector('input#buttonEdit');

        eventListeners();

        function eventListeners() {
            userDel.addEventListener('submit', markDeleted);
            userEdit.addEventListener('submit', userEdited);
        }

        function markDeleted(event) {
            event.preventDefault();

            console.log('^*^*^ markDeleted *^*^*');

        }

        function userEdited(event) {
            event.preventDefault();

            console.log('^*^*^ userEdited *^*^*');
        
        }
    <form id="ed" method="POST">
       <input type="hidden" id="tipoAccion" name="tipoAccion" value="delete">
       <input type="submit" id="buttonDelete" value="BORRAR">
    
       <input type="hidden" id="tipoAccion" name="tipoAccion" value="edit">
       <input type="submit" id="buttonEdit" value="EDITAR">
    </form>
 

Origen Enlace

Javascript addEventListener no funciona en un lugar de mi codigo pero en otro si

Tratare de explicar mi problema.

Tengo dos botones, uno para borrar el registro y otro para editar el registro, puse ambos dentro de una forma (form).

Cuando el usuario pulse en cualquiera de ellos debera de ejecutar su respectiva funcion.

Esta es la forma...

<form id="ed" method="POST">
   <input type="hidden" id="tipoAccion" name="tipoAccion" value="delete">
   <input type="submit" id="buttonDelete" value="BORRAR">

   <input type="hidden" id="tipoAccion" name="tipoAccion" value="edit">
   <input type="submit" id="buttonEdit" value="EDITAR">
</form>

Para poder saber que boton presiono el usuario utilizo JS

<script>
        const formEditDel = document.querySelector('form#ed');
        const userDel = formEditDel.querySelector('input#buttonDelete');
        const userEdit = formEditDel.querySelector('input#buttonEdit');

        eventListeners();

        function eventListeners() {
            userDel.addEventListener('submit', markDeleted);
            userEdit.addEventListener('submit', userEdited);
        }

        function markDeleted(event) {
            event.preventDefault();

            console.log('^*^*^ markDeleted *^*^*');

        }

        function userEdited(event) {
            event.preventDefault();

            console.log('^*^*^ userEdited *^*^*');
        
        }
</script>

Mi problema es que los addEventListener no estan funcionando y por lo tanto no entran a ejecutar la funcion que les corresponden.

Como podran ver en la imagen de abajo la consola muestra que los querySelectors son correctos sin embargo los eventListener no estan funcionando

imagen de lo que muestra la consola del navegador

Ojala alguien pueda ayudarme a entender que es lo que esta pasando.

De antemano gracias por cualquier ayuda.