Tengo el siguiente problema:
Tengo un foreach dentro de un formulario, dentro de este formulario tengo una entrada de tipo número que recibe varios datos dependiendo del resultado de la consulta en la BD (normalmente dan resultados de 3 a 4 datos) tengo el código estructurado de la siguiente manera:
<form autocomplete="off" action="somewhere.php" method="post" onsubmit="return validator();"> <?php foreach($data["users"] as $dato){ $pco_user= $dato["pco_user"]; ?> <p class="card-text"><strong><?php echo $pco_user; ?></strong></p> <label>Number:</label> <input type="number" name="votation[]" class="votation"></input><?php } ?> <button type="submit" id="submit3" name="button1" class="btn btn-secondary" value="Save" type="button">Save</button> </form>En la etiqueta del formulario tengo el siguiente código para onsubmit:
<script> function validator() { const controls=document.querySelectorAll('.votation'); let ids=[]; controls.forEach(function(control) { event.preventDefault(); if(ids.includes(control.value)) { alert('Duplicate values'); return true; } ids.push(control.value); return false; }); } </script>Básicamente lo que estoy logrando en este momento es que los datos que se están insertando se leen antes de redirigir a la acción del formulario leyendo si hay valores iguales, pero eso no lo puedo conseguir en el caso de que no haya valores iguales, puedo redireccionar sin problemas, alguna solucion o me pueden decir donde me equivoque?
Puede evitar el envío de formularios utilizando event.preventDefault() pero si la función onsubmit se asigna en línea, entonces el event debe pasarse a la función como un parámetro.
Puede usar Array.every() para encontrar duplicados como se explica en esta respuesta .
<form action="script.php" method="post" onsubmit="validator(event)"> <input type="number" class="votation"> <button type="submit">Save</button> </form> <script> function validator(event) { // get all control input values const values = document.querySelectorAll('.votation').map(control => control.value); // check if there are any duplicates if (!values.every((element, index, array) => array.indexOf(element) === index) { alert("Duplicate values found"); // prevent form submission event.preventDefault(); } } </script>