How to sum a bank record plus input with Jquery

1

Hello how do I do this sum with Jquery:

I have this table vehicles in the database with the revision column of 500

IntheformwhenIchoosetheMT-02prefixIwantittosumtheinputhorimetrooftheexchange(tobetyped)+revision(thatthisrecordisinthedatabase)andgivetheresultintheinputhorimetroofthenextexchange

Ihavethissumbutisnotgettingthedatabaserecord(forreference)seewhere500isinthecodeIdidnotwanttoputthenumberbuttogettherecordthatisinthedatabase/p>

<scripttype="text/javascript">
jQuery(document).ready(function(){
    jQuery('input').on('keyup',function(){
        if(jQuery(this).attr('name') === 'result'){
            return false;
        }

        var horimetroca = (jQuery('#horimetroca').val() == '' ? 0 : jQuery('#horimetroca').val());
        var proximatroca = (parseInt(horimetroca) + 500);
        jQuery('#proximatroca').val(proximatroca);
    });
});
</script>
    
asked by anonymous 02.05.2018 / 21:46

1 answer

0
  

A simple example but you can understand how it works:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scriptlanguage="javascript">
<!--
    $(document).ready(function () {
        //executa função no clique do botão class addMore
        $(".addMore").click(function(){
                //recupera os valores do formulário
                var prefixo = $("#prefixo").val();
                var horimetro = $("#horimetro").val();

                //prepara para enviar com o ajax para a buscaVeiculo.php
                var dataString = {"valorPrefixo":prefixo,"valorHorimetro":horimetro }

              $.ajax({
                url: 'buscaVeiculo.php',
                type: 'POST',
                data: dataString,
                success: function(data){
                //insere no input de id horimetroProxima o valor retornado    
                $("#horimetroProxima").val(data);
                },
                error: function(){
                //caso haja erro a frase abaixo será apresentada na div de id resultado    
                $("#resultado").html("Ouve um erro ao enviar sua URL");
                }
             });//ajax 

        });
    });
//-->
</script>

<div id="resultado"></div>

<select id="prefixo" size="1">
    <option>Veiculo</option>
    <option value="MT-02">MT-02</option>
    <option value="DF-02">DF-02</option>
    <option value="CM-01">CM-01</option>
</select>

<input id="horimetro" type="text"> <input id="horimetroProxima" type="text" readonly> <button class="addMore">add</button>

searchVeiculo.php

$Prefixo = $_POST['valorPrefixo'];
$Horimetro = $_POST['valorHorimetro'];

$conexao = new PDO('mysql:host=localhost;dbname=nome_DB',"USUARIO","SENHA");

    $sql = $conexao->prepare("SELECT revisao FROM veiculos where prefixo='$Prefixo'");
    $sql->execute();

    $linha = $sql->fetch(PDO::FETCH_ASSOC);

    $Revisao = $linha['revisao'];

    echo $Revisao+ $Horimetro;

Maybe you might like this solution

Script

    $(document).ready(function () {

        //$("#horimetro").blur(function(){
        $( ".qqum" ).on( "blur keyup change", function() {

            var prefixo = $("#prefixo").val();

            if (prefixo!="Veiculo"){

                var horimetro = $("#horimetro").val();
                var dataString = {"valorPrefixo":prefixo,"valorHorimetro":horimetro }

              $.ajax({
                url: 'buscaVeiculo.php',
                type: 'POST',
                data: dataString,
                success: function(data){
                    $("#horimetroProxima").val(data);
                },
                error: function(){
                    $("#resultados").html("Ouve um erro ao enviar sua URL");
                }
             });//ajax 
            }
        });
    });

HTML

 
<select class="qqum" id="prefixo" size="1">
    <option>Veiculo</option>
    <option value="MT-02">MT-02</option>
    <option value="DF-02">DF-02</option>
    <option value="CM-01">CM-01</option>
</select>

<input class="qqum" id="horimetro" type="text" placeholder="horimetro"> <input id="horimetroProxima" type="text" readonly>

As shown in the Online Notpad of the AP review

You have to make several changes due to classes e ids different:

$( "#idVeiculo,#horimetroca" ).on( "blur keyup change", function() {                    
var prefixo = $("#idVeiculo").val();
if (prefixo!="Selecione"){
var horimetro = $("#horimetroca").val();
.............
.............
success: function(data){
   $("#proximatroca").val(data);

Code in its entirety

<?php

$conexao = new PDO ....

$resultipo = $conexao->prepare("SELECT * FROM veiculos");
$resultipo->execute();
$resultados = $resultipo->fetchAll(PDO::FETCH_ASSOC);

?>

<div class="col-md-3">
          <div class="form-group">
            <b><label class="col-form-label" for="inputDefault">Veiculo</label></b>
              <select name="idVeiculo" class="form-control select2" id="idVeiculo" style="width:100%;" >
              <option value="" selected>Selecione</option>
      <?php
        foreach($resultados as $results):
      ?>
              <option value="<?php echo $results['prefixo'] ?>"><?php echo $results['prefixo']; ?></option>
      <?php
        endforeach;
      ?>
               </select>
          </div>
        </div>

        <div class="col-md-3">
          <div class="form-group">
            <b><label class="col-form-label" for="inputDefault">Data da Troca</label></b>
               <input type="date" name="datatroca"  value="<?php echo date('Y-m-d');?>" class="form-control"  id="datatroca" />
          </div>
        </div>

            <div class="col-md-3">
              <div class="form-group">
                <b><label class="col-form-label" for="inputDefault">Km da Troca</label></b>
                <input class="form-control" name="kmtroca" id="kmtroca" type="text">
              </div>
            </div>

            <!-- Soma da Proxima Troca em Ajax-->

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scriptlanguage="javascript">
                <!--
                    $(document).ready(function () {

                        $( "#idVeiculo,#horimetroca" ).on( "blur keyup change", function() {

                            var prefixo = $("#idVeiculo").val();

                            if (prefixo!="Selecione"){

                                var horimetro = $("#horimetroca").val();
                                var dataString = {"valorPrefixo":prefixo,"valorHorimetro":horimetro }

                              $.ajax({
                                url: 'buscaVeiculo.php',
                                type: 'POST',
                                data: dataString,
                                success: function(data){
                                    $("#proximatroca").val(data);
                                },
                                error: function(){
                                    $("#resultados").html("Ouve um erro ao enviar sua URL");
                                }
                             });//ajax 
                            }
                        });

                    });
                //-->
                </script>

            <div class="col-md-3">
              <div class="form-group">
                <b><label class="col-form-label" for="inputDefault">Horimetro da Troca</label></b>
                <input class="form-control" name="horimetroca" id="horimetroca" type="text">
              </div>
            </div>

            <div class="col-md-3">
              <div class="form-group">
                <b><label class="col-form-label" for="inputDefault">Horimetro da Proxima Troca</label></b>
                <input class="form-control" readonly="" name="proximatroca" id="proximatroca" type="text">
              </div>
            </div>


            <div id="resultados"></div> 
    
03.05.2018 / 01:41