0

Tengo un formulario con dos botones que apuntan al mismo archivo, pero según el botón que apriete el usuario se trata la información de una forma u otra. Básicamente, hay un botón para seleccionar los elementos de dos desplegables y otro para seleccionarlos aleatoriamente. Quiero implementar JS para que valide los datos en caso de que el usuario elija la primera opción, y asegurarme que tiene una opción seleccionada antes de enviar el formulario. Os adjunto el código a continuación.

Aparentemente, esto funciona bien, pero si se clica primero en el botón no aleatorio sin haber seleccionado los elementos (haciendo correr JS y mostrando el mensaje correctamente) luego al clicar el segundo botón (el aleatorio), que no debería hacer saltar el JS, también lo hace saltar. ¿Alguien me puede guiar hacia donde está mi error? No consigo verlo.

<form action="oficio.php" method="post" id="index"> 
    <p> Nombre:
    <input type = "text" id = "nombre" name = "nombrepj" required minlength="3" value = "<?php echo $Nombre;?>"/></p>
                    
    <p>Raza:
    <select id = "raza_pj" name = "raza_pj">
        <option value = "0" ></option>
            <?php
                if ($conexio) {$resultado=mysqli_query($conexio,"SELECT * FROM razas_bd_1");
                while($consulta = mysqli_fetch_array($resultado)){
                    imprimir( "<option value='$consulta[0]'>" . $consulta['Raza'] . "</option>" );
                }
            }
            ?>
    </select>
    </p>
                    
    <p>Clase:
    <select id = "clase_pj" name = "clase_pj">
        <option value = "0" </option>
            <?php
            if ($conexio){
                $consulta = "SELECT * FROM clase_bd_1";
                $resultado=mysqli_query($conexio,$consulta);
                if ($resultado = $conexio->query($consulta)){
                    while ($fila = $resultado->fetch_row()) {
                        imprimir ( "<option value='$fila[0]'>$fila[2]</option>" );
                    }   
                }
            }
            ?>
    </select>
    </p>
                
<input type = "submit" name = "Empezar" id = "Empezar" value = "Empezar" onclick="validacionIndex()" />
<input type = "submit" name = "Dados" id = "Dados" value = "Dados"/>
</form>

<script language="javascript" type="text/javascript">
                
    function validacionIndex(){
        const form = document.getElementById("index");
        const raza = document.getElementById("raza_pj");
        const clase = document.getElementById("clase_pj");

        form.addEventListener("submit", function(e){
                if(raza.value == 0){
                    alert("texo 1.");
                    e.preventDefault();
                }else if(clase.value == 0){
                    alert("texto 2.");
                    e.preventDefault();
                }
        })
    }
</script>```

1 respuesta 1

0

Los botones tipo submit <input type = "submit" name = "Dados" id = "Dados" value = "Dados"/> ejectutan la acción del formulario sin importar cuantos tengas , un tipo button <input type = "button" name = "Dados" id = "Dados" value = "Dados"/>no ejecuta el formulario, puedes dejarlos como tipo button y ponerles un evento click a cada uno,y enviar el formularion por jquery,o simplemente unsa sola funcion donde envies por parametro a y b

Ejemplo:

 <input type = "button" name = "Empezar" id = "Empezar" value = "Empezar" onclick="validacionIndexA()" />
    <input type = "button" name = "Dados" id = "Dados" onclick="validacionIndexB()" value = "Dados"/>


    function validacionA=()=>{
    alert("di click al A");
let form = document.getElementById("index");
     form.submit();
    $("index").submit(function(){
      alert("Submitted");
    });
    }
    function validacionB=()=>{
    alert("di click al B");
    let form = document.getElementById("index");
    form.submit();
    $("index").submit(function(){
      alert("Submitted");
    });
    }
3
  • Muchas gracias Cristian Camilo, puedo manejar mejor como validar los formularios. Pero me encuentro el problema que en el siguiente formulario cargaba una información u otra dependiendo de como se mandaba el formulario, pero ahora parece que no llega la información. Tengo que mandar la información que quiero del formulario con javascript? Me explico mejor: he cambiado el código siguiendo tus sugerencias y ahora envío el formulario pero la información del cuadro de texto y de los desplegables no llega a la siguiente página. ¿Como lo puedo hacer?
    – Marc
    Commented el 9 sept. 2021 a las 18:10
  • intenta submitar el formulario form.submit() Commented el 9 sept. 2021 a las 18:49
  • Si, eso es lo que hice, pero no se recibe la información en la pagina de destino :(
    – Marc
    Commented el 9 sept. 2021 a las 22:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.