Publicado em 4 de mar.

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

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>

 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);
?>

Discussão (1)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...