Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

winryzinha

add input condicional em javascript/PHP

Por , em Javascript

Recommended Posts

winryzinha    0

winryzinha
Postado

Bom dia pessoal,

 

tudo bem com vcs, tomara que sim.

 

estou fazendo um trabalho de graduação para informatização de uma biblioteca, e estou re-aprendendo PHP/MySQL e JavaScript, porém estou com a seguinte duvida:

 

Graças ao William que me ajudou mt na parte de JavaScript tenho uma função para validar inputs toda vez que o botao é clicado:

 

locacao.html (pagina do formulario de locação)

<html>
<head>
<title>LOCAÇÃO</title>
<script type="text/javascript" src="funcs.js"></script>
</head>
<body>
Locação de Acervo
<br><br>
<form name="cadastro" method="POST" action="locacao_vai.php">
  <table border="0">
    <tr>
      <td>codigo do cliente:</td>
      <td><input name="codcliente" id="codcliente" type="text" size="40" maxlength="40" onblur="validarDados('codcliente', document.getElementById('codcliente').value);" /></td>
      <td><div id="campo_codcliente"></div></td>
    </tr>
    <tr>
      <td>codigo 1:</td>
      <td><input name="codacervo1" type="text" size="40" maxlength="40" id="codacervo1" onblur="validarDados('codacervo1', document.getElementById('codacervo1').value);" /></td>
      <td><div id="campo_codacervo1"></div></td>
    </tr>
    <tr>
      <td>codigo 2:</td>
      <td><input name="codacervo2" type="text" size="40" maxlength="40" id="codacervo2" onblur="validarDados('codacervo2', document.getElementById('codacervo2').value);" /></td>
      <td><div id="campo_codacervo2"></div></td>
    </tr>
    <tr>
      <td>codigo 3:</td>
      <td><input name="codacervo3" type="text" size="40" maxlength="40" id="codacervo3" onblur="validarDados('codacervo3', document.getElementById('codacervo3').value);" /></td>
      <td><div id="campo_codacervo3"></div></td>
    </tr>
    <tr>
      <td>codigo 4:</td>
      <td><input name="codacervo4" type="text" size="40" maxlength="40" id="codacervo4" onblur="validarDados('codacervo4', document.getElementById('codacervo4').value);" /></td>
      <td><div id="campo_codacervo4"></div></td>
    </tr>
    <tr>
      <td><font face="verdana" size="1">codigo 5:</font></td>
      <td><input name="codacervo5" type="text" size="40" maxlength="40" id="codacervo5" onblur="validarDados('codacervo5', document.getElementById('codacervo5').value);" /></td>
      <td><div id="campo_codacervo5"></div></td>
    </tr>
    <tr>
      <td colspan="2">
          <input class="botao1" name="incluir" type="submit" value="cadastrar" />
          <input class="botao1" name="limpar" type="reset" value="Limpar" />

      </td>
    </tr>
  </table>
</form>
</body>
</html>

funcs.js

// Variável que receberá o objeto XMLHttpRequest
var req;
 
function validarDados(campo, valor) {
 
// Verificar o Browser
// Firefox, Google Chrome, Safari e outros
if(window.XMLHttpRequest) {
   req = new XMLHttpRequest();
}
// Internet Explorer
else if(window.ActiveXObject) {
   req = new ActiveXObject("Microsoft.XMLHTTP");
}
 
// Aqui vai o valor e o nome do campo que pediu a requisição.
var url = "validacao.php?campo="+campo+"&valor="+valor;
 
// Chamada do método open para processar a requisição
req.open("Get", url, true);
 
// Quando o objeto recebe o retorno, chamamos a seguinte função;
req.onreadystatechange = function() {
 
	// Exibe a mensagem "Verificando" enquanto carrega
	if(req.readyState == 1) {
		document.getElementById('campo_' + campo + '').innerHTML = '<font color="gray">Verificando...</font>';
	}
 
	// Verifica se o Ajax realizou todas as operações corretamente (essencial)
	if(req.readyState == 4 && req.status == 200) {
	
if( req.responseText=='<img src="erro.PNG">' )
    {
        var codigo = document.getElementById(campo)
        codigo.style.borderWidth = '1px';
        codigo.style.borderColor = '#fb8171';
        codigo.style.borderStyle = 'solid';
    }if( req.responseText=='<img src="ok.PNG">' ){
        var codigo = document.getElementById(campo)
        codigo.style.borderWidth = '1px';
        codigo.style.borderColor = '#79cc6c';
        codigo.style.borderStyle = 'solid';
    }if( req.responseText=='<img src="alerta.PNG">' ){
        var codigo = document.getElementById(campo)
        codigo.style.borderWidth = '1px';
        codigo.style.borderColor = '#fad04a';
        codigo.style.borderStyle = 'solid';
    }
	// Resposta retornada pelo validacao.php
	var resposta = req.responseText;
 
	// Abaixo colocamos a resposta na div do campo que fez a requisição
	document.getElementById('campo_'+ campo +'').innerHTML = resposta;
 }

}

req.send(null);
 
}

onde as imagens: ok.png = Confirmação, erro.png = Negação.

 

validacao.php (pagina de consulta ao BD MySQL, para validação dos campos)

<?php
// oculta erros do PHP
ini_set('display_errors', 0 );
error_reporting(0);
// Campo que fez requisição
$campo = $_GET['campo'];
// Valor do campo que fez requisição
$valor = $_GET['valor'];
// Conecta-se com o MySQL
$conexao = mysql_connect("localhost", "root", "");
// Seleciona banco de dados
mysql_select_db("banco");

$ok='<img src="ok.PNG">';
$erro='<img src="erro.PNG">';
$alerta='<img src="alerta.PNG">';
// Verificando o campo codcliente
if ($campo == "codcliente") {

if ($valor!=0){

        $sql = "SELECT * FROM aut_usuarios WHERE codigo=".$valor;//monto a query

        $q = mysql_query( $sql );//executo a query

        $n = mysql_num_rows( $q );

for ($i=0;$i<$n;$i++)
{
while($z = mysql_fetch_array($q))
{
$prof=$z["professor"]; // campo que confirma se o cliente é professor ou não 'S','N'
$locacao=$z["locacao"]; // quantas locaçoes o cliente pode fazer prof=max.5 e aluno=max.3
}
}

}else{$n=0;}

    if ($valor == "") {
	} elseif ($valor == 0) {
                echo $erro;
	} elseif( $n > 0 ){//se retornar algum resultado
                echo $ok;
    }else{
                echo $erro;
        }

}

// Verificando o campo codacervo1, no caso é o codigo do acervo informado na input

elseif (($campo == "codacervo1") or ($campo == "codacervo2") or ($campo == "codacervo3") or ($campo == "codacervo4") or ($campo == "codacervo5")) {

        $sql = "SELECT * FROM acervo WHERE codigo=".$valor;//monto a query

        $q = mysql_query( $sql );//executo a query

        $n = mysql_num_rows( $q );

	if ($valor == "") {
	} elseif( $n > 0 ){//se retornar algum resultado
                echo $ok;
    }else{
                echo $erro;
        }

}
header("Content-Type: text/html; charset=ISO-8859-1",true);
?>

bom, essas paginas fazem a função de: quando o usuario digitar o codigo do cliente no primeiro input, e esse cliente esta cadastrado, ele retorna ok e deixa o input com a borda verde, caso não, retorna erro e deixa o input vermelho. Locação de no maximo 5 acervos para professor e 3 para aluno.

porém minha duvida é: em que parte acrescento um código que inclui a quantidade de inputs igual ao valor da variavel $locacao, e como é a logica desse código, pois gostaria que, ao digitar o codigo do cliente, fizesse a consulta no BD e retornasse os inputs para ele fazer a locação, pois fica estranho ter 5 inputs na tela se o usuario aluno so puder alugar 3, ou se ele ja tiver alugado 2 e for alugar só 1

 

OBS: como vcs puderam ver, inclui uma imagem a mais na pagina PHP/JavaScript "alerta.PNG", e gostaria de fazer uma função em PHP que exibi ela quando o acervo digitado ja foi alugado, tentei incluir na parte do php, porém a variavel $campo muda de valor toda vez que um input entra em onblur na função javaScript. Para isso tem alguma função em JavaScript que armazena o valor do 1° input?

 

estou que nem uma loca estudando mas não conheço ninguem que entenda de javaScript para me dar uma ajuda. e a parte de lógica, em minha opnião, precisa ser transmitida na relação aluno/professor para ser entendida perfeitamente.

 

Se vcs puderem me ajudar eu agradeço mt.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Dá para simplificar as chamadas:

trocando os:

onblur="validarDados('codacervo5', document.getElementById('codacervo5').value);"
por apenas:

onblur="validarDados('codacervo5', this.value);"

não entendi onde está a variável $locacao

Esse script é para o empréstimo certo ?

o formulário vem em branco, e ai o aluno começa a preencher ele.. ne?!

 

Então o melhor, é você deixar apenas 1 linha de campos na tela.

E só se o usuário quiser, (clicando num botão: Adicionar campos), é que vai aparecendo mais...

 

Curiosidade, qual faculdade você faz? que curso?

ainda dá para melhorar bastante esse código, e simplificá-lo, se a idéia for repassar a terceiros, é bom que ele seja simples e funcional.

Compartilhar este post

Link para o post
Compartilhar em outros sites

winryzinha    0

winryzinha
Postado

Oii ^^, William qnt temp, tudo bem com você? tomara que sim.

 

Faço a Faculdade Simonsen, Rio de Janeiro, Padre Miguel,

no curso de Analista de Sistemas, e estou cursando o 2° periodo.

 

estou me preparando para a disciplina Projeto Final 6° periodo, onde terei que apresentar meu projeto.

 

sei que da para simplificar o codigo, porém faz um tempo que não mecho em PHP/MySql e não me lembro de todas as funções, e o código que coloquei aqui é só uma parte de um programa de biblioteca, sem organização e sem aplicação css.

 

vamos lá:

 

variavel $locacao

 

como havia falado, gostaria que fosse exibido somente o primeiro input (codigo do cliente), após isso o onblur envia para funcs.js, e faz a condição na pagina validacao.php e retorna a quantidades de inputs da variavel $locacao. esses inputs que retornam iram receber o (codigo do acervo).

 

essa variavel recebe o campo do BD que é responsável pelas locações feitas na biblioteca, exemplo: um aluno, quando cadastrado recebe o valor 3 no campo locacao do BD, ao alugar 1 acervo é subtraido 1 desse campo, e assim sucessivamente ocasionando a diminuição dos inputs. porém, a biblioteca possui alunos e professores, onde os professores tem mais beneficios, dentre eles poder alugar 5 acervos (5 inputs).

 

botão Adicionar inputs

 

realmente, havia pensado nessa possibilidade, porém vou continuar tentando fazer nesse método onblur de retorno de inputs (achei mais prático e rápido), se não der, vou procurar um script para inclusão via botão mesmo.

 

Se você puder me auxiliar eu agradeço.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito