javascript Como executar função assim que uma div se altera?

Deltazero · Março 4, 2017

Boa tarde galera, estou com um problema, sou novo na área e estou desenvolvendo um sistema para o meu negocio, o problema seria quando eu seleciono as opções dos selects gostaria que ele retornasse a soma dos valores, porem não consegui de forma alguma ai passei os valores para duas divs ocultas e executo outra função para somar os valores das divs, só que além de não estar calculando assim que a div recebe o valor só consigo ver os valores com o onmouseover... o que eu poderia fazer para simplificar isto?

pedidos.php

<!DOCTYPE html>
<html lang="pt-br">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<title>Seven Seas - V1</title>
	
	<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css">
	<!--Import Google Icon Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
</head>
<body>
<nav>
    <div class="nav-wrapper cyan accent-4">
      <a href="#!" class="brand-logo center"> Seven Seas</a>
      <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
      <ul class="right hide-on-med-and-down">
        <li><a href="index.php">Clientes</a></li>
        <li><a href="cadastro.php">Cadastro</a></li>
        <li class="active"><a href="pedidos.php">Novos Pedidos</a></li>   
      </ul>
      <ul class="side-nav" id="mobile-demo">
        <li><a href="index.php">Clientes</a></li>
        <li><a href="cadastro.php">Cadastro</a></li>
        <li class="active"><a href="pedidos.php">Novos Pedidos</a></li>
      </ul>
    </div>
  </nav>
<div class="card">
    	<div class="container">
    	<div class="row">

			<div class="input-field col l12 m12 s12">

			<label for="busca"><i class="material-icons">search</i> Indique o nome do Cliente</label>
			<input type="text" id="busca" onblur="AtualizaInputs();">
			</div>
		</div>
		</div>


			<div class="row">
				<div class="divider"></div>
			</div>
			<br>
				<div class="container">
					<div class="row">


						<form action="p_novos.php" method="POST">
							
						    <div class="input-field col l12 m6 s12">
						        <label for="data_cadastro"><i class="material-icons">today</i> Data do Pedido</label>
						        <input type="date" class="datepicker" id="data_pedido" name="data_pedido" value	="<?=date('Y-m-d')?>">
						        <br>
						    </div>
						       <div class="input-field col l6 m6 s12">
						   	
			 				<select name="servicos" id="servicos" onchange="valorPedidos(this.value);" onmouseup="verValor();">
								<option value="0" disabled selected>Selecione um Serviço</option>
								<option value="Formatação Simples">Formatação Simples</option>
								<option value="Formatação com Backup">Formatação com Backup</option>
								<option value="Recuperação de Pendrive">Recuperação de Pendrive</option>
								<option value="Recuperação de HD">Recuperação de HD</option>
							</select>
							<label for="servicos">Serviços</label>
								</div>

								<div class="input-field col l6 m6 s12">
									<select name="recDados" id="rec" onchange="valorExtra(this.value)" onclick="verValor();">
										<option value="0" disabled selected>Sem Recuperação de Dados</option>
										<option value="REC - 2GB">REC - 2GB</option>
										<option value="REC - 8GB">REC - 8GB</option>
										<option value="REC - 16GB">REC - 16GB</option>
										<option value="REC - 16GBup">REC - 16GB+</option>
									</select>
									<label for="rec">Recuperação de Dados</label>
								</div>
								<div id="valor" style="display: none;" class="col s12 m12 l12" onchange="verValor();">
								</div>
								<div id="valor2" style="display: none;" class="col s12 m12 l12">
								</div>
								
								
								<div class="input-field col l3 m6 s12">
									<i class="material-icons prefix">credit_card</i>
									<input type="text" id="svalor" onmouseover="verValor();" name="valor" placeholder="...">
									<label for="svalor">Valor</label>
								</div>
								<div class="input-field col s12 m12 l12">
						          <i class="material-icons prefix">mode_edit</i>
						          <textarea id="obs" name="obs" class="materialize-textarea"></textarea>
						          <label for="obs">Observações</label>
						        </div>
								
								<div class="input-field col l12 m12 s12 right-align">
								 	<input type="hidden" id="nomep" name="nomep">
			 					 	<input type="submit" class="waves-effect waves-light btn" value="Fazer Pedido" >
			 					 	<br>
								</div>
								

			 			
			 					</form>
  	
  		</div>
	
	</div>
<br>
</div>
<footer class="page-footer  cyan accent-4">
  <div class="footer-copyright">
  <div class="container center">
  <strong>Desenvolvido por Seven Seas</strong>
  </div>
  </div>
</footer>
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
    <script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
  crossorigin="anonymous"></script>
    <script type="text/javascript" src="js/materialize.js"></script>
	<script type="text/javascript" src="js/custom2.js" charset="utf-8"></script>
<script>
	
</script>
<script>
	 function AtualizaInputs() {
    Materialize.updateTextFields();
  };
</script>
<script>
	$( document ).ready(function(){
		$('select').material_select();
		 $(".button-collapse").sideNav();
		 $('.datepicker').pickadate({
		    selectMonths: true, // Creates a dropdown to control month
		    selectYears: 15 // Creates a dropdown of 15 years to control year
		  });
		});
</script>
<script>
	function valorPedidos(str) {
    if (str == "") {
        document.getElementById("valor").innerHTML = "";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("valor").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","v_pedido.php?q="+str,true);
       

        xmlhttp.send();

    }
}
</script>
<script>
	function valorExtra(str) {
    if (str == "") {
        document.getElementById("valor2").innerHTML = "";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("valor2").innerHTML = this.responseText;
            }
        };
       
        xmlhttp.open("GET","e_pedido.php?e="+str,true);

        xmlhttp.send();

    }
}
</script>
<script>
	function verValor(){
		var valor1 = Number(document.getElementById("valor").innerHTML);
		var valor2 = Number(document.getElementById("valor2").innerHTML);
		$('#svalor').val(valor1+valor2);
	}
</script>
<script>
	function pegarDataAtual(){
   data = new Date();
   document.getElementById('data_pedido').value = data.getDay()+'/'+data.getMonth()+'/'+data.getFullYear();
}
</script>
</body>
</html>

e_pedido.php

<?php 

include 'conecta.php';

$e = strval($_GET['e']);


$sql = "SELECT * FROM tab_precos WHERE pedido = '$e'";
$result = mysqli_query($conn, $sql);


if (mysqli_num_rows($result) > 0){
    // output data of each row
    while($row = mysqli_fetch_assoc($result)) {
     $valor2 = $row['extra'];
   
        echo $valor2;
    }
} else {

     	echo 0;
}



mysqli_close($conn);
?>

v_pedido.php

<?php 

include 'conecta.php';

$q = strval($_GET['q']);

$sql = "SELECT * FROM tab_precos WHERE pedido = '".$q."'";
$result = mysqli_query($conn, $sql);

if (mysqli_num_rows($result) > 0){
    // output data of each row
    while($row = mysqli_fetch_assoc($result)) {
     $valor1 = $row['valor'];
   
        echo $valor1;
    }
} else {
     	echo 0;
}



mysqli_close($conn);
?>

Eziquiel · Março 7, 2017

Vamos lá!

Quais valores você precisa somar? (De quais elementos)

Entrar

Arquivado

javascript Como executar função assim que uma div se altera?

Recommended Posts

Deltazero 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eziquiel 96

Compartilhar este post

Link para o post

Compartilhar em outros sites

Javascript - Arredondar Valor para cima

PHP - Atualizar INPUT com função moeda

PHP - Atualizar INPUT com função moeda

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante