时间戳

首页 > 解决方案 > jquery每个输入多量计算得到动态形式的NaN

php - jquery每个输入多量计算得到动态形式的NaN

问题描述

我找不到我的代码的问题在哪里，在另一个主题（这里）中，我得到了帮助计算盒装产品的多个数量，而且效果很好。但是，当我将帮助调整到我的主要代码时，某些东西无法正常工作。基本上问题是，当单独运行代码时可以，但是当我在我的代码中运行时，包的数量返回为 NaN。我会发送一个屏幕来寻求帮助。

在此处输入图像描述

我的问题在这里：

$(".ItemQtd").each(function() {
    var number = parseInt( $(this).val() );
    var package = parseInt( $(this).next(".ItemEmb").val() );

    if (number % package === 0) {
      alert(`${number} is multiple of ${package}.`);
    } else {
      alert(`${number} is not multiple of ${package}.`);
    }
  });

这是我的完整代码：

<?php
//index.php

$iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$ipad = strpos($_SERVER['HTTP_USER_AGENT'],"iPad");
$android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
$palmpre = strpos($_SERVER['HTTP_USER_AGENT'],"webOS");
$berry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");
$ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");
$symbian = strpos($_SERVER['HTTP_USER_AGENT'],"Symbian");
$windowsphone = strpos($_SERVER['HTTP_USER_AGENT'],"Windows Phone");

if ($iphone || $ipad || $android || $palmpre || $ipod || $berry || $symbian || $windowsphone == true) {
   $dispositivo = "mobile";
 }

else { $dispositivo = "computador";} 

//Se for um dispositivo móvel
if ($dispositivo == "mobile") {
  header("Location: mobile/");
}

//Se for um computador
if ($dispositivo == "computador") {
  //Não faz nada
}


require_once("conexao.php");
//Desconto lista
function fill_unit_select_box($pdo)
{ 
 $output = '';
 $query = "SELECT * FROM tbl_desc ORDER BY IdDesc ASC";
 $statement = $pdo->prepare($query);
 $statement->execute();
 $result = $statement->fetchAll();
 foreach($result as $row)
 {
  $output .= '<option value="'.$row["DescName"].'">'.$row["DescName"].'</option>';
 }
 return $output;
}

//Produto lista
function fill_prod_select_box($pdo)
{ 
 $output = '';
 $query = "SELECT * FROM tbl_prod ORDER BY ItemName ASC";
 $statement = $pdo->prepare($query);
 $statement->execute();
 $result = $statement->fetchAll();
 foreach($result as $row)
 {
  $output .= '<option value="'.$row["ItemCode"].'">'.$row["ItemCode"].'</option>';
 }
 return $output;
}


?>
<!DOCTYPE html>
<html>
 <head>
  <title>Pedidos</title>

  <!-- JS jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
   <script src="https://code.jquery.com/jquery-1.12.4.js" ></script>
<!--    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> -->

  <!-- CSS Styles -->
  <link rel="stylesheet" href="css/bootstrap.min.css"/>
  <link rel="stylesheet" href="https://unpkg.com/@coreui/icons/css/coreui-icons.min.css">
  <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <!-- JS -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script> 
  <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

  <!-- Personal Style -->
  <style>.invertcores{filter: invert(100%);}</style>  

  <script type="text/javascript" src="js/jautocalc.js"></script>

 </head>
 <body>

  <br />
  <div class="container">
   <form method="post" id="insert_form" name="cart">
    Total do Pedido
    <input type="text" name="sub_total" class="form-control col-2"  jAutoCalc="SUM({.soma})" readonly>
    <hr>

    <button type="button" name="add" class="btn btn-success add">Adicionar Linha</button>
    <input type="submit" name="submit" class="btn btn-info" value="Gravar Pedido" />
    <input type="button" name="reset" class="text-white btn btn-secondary reset" value="Restaurar" />

    <br><br>
    <div class="table-responsive">
     <span id="error"></span>
     <table class="table" id="item_table" name="cart">
      <tr>
        <th width="14%">Cód. Produto</th>
        <th width="40%">Descrição do Produto</th>
        <th width="5%">Quantidade</th>
        <th width="7.5%">Unid.</th>
        <th width="7%">Emb.</th>
        <th width="2%">Caixas</th>
        <th width="8%">Preço(R$)</th>
        <th width="10%">Total(R$)</th>
        <th width="8.5%">Desconto</th>
        <th>Ações</th>
      </tr>
      <tr name="line_items">
        <td><select class="form-control ItemCode" name="ItemCode[]"><option value="">Selecionar</option><?php echo fill_prod_select_box($pdo); ?></select></td>
        <td><input type="text" name="ItemName[]" class="form-control ItemName text-break text-uppercase" value="Descrição 316" readonly/></td>
        <td><input type="text" name="ItemQtd[]" class="form-control ItemQtd" onkeypress="return event.charCode >= 48 && event.charCode <= 57" /></td>
        <td><input type="text" name="ItemUnit[]" class="form-control ItemUnit" value="PÇ" /></td>
        <td><input type="text" name="ItemEmb[]" class="form-control ItemEmb" value="50" /></td>
        <td><input type="text" class="form-control ItemCx"></td>
        <td><input type="text" name="Price[]" class="form-control ItemPrice" value="0,95" /></td>
        <td><input type="text" name="LineTotal[]" class="form-control LineTotal2 soma dinheiro" jAutoCalc="{.ItemQtd} * {.ItemPrice}" /></td>
        <td><select name="ItemDesc[]" class="form-control ItemDesc"><option value="">Selecionar</option><?php echo fill_unit_select_box($pdo); ?></select></td>
        <td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><img class="invertcores" src="icons/x.svg"></button></td>
      </tr>


     </table>
    </div>
   </form>
  </div>
 </body>
</html>

<!--///////////////////////////////////////////#Script do Form///////////////////////////////////////////////-->

<script>

//
$(document).ready(function() {

      function autoCalcSetup() {
          $('form[name=cart]').jAutoCalc('destroy');
          $('form[name=cart] tr[name=line_items]').jAutoCalc({keyEventsFire: true, decimalPlaces: 2, emptyAsZero: true});
          $('form[name=cart]').jAutoCalc({decimalPlaces: 2});
         }
        autoCalcSetup();

      $('button[name=remove]').click(function(e) {
          e.preventDefault();

          var form = $(this).parents('form')
          $(this).parents('tr').remove();
          autoCalcSetup();

      });

      $('button[name=add]').click(function(e) {
          e.preventDefault();

          var $table = $(this).parents('form');
          var $top = $table.find('tr[name=line_items]').last();
          var $new = $top.clone(true);

          $new.jAutoCalc('destroy');
          $new.insertAfter($top);
          $new.find('input[type=text]').val('');
          autoCalcSetup();

      });

//Remover linha
$(document).on('click', '.remove', function(){
  $(this).closest('tr').remove();
});

//Reload da página
$(document).on('click', '.reset', function(){
  swal({
    //"Click on either the button or outside the modal."
    title: "Atenção!",
    text: "Você deseja realmente recarregar e perder todo o conteúdo?",
    icon: "warning",
    buttons: true,
    dangerMode: true,
    //button: "Sim",
    buttons: ["Não", "Sim"],
    })
    .then((willDelete) => {
      if (willDelete) {
        swal("Pronto! Todos os itens foram restaurados!", {
          icon: "success",
        })
        .then((value) => {
          location.reload();
        });
      } else {
        swal("Nenhuma alteração foi realizada!", {icon: "info",});
      }
    });
 });

 //Enviar itens para o banco
 $('#insert_form').on('submit', function(event){
  event.preventDefault();
  var error = '';
  $('.ItemCode').each(function(){
   if($(this).val() == '')
   {
    error += "<p>* Inserir o código do item na linha faltante</p>";
      return false;
   }
  });


  $(".ItemQtd").each(function() {
    var number = parseInt( $(this).val() );
    var package = parseInt( $(this).next(".ItemEmb").val() );

    if (number % package === 0) {
      alert(`${number} is multiple of ${package}.`);
    } else {
      alert(`${number} is not multiple of ${package}.`);
    }
  });

  $('.ItemDesc').each(function(){
   if($(this).val() == '')
   {
    error += "<p>* Selecione o desconto na linha faltante</p>";
      return false;
   }
  });

  var form_data = $(this).serialize();
  if(error == '')
  {
   $.ajax({
    url:"insert.php",
    method:"POST",
    data:form_data,
    success:function(data)
    {
     if(data == 'ok')
     {
      //location.reload();
      /*setTimeout(function() {
        location.reload(1);
      }, 3000); */ // 3 segundos
      swal({
        //"Click on either the button or outside the modal."
        title: "Concluído!",
        text: "Você adicionou o pedido com sucesso!",
        icon: "success",
        button: "Voltar",
        })
      .then((value) => {
        $('#item_table').find("tr:gt(0)").remove();
        location.reload();
        //swal(`The returned value is: ${value}`);
      });
      //swal("Concluído!", "Você adicionou o pedido com sucesso!", "success");
      //$('#error').html('<div class="alert alert-success">Pedido gravado com sucesso</div>');
      //alert(data);
     }
   //document.location.assign('success.php'); //redirecionar para alguma página
    }
   });
  }
  else
  {

    swal({
      title: "Atenção!",
      text: "Você não preencheu algum campo necessário!",
      icon: "error",
      button: "Voltar",
    })
    .then((value) => {
      $('#error').html('<div class="alert alert-danger alert-dismissible show" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button><strong>Atenção!</strong>'+error+'</div>');
      });
  }

 });

});

</script>

标签： phpjquery

解决方案

只需替换您的我的问题就在这里：代码如下

$(".ItemQtd").each(function() {

  if($(this).val() &&  $(this).next(".ItemEmb").val()){

      var number = parseInt( $(this).val() );
      var package = parseInt( $(this).next(".ItemEmb").val() );

      if (number % package === 0) {
        alert(`${number} is multiple of ${package}.`);
      } else {
        alert(`${number} is not multiple of ${package}.`);
      }
  }

推荐阅读