-1

¿Cómo hago para validar el input cuando la cantidad_disponible es 0, mostrar mensaje y no dejar agregar y si la cantidad es mayor a la cantidad_disponible mostrar mensaje?, no se como hacerlo con este codigo con la alternativa de yussef:

function addItemToShoppingCart(id_prod, codigo, nombre,cantidad_disponible,talla,talla_ropa) {
    
    //function addItemToShoppingCart(itemTitle, itemPrice, itemImage) {
    
    //const elementsTitle = shoppingCartItemsContainer.getElementsByClassName(
        //'shoppingCartItemTitle'
      //);
      
      const elementsTitle = document.getElementsByClassName('title');
    
      for (let i = 0; i < elementsTitle.length; i++) {
        if (elementsTitle[i].innerText === id_prod) {
          ////let elementQuantity = tbody.querySelector('.ItemCarrito>.table__cantidad>#shoppingCartItemQuantity_'+id_prod);
          ////const cantidad_disponible = parseInt(elementQuantity.getAttribute("max"));
         ////elementQuantity.value=cantidad_disponible
          // elementQuantity.value++;
          //console.log(elementQuantity.value)
          //mensaje exitoso
          updateShoppingCartTotal();
          return;
        }
      }
    
      const tr = document.createElement('tr')
        tr.classList.add('ItemCarrito')
         tr.setAttribute("id", `tr_${id_prod}`);
    // // //     <td class="table__productos">
             
    // // //     <input type="text" id="id_productos" disabled style="border: none; border-color: transparent;outline: 0;width: 40px;
    // // // " name="id_productos" class="id_productos" value="${item.id}"></>
    // // //       <h6 class="title" hidden>${item.id}</h6>
          
    // // //       </td>
      Content = `
         <th scope="row">${id_prod}</th>
    
         <td class="table__productos">
         <input id="id_productos_${id_prod}" type="text" value="${id_prod}" class="id_productos"
        style="border: none; border-color: transparent;outline: 0;width: 40px;">
    
           <h6 id="title_${id_prod}" class="title" hidden>${id_prod}</h6>
         </td>
    
        <td class="table__codigo">
        <input id="codigo_${id_prod}" type="text" value="${codigo}" class="codigo"
         style="border: none; border-color: transparent;outline: 0;width: 40px;">
          
         </td>
    
        <td class="table__nombre">
       <input id="nombre_${id_prod}" type="text" value="${nombre}" class="nombre"
       style="border: none; border-color: transparent;outline: 0;width: 40px;">
         
         </td>
        
         <td class="table__cantidad_disponible">
         <input id="cantidad_disponible_${id_prod}" type="text" value="${cantidad_disponible}" class="cantidad_disponible"
         style="border: none; border-color: transparent;outline: 0;width: 40px;">
          
        </td>
    
        <td class="table__talla">
        <input id="talla_${id_prod}" type="text" value="${talla}" class="talla"
       style="border: none; border-color: transparent;outline: 0;width: 40px;">
          
         </td>
    
         <td class="table__talla_ropa">
        <input id="talla_ropa_${id_prod}"  type="text" value="${talla_ropa}" class="talla_ropa"
         style="border: none; border-color: transparent;outline: 0;width: 40px;">
          
        </td>
    
    
    
        
        
        <td class="table__cantidad">
                    <input id="shoppingCartItemQuantity_${id_prod}" max="${cantidad_disponible}" oninput="updateCantidad(this)" class="shopping-cart-quantity-input shoppingCartItemQuantity_" type="number"
                        value="1" min="1">
                    <button class="btn btn-danger buttonDelete" type="button">X</button>
                    </td>
            
         `
       
        
       tr.innerHTML = Content 
         tbody.append(tr)
        
    }

con el codigo expuesto del usuario Yussef

1
  • lo que nose es como cambiar el this por el input que necesito Commented el 30 jun. 2023 a las 17:07

1 respuesta 1

0

A mi para validar campos numéricos me gusta usar checkValidity, puedes ver esta respuesta si tienes dudas

Tu tienes esta secuencia input -> oninput -> updateCantidad y funciona cuando el usuario modifica el valor del input. Pero el evento oninput no se ejecuta cuando el valor ha sido cambiado por código

Entonces debes crear una función "Add" que añada +1 (o el valor que tu requieres), por ejemplo

function add(id, cantidad=1){
  let input = document.getElementById("shoppingCartItemQuantity_" + id);
  input.value= input.valueAsNumber + cantidad;
  updateCantidad(input);
}

Esta función recibirá como argumento la id del input y opcionalmente la cantidad a agregar (obviamente si pasas un negativo quitará en vez de agregar). Además se ejecutará manualmente la función updateCantidad

Aquí un ejemplo completo:

(Vez como si es posible crear un ejemplo mínimo y verificable!!!!!)

function updateCantidad(input) {
  if(input.checkValidity()){
   input.setAttribute("data-oldvalue", input.value);
  }
  else{
    input.value = input.getAttribute("data-oldvalue") || input.min;
  }
}
function add(id, cantidad=1){
  let input = document.getElementById("shoppingCartItemQuantity_" + id);
  input.value= input.valueAsNumber + cantidad;
  updateCantidad(input);
}
<button onclick="add('1')" >Añadir</button>
<button onclick="add('1',-1)" >quitar</button>
<input id="shoppingCartItemQuantity_1" max="10" min="1" oninput="updateCantidad(this)" type="number" value="1" >

<br>
<button onclick="add('2')" >Añadir</button>
<button onclick="add('2',-1)" >quitar</button>
<input id="shoppingCartItemQuantity_2" max="10" min="1" oninput="updateCantidad(this)" type="number" value="1" >


<br>
<button onclick="add('3')" >Añadir</button>
<button onclick="add('3',-1)" >quitar</button>
<input id="shoppingCartItemQuantity_3" max="10" min="1" oninput="updateCantidad(this)" type="number" value="1" >

Esto llevado a tu código sería:

printf('<td class="td"><button onclick="add('.$e->id_productos.')" class="button">Añadir</button></td>');


 <input id="shoppingCartItemQuantity_${id_prod}" max="${cantidad_disponible}" oninput="updateCantidad(this)" class="shopping-cart-quantity-input shoppingCartItemQuantity_" type="number" value="1" min="1" >


    function updateCantidad(input) {
      if(input.checkValidity()){
       input.setAttribute("data-oldvalue", input.value);
      }
      else{
        input.value = input.getAttribute("data-oldvalue") || input.min;
      }
    }
    function add(id, cantidad=1){
      let input = document.getElementById("shoppingCartItemQuantity_" + id);
      input.value= input.valueAsNumber + cantidad;
      updateCantidad(input);
    }
4
  • Sabes Yussef, no me funciona me trae null en esta parte input.valueAsNumber resulta que el elemento se crea al 1er click con cantidad por defecto un uno Commented el 30 jun. 2023 a las 19:00
  • Entra a chat.stackexchange.com/rooms/146964/yssef y pégame el código que has puesto
    – Yussef
    Commented el 30 jun. 2023 a las 19:04
  • ok, yusssef, te hable hace poco Commented el 30 jun. 2023 a las 19:47
  • Yussef u otro usuario, como hago para validar el input, cuando la cantidad_disponible es 0, moatrar mensaje y no dejar agregar y si la cantidad es mayor a la cantidad_disponible moxtrzr mensaje, nose como hacerlo con este codigo con la alternativa de yussef Commented el 4 jul. 2023 a las 14:40

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.