Clica no item e adiciona no formulario

José da Silvasauro · Agosto 25, 2012

Gente estou com um projeto parecido com um de ecomerce, mas não no mesmo "esquema" os produtos são diferenciados então não da para deixar naquele sistema de compras.

Pensando nisso tive a ideia de cada produto ter um número especifico, e quando a pessoa clica no produto adiciona sua ID em um formulario onde depois eu entro em contato para negociar, pois não haverá preço e nada.

O que quero fazer é basicamente isso, a pessoa clique e em um campo do formulario vai sendo preenchido automaticamente com o codigo de cada produto escolhido.

É possivel? Como?

Agradeço desde já.

Edit: Tentando explicar melhor:

Imaginas que são varios produtos cada um deles representados por um codigo, exemplo produto 1 - codigo 1. Logo abaixo um formulario pedindo os codigos dos produtos desejados.

Para facilitar isso gostaria que ao clicar no produto automaticamente o codigo dele apareceria no formulario.

Lucas Guima · Agosto 25, 2012

Ah, sim. Basta colocar um evento no clique do produto e dentro dele, pegar o preço daquele produto e setar o valor do form com esse preço.

Se você não manja, deve procurar por eventos em JS. Por captura de valor de um campo. E por atribuição de valor a um campo.

José da Silvasauro · Agosto 26, 2012

Estou com muita dificuldade em encontrar algo que faça isso, passe uma palavra mais especifica para eu encontrar a solução em minhas pesquisas.

Gente estou desesperado atras disso, fiz um modelo para tentar explicar melhor.

Eu procurei eventos de JS como já falaram aqui mas não achei nada que fizesse isso, e uns que cada para substituir não consegui aplicar para essa maneira.

MafnGamer · Agosto 26, 2012

Cara dá para fazer isso com Jquery, é só você botar que quando clicar se adicione um iten ao formulário. :thumbsup:

José da Silvasauro · Agosto 26, 2012

Mas como encontro esse plugin? Por favor passe um nome mais direto para que eu possa encontrar, estou pesquisando mas esta aparecendo coisas totalmente diferentes!

MafnGamer · Agosto 26, 2012

Mano é só você entrar no jquery.com, você não vai achar a solução pronta, vai ter que formar usando os recursos do jquery. :thumbsup:

José da Silvasauro · Agosto 26, 2012

É isso que eu não sei, meu conhecimento é muito pouco mas estou tentando recriar. Porem nada se enquadra nisso! Estou desesperado procurando isso sem parar desde ontem, me ajude!

Edit: Ai encontrei esse post ( http://forum.imasters.com.br/topic/424263-preenchimento-de-textarea-com-jquery/ ) E queria saber como faço para que está ação so aconteça assim que clico no link, e como fazer para que entre novos textos sem apagar o anterior?

MafnGamer · Agosto 26, 2012

Se você tiver entendido o tópico do link que você me passou use o seguinte código:

<script type="text/javascript">
               $(document).ready(function(){
                       $("link").click(function () {
                           //aqui vai o código para adicionar no textarea
                       }
               })
</script>

Também não se esqueça de linkar o jquery em sua página. :thumbsup:

José da Silvasauro · Agosto 26, 2012

Seria assim?

<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.0.min.js'></script>
<script type="text/javascript">
               $(document).ready(function(){
                       $("link").click(function () {
                           $(document).ready(function(){
       $("textarea[name='conteudo']").val('ae');
});

                       }
               })
</script>

Não esta dando certo, como coloco o script aki dentro?

Marcos Xavier · Agosto 27, 2012

Posta o html pra gente.

Segue o exemplo que vai funcionar.


<script type="text/javascript">
    $(document).ready(function(){
         $(".link").click(function(){ 
               $("#cont").val('ae');
          });
               });
</script> 

<a class="link" href="#">Clique</a>
<input name="cont" id="cont" />

José da Silvasauro · Agosto 27, 2012


<body>
<div id="container">

   	<div id="header">    	
       	<div class="esquerda">
	<img src="imagens/logo.png" />
           </div>         
           <div class="direita">
               <div id="infos">
                   <h1>Texto </h1>
                   <p>Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto </p>
                   <p><a href="#formulario" style="font-weight:bold; color:#009900;">Ir para o formulário de compra.</a></p>
               </div>
               <ul id="filter">
                   <li><a href="#">categorias</a></li>
                   <li><a href="#">categorias</a></li>
                   <li><a href="#">categorias</a></li>
                   <li class="current"><a href="#">todos</a></li>     
         		</ul>
       	</div>      	
       </div>

     	<div id="content">

         <ul id="produtos">

		  <li class="categorias">              
             	<img src="produtos/produto.png" />
               <h5>Aloe Fleur de Jouvence</h5>
			<p>Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto /p>
			<p class="codigo">Cód. 41.</p>
             </li> 

                <li class="categorias">              
             	<img src="produtos/produto.png" />
               <h5>Aloe Fleur de Jouvence</h5>
			<p>Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto /p>
			<p class="codigo">Cód. 41.</p>
             </li> 

 <li class="categorias">              
             	<img src="produtos/produto.png" />
               <h5>Aloe Fleur de Jouvence</h5>
			<p>Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto /p>
			<p class="codigo">Cód. 41.</p>
             </li> 

         </ul>

       </div>

       <div class="clear">

       </div>

   </div>

   <div id="rodape">
   	<div id="infosrodape">
       	<div id="contato">
           	<h2>Encomende sua compra:</h2>
               <p class="contato">Preencha o formulário abaixo com seus dados e o códigos dos produtos desejados, que será enviado um email com as informações necessarias para negociação.</p>
               <p align="left" style="color:#26B04F; font-weight:bold;">Campos com * são obrigatórios.</p>
           <div id="formulario">
           <div id="form1">
<form action="form.php" method="post" name="dados" onSubmit="return enviardados();" />
<li>*Nome completo:<label>
<input type="text" name="tx_nome" id="tx_nome" style="width:270px;" /></label></li>
<li>*Telefone:<label>
<input type="text" name="tx_telefone" id="tx_telefone" style="width:270px;" /></label></li>
<li>Celular:<label>
<input type="text" name="tx_celular" id="tx_celular" style="width:270px;" /></label></li>
<li>*Email:<label>
<input type="text" name="tx_email" id="tx_email" style="width:270px;" /></label></li>
<li>*Estado:<label>
<input type="text" name="tx_estado" id="tx_estado" style="width:270px;" /></label></li>
<li>*Cidade:<label>
<input type="text" name="tx_cidade" id="tx_cidade" style="width:270px;" /></label></li>
<li>*Endereço:<label>
<input type="text" name="tx_endereco" id="tx_endereco" style="width:270px;" /></label></li>
           </div>
           <div id="form2">
<li>*Cep:<label>
<input type="text" name="tx_cep" id="tx_cep" style="width:270px;" /></label></li>
<li>*Produtos desejados: (apenas os códigos)<label>
<textarea name="tx_produtos" id="tx_produtos" cols="45" rows="5" style="width:270px; height:87px;" >
</textarea></label></li>
<li>Observações:<label>
<input type="text" name="tx_obs" id="tx_obs" style="width:270px;" /></label></li>
<div style="text-align:center; margin-top:10px;"><label><input type="submit" name="Submit" id="Submit" style="width:270px; margin:auto; text-align:center; margin-top:5px; cursor:pointer;" value="Enviar pedido" /></label></div>
           </div>
</form>
           </div>
               <p class="contato">© 2012 copy</p>
           </div>
         <div id="top">
               <ul>
                   <li style="text-align:right; color:#26B04F; margin-top:100px; font-weight:bold; font-size:15px;"><a href="#">Voltar ao topo</a></li>
               </ul>
         </div>
       </div>
   </div>
</body>
</html>

Não funcionou o anterior.

Marcos Xavier · Agosto 27, 2012

Dá pra fazer mais ou menos assim.

<script type="text/javascript">
$(document).ready(function(){
$("p.texto").ready(function(){          		  
    $(".link").click(function(){                 
	   $("#cont").val($('.codigo').html());				
       });		  
});	  
});
</script> 

//HTML

<ul id="produtos">

       <li class="categorias">              
       <img src="produtos/produto.png" />
       <h5>Aloe Fleur de Jouvence</h5>
       <p class="texto">Produto1</p>
       <p class="codigo">Cód. 40.</p>
<a class="link" href="#">ADICIONAR</a>
 </li>

Porém desta forma se tiver outros códigos (cod 41,cod 41 etc) ele só vai pegar o primeiro código (no caso 40).

Precisa agora encontrar um meio de fazer tipo um foreach do PHP (pra verificar outros).

Qualquer coisa posto aqui.

José da Silvasauro · Agosto 27, 2012

Seria possivel colocar varios codigos desse para ir acrecentando mais e mais?

Edit: Ahhh consegui fazer com que funcione com varios, mas acontece aquilo de apagar o anterior...

Edit: Olha o codigo atual para ver o que consegui ate agora.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.0.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
       $("p.texto").ready(function(){                            
           $(".link").click(function(){                 
                  $("#cont").val($('.cod').html());                     
       });               
       });       
});
</script> 

<script type="text/javascript">
$(document).ready(function(){
       $("p.dsa").ready(function(){                            
           $(".prod").click(function(){                 
                  $("#cont").val($('.codigo').html());                     
       });               
       });       
});
</script>  
<style>
img { 
border:4px solid #CCCCCC;
margin:4px 0;
display: block;  
}
img:hover, img:focus {
border-color:#26B04F;
}
</style>
</head>

<body>
<div style="width:450px; margin:auto;">
<div style="float:left;">
<a href="#" class="link"><img src="Aure-Blue.png" width="200" height="200" /></a>
<p class="texto">Produto1</p>
       <p class="cod">Cód. 40. </p>
       </div>
<div style="float:right;">
<a href="#" class="prod"><img src="Aure-Blue.png" width="200" height="200" /></a>
<p class="dsa">Produto1</p>
       <p class="codigo">Cód. 454. </p>
       </div>
<div style="margin:auto;">
<form id="form1" name="form1" method="post" action="">
 <label>
 <textarea name="conteudo" id="cont" cols="45" rows="5"></textarea>
 </label>
</form>
</div>
</div>
</body>
</html>

MafnGamer · Agosto 27, 2012

Dá um jeito de fazer com que o valor seja somado com o que já está no textarea. :thumbsup:

Arquivado

Clica no item e adiciona no formulario

Recommended Posts

José da Silvasauro 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Guima 164

Compartilhar este post

Link para o post

Compartilhar em outros sites

José da Silvasauro 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

MafnGamer 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

José da Silvasauro 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

MafnGamer 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

José da Silvasauro 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

MafnGamer 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

José da Silvasauro 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcos Xavier 189

Compartilhar este post

Link para o post

Compartilhar em outros sites

José da Silvasauro 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcos Xavier 189

Compartilhar este post

Link para o post

Compartilhar em outros sites

José da Silvasauro 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

MafnGamer 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

Sound Designer

Orientação - Jav + MySql

Alteracao Tema Wordpress Profolio

Fóruns

Tempo Real

Informação importante