Recuperar campos do formulário com javascript

carecazn · 17 de fevereiro de 2017

Bom dia, estou tentando fazer um carrinho de compras e gostaria de pegar o valor do input automaticamente

<script>
function calc_total () {
  var qtd = parseInt(document.getElementById('cQtd').value);
  var vuni = document.getElementById('vUni').value;
  var tot = qtd * vuni;
  document.getElementById('cTot').value = tot;
}
</script>

<form method="post" id="fContato" action="" oninput="calc_total();">
  <tr>
    <td><img style="width:50px; height:50px;" class="img-produto" src="<?= BASE; ?>/img/512228.jpg" alt="" /></td>
    <td class="text-left">Aliança Rommanel Estilizada</td>
    <td>512228</td>
    <td><input id="cQtd" class="carr-quant text-center" min="1" max="100" type="number" value="1"></td>
    <td id="vUni">R$ 230,00</td>
    <td id="cTot" readonly></td>
    <td><a href=""><i class="fa fa-times fa-2x remove" aria-hidden="true"></i></a></td>
  </tr>
</form>

Esta exatamente assim, porém ,não esta funcionando e se não deixar esta parte chamando no formulário é ainda melhor, pois ainda quero fazer a outra parte que seria colocar a soma de todos os valores para fazer o total da compra, o campo acima é apenas caso o Cliente escolha apenas um produto, porém, ele pode escolher mais de um e então faria a mesma compra e depois no final do formulário teria a soma de todos os valores.

DiF · 17 de fevereiro de 2017

@carecazn Olá,

O problema maior aí é quando se tem mais de um produto no carrinho. Você vai precisar de vetores.... Mas na minha opinião pessoal, você será mais feliz se fizer o seu carrinho de compras com sessions em php e ajax(javascript)

carecazn · 17 de fevereiro de 2017

45 minutos atrás, DiF disse:

@carecazn Olá,

O problema maior aí é quando se tem mais de um produto no carrinho. Você vai precisar de vetores.... Mas na minha opinião pessoal, você será mais feliz se fizer o seu carrinho de compras com sessions em php e ajax(javascript)

Boa tarde @DiF, pode ser, estou procurando uma parceria para este projeto, rsrsrsrsrsrs, se você se interessar.

No caso, de SESSION com Javascript ele também vai somar os valores dos produtos conforme eu for mudando eles?

DiF · 17 de fevereiro de 2017

@carecazn

1 hora atrás, carecazn disse:

u procurando uma parceria para este projeto, rsrsrsrsrsrs, se você se interessar.

Olá, obrigado pela oferta, temos uma área específica para este assunto!

1 hora atrás, carecazn disse:

No caso, de SESSION com Javascript ele também vai somar os valores dos produtos conforme eu for mudando eles?

Sim, mas não é especificamente com javascript.

A session é usada no php. o javascript nesse caso seria só a requisição assíncrona do arquivo php que será responsável por criar o array de produtos. Neste php você faz os cálculos .. então toda vez que fazer uma ação de inserir ou retirar produtos de um carrinho, você requisita o php responsável!

Lembro-me que na faculdade que fiz um trabalho de final de semestre que era um site de compras com carrinho funcional, até a parte de concluir compra.

Naquela época eu não utilizei ajax, então tive que fazer altas gambiarras

Se eu achar o meu trabalho aqui em alguma pasta... eu posso postar o básico do carrinho de compras.. e aí você pode implementar em cima dele o seu! Não vou garantir que vou achar.. rsrsrs são coisas antigas de quase 8 anos

carecazn · 17 de fevereiro de 2017

1 minuto atrás, DiF disse:

@carecazn

Olá, obrigado pela oferta, temos uma área específica para este assunto!

Sim, mas não é especificamente com javascript.

A session é usada no php. o javascript nesse caso seria só a requisição assíncrona do arquivo php que será responsável por criar o array de produtos. Neste php você faz os cálculos .. então toda vez que fazer uma ação de inserir ou retirar produtos de um carrinho, você requisita o php responsável!

Lembro-me que na faculdade que fiz um trabalho de final de semestre que era um site de compras com carrinho funcional, até a parte de concluir compra.

Naquela época eu não utilizei ajax, então tive que fazer altas gambiarras

Se eu achar o meu trabalho aqui em alguma pasta... eu posso postar o básico do carrinho de compras.. e aí você pode implementar em cima dele o seu! Não vou garantir que vou achar.. rsrsrs são coisas antigas de quase 8 anos

Rsrsrs, procura ai, vai que consegue achar, rsrsrsrsrsrs

DiF · 18 de fevereiro de 2017

@carecazn Felizmente, achei meus arquivos. Mas não vou posta-los completo porque é muita coisa, o código todo sujo sem comentários... Então vou postar só a parte que interessa para dar uma base para você entender!

Vamos lá.

A mágica toda acontece com um arquivo php chamado novaCompra.php.

Este arquivo será requisitado por ajax toda vez que inserir um produto no carrinho.

novaCompra.php

<?php 
    //Abre a sessão
	session_start();

    //Recupera o ID do produto por GET
	$cod = $_GET["cod"];

    //Testa se a sessão não estiver vazia
	if (!isset($_SESSION["numProdutos"])):
		$_SESSION["numProdutos"] = 1;
	else: 	
      //Faz um laço de for para percorrer o vetor de produtos
      for($i = 1; $i <= $_SESSION["numProdutos"]; $i++) :
        //Testa para ver se o produto já está incluso no carrinho
        if($cod == $_SESSION["vetorCodigo[$i]"] && $_SESSION["vetorQuant[$i]"] != 0 ) :
           echo "
					<script>
						alert('Este Produto já está no carrinho');
						window.location.href='carrinho.php';
					</script>
				";
			  exit;	
        endif;
      endfor;
      /*Não se pode fazer incremento com sessions. 
        Como $_SESSION['nomeProduto']++ 
        então deve ser desse jeito
         
      */
      $_SESSION["nomeProduto"] = $_SESSION["nomeProduto"] + 1;
	endif;	
	//obtem  código do produto passado por GET
	$cod = $_GET["cod"];
	
	//Obtém a variavel da SESSION
	$numProdutos = $_SESSION["numProdutos"];
	
	//cria vetores para os produtos colocados no carrinho
	$_SESSION["vetorCodigo[$numProdutos]"] = $cod;	
	$_SESSION["vetorQuant[$numProdutos]"] = 1;
	
    //inclui a conexao com o BD
	include("conecta.php");
 
    //SQL da compra
	$sql = "select produto,quant, preco from produtos where codigo = $cod";		
	
	$dados = mysqli_query($conexao, $sql);
	
	$linha = mysqli_fetch_object($dados);
	
	$_SESSION["vetorProduto[$numProdutos]"] = $linha->produto;
	$_SESSION["vetorPreco[$numProdutos]"] = $linha->preco;
	$_SESSION["vetorQuant[$numProdutos]"] = $linha->quant;
	$_SESSION["vetorEstoque[$numProdutos]"] = $linha->quant;
	
    //testa para ver se o vetor de quantidade está zerado
	if ($_SESSION["vetorQuant[$numProdutos]"] == 0):
			echo "
				<script>
					alert('não pode compra este produto no momento.');	
					history.go(-1);
				</script>";
			exit;	
   endif;	
?>

Comentei bloco a bloco para você entender.

Só fico na dúvida no final se o texto deve ser feito no vetor de quantidade ou de estoque para não permitir comprar.. por exemplo se o estoque for igual a zero, é porque o produto está indisponível.

Não lembro se eu testei isso na época. No código tá assim.. mas pode ser que tenha que fazer essa mudança.

Bom agora com o código que faz uma nova compra.. resgatar os dados seria só fazer assim:

<div id="produtosComprados">
   		<h2>Produtos</h2>
   	<table class="carrinho">
	     <tr>
	     	<th> Título </th>
	     	<th> Quant. </th>
	     	<th> Preço R$ </th>
	     	<th> Subtotal R$ </th>
	     </tr>
                
    <?php 
    //Inicializa o total   
    $total = 0;
    
    //Recupera a sessão de produtos  
    $itens = $_SESSION["numProdutos"];
  
    //Faz um laço de for para percorrer todos os produtos, quantidade e preços  
    for ($i=1; $i <= $itens; $i++) :
      
      //armazena em variáveis o produto, quantidade e preço de cada no vetor
      $titulo = $_SESSION["vetorProduto[$i]"];
      $quant  = $_SESSION["vetorQuant[$i]"];
      $preco  = $_SESSION["vetorPreco[$i]"];

      //testa se a quantidade for maior que zero.
      if ($quant > 0) :
        //imprime a linha de nome do produto na tabela
        echo "<tr><td> $titulo </td>";
        //imprime a linha de quantidade na tabela
        echo "<td> $quant";
      
        //formata o preço para formato monetário brasileiro
        $precof = number_format($preco, 2, ',', '.');
        //imprime o preço formatado 
        echo "<td> $precof </td>";
      
        //calcula o subtotal 
        $subtotal = $quant * $preco;
        
        //formata o subtotal para o formato monetário brasileiro
        $subtotalf = number_format($subtotal, 2, ',', '.');
      
        //imprime o subtotal formatado na tabela
        echo "<td> $subtotalf </td></tr>";
      
        //calcula o total da compra 
        $total = $total + $subtotal;
      endif;  
    endfor;
      
    //formata o total da compra no formato monetário brasileiro  
    $totalf = number_format($total, 2, ',', '.');
    
    //imprime a linha do total formatada  
    echo "<tr><td> Total R$: </td>";
    echo "<td> $totalf </td>";        
    
   	?>
   </table>

Deixei o mais comentado possível para entender como percorrer os vetores e criar uma "tabelinha" de produtos no carrinho com o subtotal e total da compra.

Espero que eles possam ser úteis para você implementar seu próprio carrinho de compras

carecazn · 20 de fevereiro de 2017

Em 18/02/2017 às 19:49, DiF disse:

@carecazn Felizmente, achei meus arquivos. Mas não vou posta-los completo porque é muita coisa, o código todo sujo sem comentários... Então vou postar só a parte que interessa para dar uma base para você entender!

Vamos lá.

A mágica toda acontece com um arquivo php chamado novaCompra.php.

Este arquivo será requisitado por ajax toda vez que inserir um produto no carrinho.

novaCompra.php


<?php 
    //Abre a sessão
	session_start();

    //Recupera o ID do produto por GET
	$cod = $_GET["cod"];

    //Testa se a sessão não estiver vazia
	if (!isset($_SESSION["numProdutos"])):
		$_SESSION["numProdutos"] = 1;
	else: 	
      //Faz um laço de for para percorrer o vetor de produtos
      for($i = 1; $i <= $_SESSION["numProdutos"]; $i++) :
        //Testa para ver se o produto já está incluso no carrinho
        if($cod == $_SESSION["vetorCodigo[$i]"] && $_SESSION["vetorQuant[$i]"] != 0 ) :
           echo "
					<script>
						alert('Este Produto já está no carrinho');
						window.location.href='carrinho.php';
					</script>
				";
			  exit;	
        endif;
      endfor;
      /*Não se pode fazer incremento com sessions. 
        Como $_SESSION['nomeProduto']++ 
        então deve ser desse jeito
         
      */
      $_SESSION["nomeProduto"] = $_SESSION["nomeProduto"] + 1;
	endif;	
	//obtem  código do produto passado por GET
	$cod = $_GET["cod"];
	
	//Obtém a variavel da SESSION
	$numProdutos = $_SESSION["numProdutos"];
	
	//cria vetores para os produtos colocados no carrinho
	$_SESSION["vetorCodigo[$numProdutos]"] = $cod;	
	$_SESSION["vetorQuant[$numProdutos]"] = 1;
	
    //inclui a conexao com o BD
	include("conecta.php");
 
    //SQL da compra
	$sql = "select produto,quant, preco from produtos where codigo = $cod";		
	
	$dados = mysqli_query($conexao, $sql);
	
	$linha = mysqli_fetch_object($dados);
	
	$_SESSION["vetorProduto[$numProdutos]"] = $linha->produto;
	$_SESSION["vetorPreco[$numProdutos]"] = $linha->preco;
	$_SESSION["vetorQuant[$numProdutos]"] = $linha->quant;
	$_SESSION["vetorEstoque[$numProdutos]"] = $linha->quant;
	
    //testa para ver se o vetor de quantidade está zerado
	if ($_SESSION["vetorQuant[$numProdutos]"] == 0):
			echo "
				<script>
					alert('não pode compra este produto no momento.');	
					history.go(-1);
				</script>";
			exit;	
   endif;	
?>

Comentei bloco a bloco para você entender.

Só fico na dúvida no final se o texto deve ser feito no vetor de quantidade ou de estoque para não permitir comprar.. por exemplo se o estoque for igual a zero, é porque o produto está indisponível.

Não lembro se eu testei isso na época. No código tá assim.. mas pode ser que tenha que fazer essa mudança.

Bom agora com o código que faz uma nova compra.. resgatar os dados seria só fazer assim:


<div id="produtosComprados">
   		<h2>Produtos</h2>
   	<table class="carrinho">
	     <tr>
	     	<th> Título </th>
	     	<th> Quant. </th>
	     	<th> Preço R$ </th>
	     	<th> Subtotal R$ </th>
	     </tr>
                
    <?php 
    //Inicializa o total   
    $total = 0;
    
    //Recupera a sessão de produtos  
    $itens = $_SESSION["numProdutos"];
  
    //Faz um laço de for para percorrer todos os produtos, quantidade e preços  
    for ($i=1; $i <= $itens; $i++) :
      
      //armazena em variáveis o produto, quantidade e preço de cada no vetor
      $titulo = $_SESSION["vetorProduto[$i]"];
      $quant  = $_SESSION["vetorQuant[$i]"];
      $preco  = $_SESSION["vetorPreco[$i]"];

      //testa se a quantidade for maior que zero.
      if ($quant > 0) :
        //imprime a linha de nome do produto na tabela
        echo "<tr><td> $titulo </td>";
        //imprime a linha de quantidade na tabela
        echo "<td> $quant";
      
        //formata o preço para formato monetário brasileiro
        $precof = number_format($preco, 2, ',', '.');
        //imprime o preço formatado 
        echo "<td> $precof </td>";
      
        //calcula o subtotal 
        $subtotal = $quant * $preco;
        
        //formata o subtotal para o formato monetário brasileiro
        $subtotalf = number_format($subtotal, 2, ',', '.');
      
        //imprime o subtotal formatado na tabela
        echo "<td> $subtotalf </td></tr>";
      
        //calcula o total da compra 
        $total = $total + $subtotal;
      endif;  
    endfor;
      
    //formata o total da compra no formato monetário brasileiro  
    $totalf = number_format($total, 2, ',', '.');
    
    //imprime a linha do total formatada  
    echo "<tr><td> Total R$: </td>";
    echo "<td> $totalf </td>";        
    
   	?>
   </table>

Deixei o mais comentado possível para entender como percorrer os vetores e criar uma "tabelinha" de produtos no carrinho com o subtotal e total da compra.

Espero que eles possam ser úteis para você implementar seu próprio carrinho de compras

Muito obrigado @DiF! Vou estudar bastante e vou implementar com certeza.

Consegui colocar o cep para preencher os campos automaticamente na parte de cadastro (Acho que você lembra que não sou muito chegado no jQuery, rsrsrsrsrsrs, mas, fazer o que né, não vou conseguir fugir dele muito tempo, então...), vou estudar também para colocar os valores de frete também, ja consegui recuperar os valores, agora preciso pensar em como colocar para ficar com o código limpo.

Estou muito preocupado com a segurança do projeto! Estou filtrando todas as entradas da dados, até os pensamentos, rsrsrsrsrsrsrsrs.

carecazn · 26 de fevereiro de 2017

@DiF, dif, fiz como esta abaixo, porém, ficou com alguns probleminhas, quando eu clico em comprar do jeito que esta, ele enviar todos os produtos do banco de dados, no meu caso eu cadastrei 3 produtos, quando estava com 1 só estava perfeito, rsrsrsrsrsrs, então fiz mais 2 cadastros para testar e o terror começou, rsrsrsrsrsrs

caso eu tire o comprar do while ele envia sempre o mesmo produto o 1, e do jeito que esta ele envia todos, como se eu tivesse clicado em comprar os 3 de uma só ves.

No caso, quando clico nos detalhes do jeito em que esta ele pega sempre o último, e se tiro do while, pega sempre o primeiro.

Acredito que seja tranquilo de se resolver, porém, não enxergo a solução.

<form action="" method="post" enctype="multipart/form-data">
<?php
$produtos = new Produtos;
$dados = $produtos->listarProdutosLoja('loja_produtos', "WHERE loja_tipo = 'alianca'");
$busca = new ArrayIterator($dados);

while($busca->valid()):

if(isset($_POST['comprar'])){
	
	$produto = new Carrinho;
	$produto->setId((int)$busca->current()->id_produto);
	$produto->adicionar();
	//header( 'Location: '.BASE.'/carrinho-de-compras' );
	
	echo '<pre>';
	var_dump($_SESSION["produto"]);
	echo '</pre>';
	
}

if(isset($_POST['detalhes'])){
	
 $_SESSION["referencia"] = $busca->current()->loja_ref; 
 //header( 'Location: '.BASE.'/detalhes' );
 
	echo '<pre>';
	var_dump($_SESSION["referencia"]);
	echo '</pre>';
	
}

?>

  <div class="col-xs-6 col-sm-3 col-md-2 produto">
    <div class="thumbnail box">
      <a href="<?= BASE; ?>/img/<?= $busca->current()->loja_imagem; ?>" title="<?= $busca->current()->loja_produto; ?>" rel="shadowbox;width=500;height=500">
				<img src="<?= BASE; ?>/tim.php?src=img/<?= $busca->current()->loja_imagem; ?>&w=100&h=100&zc=0&q=100" class="img-produto" title="" alt="">
			</a>
      <div class="caption">
        <h1 class="text-center"><?= $busca->current()->loja_produto; ?></h1>
				<p class="price">
				<span class="ref">Referência: <?= $busca->current()->loja_ref; ?></span><br />
				<span class="price-old">De <s>R$ <?= number_format($busca->current()->loja_valor,2,",","."); ?></s></span><br />
				<span class="price-new">Por R$ <?= number_format($busca->current()->loja_valor_p,2,",","."); ?></span>
				</p>
				
				<button type="submit" name="detalhes" class="btn btn-link">Detalhes</button>
				
        <button type="submit" name="comprar" class="btn btn-primary center-block" role="button">
				<span class="glyphicon glyphicon-shopping-cart"></span>
				Comprar
				</button>

      </div>
    </div>
  </div>

<?php
$busca->next();
endwhile;
?>
</form>