'How to repeat function on all inputs
I am developing an application with php and javascript, in which, after placing an order in the assortment area, the person can compare the ean of what the client requested, the same ones that are sent to him have been made, and they can be identified one to another, what I can't do is that the validation of the ean is executed in all the inputs, only logor that it be in the first input.
<?php foreach ($factura as $fact ) {
$img = "SELECT `imgart` from `imgart` WHERE `clave` = '".$fact['ARTLFA']."'";
$img = $GLOBALS['conn']->query($img);
$img = $img->fetch_all(MYSQLI_ASSOC);
?>
<div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#M<?= $fact['ARTLFA'] ?>">
<?= $fact['ARTLFA'] ?>
</button>
</div>
<div>
<div name="cant" class="" >Cantidad: <?= $fact['CANLFA'] ?></div>
<strong>$ <?= $fact['PRELAL'] ?></strong><br>
<strong> <?= $fact['CP1ART'] ?></strong><br>
<form action="#" name="formulario" id="formulario">
<div class="formulario__grupo" id= "grupo__ean">
<div class="formulario__grupo-input">
<input type="hidden" value="<?= $fact['EANART'] ?>" name="<?= $fact['EANART'] ?>" id="ean" disabled>
</div>
</div>
<div class="formulario__grupo" id= "grupo__ean1">
<div class="formulario__grupo-input">
<input type="text" value="" name="ean1" id="ean1" class=" formulario__input" >
<i class="formulario__validacion-estado fa-solid fa-circle-xmark"></i>
</div>
<p class="formulario__input-error" >Codigo de Barras Incorrecto</p>
</div>
<label for="surt">Surtidas</label>
<input type="text" value="" name="surt" class=" formulario__input" >
<div class="formulario__mensaje" id="formulario__mensaje" >
<p><i class="fa-solid fa-triangle-exclamation"></i><b>Error : tu pedido esta incompleto por favor Revisalo nuevamente</b></p>
</div>
and this is my Javascript:
const formulario = document.getElementById('formulario');
const inputs = document.querySelectorAll('#formulario input');
const validarFomrulario = (e) => {
validarEan();
};
const validarEan = () => {
const inputean = document.getElementById('ean');
const inputean1 = document.getElementById('ean1');
if(inputean.value !== inputean1.value){
document.getElementById(`grupo__ean1`).classList.add('formulario__grupo-incorrecto');
document.getElementById(`grupo__ean1`).classList.remove('formulario__grupo-correcto');
document.querySelector(`#grupo__ean1 i`).classList.add('fa-circle-xmark');
document.querySelector(`#grupo__ean1 i`).classList.remove('fa-circle-check');
document.querySelector(`#grupo__ean1 .formulario__input-error`).classList.add('formulario__input-error-activo');
} else {
document.getElementById(`grupo__ean1`).classList.remove('formulario__grupo-incorrecto');
document.getElementById(`grupo__ean1`).classList.add('formulario__grupo-correcto');
document.querySelector(`#grupo__ean1 i`).classList.remove('fa-circle-xmark');
document.querySelector(`#grupo__ean1 i`).classList.add('fa-circle-check');
document.querySelector(`#grupo__ean1 .formulario__input-error`).classList.remove('formulario__input-error-activo');
}
};
inputs.forEach((input) => {
input.addEventListener('keyup', validarFomrulario);
input.addEventListener('blur', validarFomrulario);
});
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
