Jump to content
wellingtonmelo

inserir valor numerico em 3 inputs e diminuir valor em outro

Recommended Posts

Olá turma, beleza?

 

Tenho bom conhecimento em HTML, CSS, mas não sei fazer coisas dinâmicas com javascript, jquary etc.

 

Eu estou montando um projeto, estou responsável pelo design e um amigo pela programação.

 

A página do produto vende em grosso, ao invés de adicionar 1 produto ao carrinho, adiciona 12.

 

Desses 12, precisa definir os tamanhos das sandálias, são 3 tamanhos disponíveis.

35/36

37/38

39/40

Dai o usuário precisa dizer quantos pares de cada tamanho ele deseja, precisa fechar em 12.

Montei o HTML com bootstrap, ficou assim:

 

O usuário insere a quantidade e o campo QNT DISPONIVEL subtrai o valor do 12, exemplo:

QNT DISPONIVEL: 9

35/36 = 3

37/38 =

39/40 =

 

QNT DISPONIVEL: 4

35/36 = 3

37/38 = 5

39/40 =

 

QNT DISPONIVEL: 0

35/36 = 3

37/38 = 5

39/40 = 4

 

E se não for pedir demais, alguma limitação para o usuário não poder inserir um valor maior que o permitido. Algum ninja do javascript ou outra linguagem consegue me dar uma dica sobre isso? Realmente não sei javascript.

 

modelo.jpg.cdb66208677ed27eb999854ee24395c3.jpg

 

Segue o código que estou utilizando:

  <div class="form-contato">
    <form action="" method="post" name="formcontato" onSubmit="return validar();" class="form-horizontal">
    <script language="JavaScript" src="javascripts/cadastro.js" type="text/javascript"></script>

      <div class="form-group">
        <label for="inputEmail3" class="col-sm-3 control-label" style="font-family: Lato, sans-serif!important;">QNT. DISPONÍVEL</label>
        <div class="col-sm-9">
          <input type="number" class="form-control" id="cad_nome2" value="12" name="cad_nome" size="2" disabled>
        </div>
      </div>
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-3 control-label" style="font-family: Lato, sans-serif!important;">Tamanho 35/36</label>
        <div class="col-sm-9">
          <input type="number" class="form-control" id="cad_sobrenome" name="cad_sobrenome" size="2" placeholder="Informe a quantidade...">
        </div>
      </div>
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-3 control-label" style="font-family: Lato, sans-serif!important;">Tamanho 37/38</label>
        <div class="col-sm-9">
          <input type="number" class="form-control" id="cad_sobrenome" name="cad_sobrenome" size="2" placeholder="Informe a quantidade...">
        </div>
      </div>
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-3 control-label" style="font-family: Lato, sans-serif!important;">Tamanho 39/40</label>
        <div class="col-sm-9">
          <input type="number" class="form-control" id="cad_sobrenome" name="cad_sobrenome" size="2" placeholder="Informe a quantidade...">
        </div>
      </div>

    </form>
    
	<br><br>
	<div class="btn-group">
		<div class="adicionar-ao-carrinho">
		{botao}
		</div>
	</div>
</div>

 

Gratidão!!!

Share this post


Link to post
Share on other sites

Olá amigo, obrigado por sua ajuda,  de verdade!!!

 

Eu acessei o link com o exemplo que você fez, mas não sei ao certo, o valor subtrai da coluna "QNT. DISPONÍVEL" ?

 

Preciso colocar no meu servidor para testar?

 

Gratidão demais!!!

Share this post


Link to post
Share on other sites
39 minutos atrás, wanderval disse:

Agora entendi, essa implementação que fiz não ira suprir esse problema, vou alterar a lógica

 

Gratidão amigo!!!

 

Funções dinâmicas me quebram as pernas! rs

Share this post


Link to post
Share on other sites

Olá amigo Wanderval, beleza?

 

Olha, eu consegui um script e estou testando, segue o código:

<script type="text/javascript">
	function clicar() {
		var num1 = document.querySelector(".num1").value;
		var num2 = document.querySelector(".num2").value;
		var num3 = document.querySelector(".num3").value;
		var num4 = document.querySelector(".num4").value;
		    
		var resultado = parseInt(num1) - parseInt(num2) - parseInt(num3) - parseInt(num4);
		document.querySelector(".resultado").innerHTML = resultado;
	}	
</script>


<style type="text/css">
	.num1{ float: right; width: 70%}
	.num2{ float: right; width: 70%}
	.num3{ float: right; width: 70%}
	.num4{ float: right; width: 70%}
	.resultado{ float: right; width: 70%}
</style>


QNT. DISPONÍVEL:<input class="num1" type="number" value="12" disabled><br><br>

Tamanho 35/36:	<input class="num2" type="number"><br><br>

Tamanho 37/38:	<input class="num3" type="number"><br><br>

Tamanho 39/40:	<input class="num4" type="number"><br><br>

RESTAM:	<div class="resultado"></div>


<button onclick="clicar()">Resultado</button>

Está fazendo a subtração do total (12), e mostrando quanto que resta.

 

Porém, o meu amigo, outro piorque eu, programador meia boca que esta trabalhando comigo, disse que precisa que esse resultado apareça dentro de um input com disabled.

 

Vi alguns script que ensinam a exibir a div dentro de um input, porém não consegui replicar.

 

Preciso que o conteúdo da div:

<div class="resultado"></div>

 

Apareça dentro de um input, exemplo:

<input class="num4" type="text" value="<div class="resultado"></div>">

 

Sabe fazer isso amigo?

 

Abraço!!

Obrigado!!

 

OBS: Link onde estamos montando: http://spaflex.com.br/index.php?p=produto&amp;id=200043&amp;site=ad49f8e1bf4d27941b6051d14376304d4

 

 

 

Share this post


Link to post
Share on other sites

Olá wellingtonmelo,

 

Andei afastado do forum, mas vou dar aqui minha opnião:

 

Esse código abaixo na minha opnião está errado ou pode-se chamar de uma gambiarra muito estranha, e porque digo isso a propriedade "value" pode receber qualquer dado no formato string, mas ela é mais usada para atribuir um valor "qualitativo ou quantitativo" colocar um elemento DOM que é a tag 'div' só iria aumentar o trabalhar para limpar o dado no script.

<input class="num4" type="text" value="<div class='resultado'></div>"/>

O que seu parceiro programador disse sobre usar um "input" em formato disabled é uma das opções, nesse caso sendo um input ele tem a propriedade "value", hoje no link do seu site o input com a label "Total de Pares" recebe a propriedade "readonly", essa propriedade difere da propriedade "disabled" sendo que não tem seu estilo alterado mais somente perde a funcionalidade de "input de dados"

<input id="resultado" type="number" readonly="">

Mas existem outras opções quando se deseja apenas exibir os dados que foi o que JoaoVituBR fez usando apenas uma "div", diferente do elemento input que tem seu valor manipulado pela propriedade "value", o elemento "div, span, p e outro element type text" podem ser manipulados com inserção de valor  entre as tags ex: <div>manipular o valor aqui</div>, que é exatamente o que o joão fez

<div class="resultado">12</div>

 

Obs: Resumindo a lógica feita pelo JoaoVituBR está funcionando para o que foi proposto, mas existe um conflito hoje entre o seu site e a implementação desse código que é:

 

input "QTD. DISPONÍVEL":

 -site: o valor desse input é subtraído a cada inserção nos inputs de pares

- código postado: ele mantém o valor de quantidade é altera o valor de um input com label "RESTAM"

 

input "RESTAM"

 - código postado: so existe nesse código

 

input "TOTAL DE PARES"

 -site: esse input tem o seu valor alterado a cada subtração da quantidade disponível.

 

então mesmo que o código do JoaoVituBR esteja correto, você precisa confirmar o cenário que você deseja, jáque hoje na minha visão estão conflitando em 2 cenários diferentes, sendo o do seu ultimo código postado e o atual no respectivo site.  

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Renan Leite
      Fala pessoal, Estou utilizando grunt + babel para compilar meu código, acontece que minhas pastas estão organizadas da seguinte maneira.
      - pasta1 - amd -src - arquivo.js - pasta2 - amd -src - arquivo.js - pasta3 -subpasta3 - amd - src -arquivo.js E eu só consigo usar o babel de uma forma muito específico, por exemplo:
      grunt.initConfig({ babel: { options: { sourceMap: false, presets: ['env'] }, dist: { files: [{ expand: true, cwd: './pasta1/amd/src', // aqui so especifico a pasta1 src: ['*.js'], dest: '.pasta1/amd/babel/' // aqui so especifico a pasta1 }] } } Eu queria que ele rodasse em todas as pastas amd/src e gerasse dentro da propria pasta src/ os arquivos compilados pelo babel, já tentei o seguinte:
      grunt.initConfig({ babel: { options: { sourceMap: false, presets: ['env'] }, dist: { files: [{ expand: true, cwd: '**/amd/src', src: ['*.js'], dest: '**/amd/babel/' }] } } CWD: Não sei porque nao funciona, a ideia era pegar todas as pastas que contem as pastas amd/src e tornar isso a base
      DEST: nessa parte eu não faço ideia de como deixar o dest (pasta babel/ gerada) exatamente dentro da pasta que está o src, por exemplo... dentro de pasta1/src criar a pasta babel/ com todos arquivos .js compilados da pasta1, dentro de pasta2/src criar a pasta babel/ com todos arquivos .js compilados da pasta2
    • By thgsousa312
      uma função que recebe uma frase e uma palavra antiga e uma palavra nova. A função deve retornar uma string contendo a frase original, mas com a última ocorrência da palavra antiga substituída pela palavra nova. A entrada e saída de dados deve ser feita no programa principal. Exemplo:  
      Frase: “Quem parte e reparte fica com a maior parte”
      Palavra antiga: “parte”  Palavra nova: “parcela”
      Resultado a ser impresso no programa principal: “Quem parte e reparte fica com a maior parcela”
       
      function trocarNome(){
              
          var frase = document.getElementById("frase").value;
          var strAntiga = document.getElementById("strAntiga").value;
          var strNova = document.getElementById("strNova").value;
          //frase = frase.split(" ");
          var a = frase.lastIndexOf(strAntiga);
          var fras2 = frase.lastIndexOf(strAntiga).replace(strAntiga,strNova);
          document.getElementById("demo").innerHTML = "Certo";
      }
    • By Tuzzolino
      Boa tarde gente,
       
       
      Estou fazendo  um site  e  na hora que eu vou compartilhar ele no whatsapp  ele tá pegando o link corretamente mas ao invés de aparecer o titulo aparece somente o description  e não pega a miniatura da imagem  alguém tem algum exemplo de como  deveria ser ?
       
       
      A  imagem  é carregada assim 
       
      <amp-img height="320" width="470" id="img" src="890x610.jpg" layout="responsive" class="i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-layout" i-amphtml-layout="responsive"><i-amphtml-sizer style="padding-top: 68.0851%;"></i-amphtml-sizer><img decoding="async" amp-img-id="img" src="890x610.jpg" class="i-amphtml-fill-content i-amphtml-replaced-content"></amp-img>  
    • By prometheusz
      Amigos bom dia, sou novo aqui
      Tenho a seguinte tabela  :
       
       
      gostaria de capturar os ids quando fosse clicado no botão pegar valor do codigo porem do jeito que fiz ele só captura o 88 nao importa qual mlinha eu clique ele so captura o numero 88
       
      codigo:

       
      <script> $(function () { $(document).on('click', '.btn-danger', function (e) { e.preventDefault; var codigo =document.getElementsByTagName('th')[5].innerHTML; alert(codigo) }); }); </script> <?php while ($dado = ibase_fetch_object($consulta_retorno)){ ?> <tr> <th data-title="ID"><?php echo ($dado->ID)?> </th> <td data-title="Nome"><?php echo utf8_encode($dado->NOME)?></td> <td data-title="DataCompra"><?php echo date("d/m/Y", strtotime($dado->DATACOMPRA))?></td> <td data-title="Email"><?php echo utf8_encode($dado->EMAIL)?></td> <td> <button class="btn-danger">Pegar Valor do Código</button></td> </tr> <?php }?>  
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.