Jquery returns empty values

1

I have this jquery code in which I assign the values obtained in txtVlr and txtQuantity to some variables, then multilink them and the result put it in the txtSubtotal just when there is a change in the txtquantity, but when executing it the variables do not obtain the value and finally there is no result. The value of txtVlr is obtained by selecting an id in the txtidarticle (I do not know if it has anything to do). the value of txt Quantity is entered by the user.

<head>
<script>
$(document).ready(function(){

        var $Valor = $("#txtVlr").val();
        var $Cantidad = $("#txtCantidad").val();

        $("#txtCantidad").change(function(){
        $Subtotal = parseInt($Valor)*parseInt($Cantidad);
        alert ($Valor);
        alert ($Cantidad);


            $("#txtSubtotal").val($Subtotal); 
            alert ($Subtotal);
        });

    });  
</script>
</head>

<body>
<form>
<div class="Container">
        <div class="margen">
            <div class="col-xs-2">
                <label for="ex1">ID del Articulo</label>
                <!-- DEBE TENER UN DDL PARA LA BASE DE DATOS-->
                <?php 
                    $CON = mysqli_connect("localhost","root","","BDfactura") or die ("error");
                    $query="Select * From Articulo";
                    $sql = mysqli_query($CON, $query); 
                ?>
                <input class="form-control" id="txtidArticulo" type="text" list="Articulos">
                <datalist id="Articulos">
                       <?php 
                            while ($row = mysqli_fetch_array($sql)) { 
                        ?>
                    <option value="<?php echo $row['IdArticulo']; ?>"></option><?php } ?>

                </datalist>
                <?php mysqli_close($CON); ?>

            </div>
            <div class="col-xs-2">
                <label for="ex1">Descripcion</label>
                <!-- DEBE TENER UN DDL PARA LA BASE DE DATOS-->
                <input class="form-control" id="txtDescripcion" type="text">
            </div>
            <div class="col-xs-2">
                <label for="ex1">Valor Venta</label>
                <!-- DEBE TENER UN DDL PARA LA BASE DE DATOS-->
                <input class="form-control" id="txtVlr" type="text">
            </div>
            <div class="col-xs-2">
                <label for="ex1">Cantidad</label>
                <!-- DEBE TENER UN DDL PARA LA BASE DE DATOS-->
                <input class="form-control" id="txtCantidad" type="text">
            </div>
            <div class="col-xs-2">
                <label for="ex1">Subtotal</label>
                <!-- DEBE TENER UN DDL PARA LA BASE DE DATOS-->
                <input class="form-control" id="txtSubtotal" type="text">
            </div>
            <div class="col-xs-2">
                <button class="btn btn-default" type="submit" id="btnlistar">+</button>
            </div>
        </div>    
    </div>

    </form>
</body>
    
asked by Gammath.rar 21.04.2018 в 17:40
source

2 answers

2

The problem is that you try to use the variables outside their scope, that is, you declare them outside the change function and when you try to use them inside, they are not known in that scope. In that case you can declare them inside the function where you are going to use them.

So the code works:

$(document).ready(function() {

  $("#txtCantidad").change(function() {
    var Valor = $("#txtVlr").val();
    var Cantidad = $("#txtCantidad").val();
    var Subtotal = parseInt(Valor) * parseInt(Cantidad);
    console.log(Valor);
    console.log(Cantidad);

    $("#txtSubtotal").val(Subtotal);
    console.log(Subtotal);
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="Container">
    <div class="margen">
      <div class="col-xs-2">
        <label for="ex1">ID del Articulo</label>
        <!-- DEBE TENER UN DDL PARA LA BASE DE DATOS-->
        <?php 
                    $CON = mysqli_connect("localhost","root","","BDfactura") or die ("error");
                    $query="Select * From Articulo";
                    $sql = mysqli_query($CON, $query); 
                ?>
        <input class="form-control" id="txtidArticulo" type="text" list="Articulos">
        <datalist id="Articulos">
                       <?php 
                            while ($row = mysqli_fetch_array($sql)) { 
                        ?>
                    <option value="<?php echo $row['IdArticulo']; ?>"></option><?php } ?>

                </datalist>
        <?php mysqli_close($CON); ?>

      </div>
      <div class="col-xs-2">
        <label for="ex1">Descripcion</label>
        <!-- DEBE TENER UN DDL PARA LA BASE DE DATOS-->
        <input class="form-control" id="txtDescripcion" type="text">
      </div>
      <div class="col-xs-2">
        <label for="ex1">Valor Venta</label>
        <!-- DEBE TENER UN DDL PARA LA BASE DE DATOS-->
        <input class="form-control" id="txtVlr" type="text" placeholder="valor">
      </div>
      <div class="col-xs-2">
        <label for="ex1">Cantidad</label>
        <!-- DEBE TENER UN DDL PARA LA BASE DE DATOS-->
        <input class="form-control" id="txtCantidad" type="text">
      </div>
      <div class="col-xs-2">
        <label for="ex1">Subtotal</label>
        <!-- DEBE TENER UN DDL PARA LA BASE DE DATOS-->
        <input class="form-control" id="txtSubtotal" type="text">
      </div>
      <div class="col-xs-2">
        <button class="btn btn-default" type="submit" id="btnlistar">+</button>
      </div>
    </div>
  </div>

</form>

Also, if you prefer, you can omit the $ symbol to declare them. It is not a jQuery variable itself, but a value. Then, better remove the symbol. Generally $ is used for elements to which you want to apply jQuery functionalities, not for values intended for operations such as calculations.

    
answered by 21.04.2018 / 18:02
source
1

good morning I would do it in the following way, it is already working but I will remove the php

<head>
<script  src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
function myFunction() {
        var $Valor = $("#txtVlr").val();
        var $Cantidad = $("#txtCantidad").val();
        $Subtotal = parseInt($Valor)*parseInt($Cantidad);
        alert ($Valor);
        alert ($Cantidad);
        alert ($Subtotal);
        $("#txtSubtotal").val($Subtotal); 
        //$('#fecha_mass').val($(this).data('fecha'));
}
</script>
</head>

<body>
<form>
<div class="Container">
        <div class="margen">
            <div class="col-xs-2">
                <label for="ex1">ID del Articulo</label>
                <!-- DEBE TENER UN DDL PARA LA BASE DE DATOS-->

                <input class="form-control" id="txtidArticulo" type="text" list="Articulos">
                <datalist id="Articulos">

                </datalist>


            </div>
            <div class="col-xs-2">
                <label for="ex1">Descripcion</label>
                <!-- DEBE TENER UN DDL PARA LA BASE DE DATOS-->
                <input class="form-control" id="txtDescripcion" type="text">
            </div>
            <div class="col-xs-2">
                <label for="ex1">Valor Venta</label>
                <!-- DEBE TENER UN DDL PARA LA BASE DE DATOS-->
                <input class="form-control" id="txtVlr" onchange="myFunction()" type="text">
            </div>
            <div class="col-xs-2">
                <label for="ex1">Cantidad</label>
                <!-- DEBE TENER UN DDL PARA LA BASE DE DATOS-->
                <input class="form-control" id="txtCantidad" onchange="myFunction()" type="text">
            </div>
            <div class="col-xs-2">
                <label for="ex1">Subtotal</label>
                <!-- DEBE TENER UN DDL PARA LA BASE DE DATOS-->
                <input class="form-control" id="txtSubtotal" type="text">
            </div>
            <!--
            <div class="col-xs-2">
                <button class="btn btn-default" type="submit" id="btnlistar">+</button>
            </div>
        -->
        </div>    
    </div>

    </form>
</body>
    
answered by 21.04.2018 в 18:03