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 ckcesar
      Galera alguém pode me ajudar, eu gerei uma Build com AngularCli e tento rodar ela com o Cordova e ao inspecionar no Chrome me retorna o seguinte erro no console:
      main-es2015.7678d805abc29502169b.js:1 Service worker registration failed with: TypeError: Failed to register a ServiceWorker: The URL protocol of the current origin ('file://') is not supported. at g._next (main-es2015.7678d805abc29502169b.js:1) at g.__tryOrUnsub (main-es2015.7678d805abc29502169b.js:1) at g.next (main-es2015.7678d805abc29502169b.js:1) at f._next (main-es2015.7678d805abc29502169b.js:1) at f.next (main-es2015.7678d805abc29502169b.js:1) at Kl._next (main-es2015.7678d805abc29502169b.js:1) at Kl.next (main-es2015.7678d805abc29502169b.js:1) at Dl._next (main-es2015.7678d805abc29502169b.js:1) at Dl.next (main-es2015.7678d805abc29502169b.js:1) at G.notifyNext (main-es2015.7678d805abc29502169b.js:1)  
    • By geoleandro
      O botão voltar funciona, mas ele adiciona uma questão na variável "numQ".
      Onde está o erro no código abaixo:
      <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .imgbox { float: left; text-align: center; width: 150px; border: 1px solid #ddd; margin: 4px; padding: 5px; } #mylabel { text-align: left; } </style> <body onload="loadquestion()"> <p id="numQ"> <p id="mylabel" name="questao">Questões</p><br> <div class="imgbox" id="imgbox1"><br> <input type="image" src=" " width =auto height= 80px id="btn0" value="option0" name="opt0" onclick="checkans(1)"><br><br> </div> <div class="imgbox" id="imgbox2"><br> <input type="image" src=" " width =auto height= 80px id="btn1" value="option1" name="opt1" onclick="checkans(2)"><br><br> </div> <br><br><br><br><br><br><br><br><br> <div class="imgbox" id="imgbox3"><br> <input type="image" src=" " width =auto height= 80px id="btn2" value="option2" name="opt2" onclick="checkans(3)"><br><br> </div> <div class="imgbox" id="imgbox4"><br> <input type="image" src=" " width =auto height= 80px id="btn3" value="option3" name="opt3" onclick="checkans(4)"><br><br> </div> <br><br><br><br><br><br> <br><br><br><br> <input type="button" id="next" value="Próximo" name="nxtbtn" onclick="changequestion()"><br><br> <input type="button" id="back" value="voltar" name="bkbtn" onclick="backQ()"><br><br> <p id="erro"> <p id="pontos"> <p id="questAtual"> <script type="text/javascript"> i=0; var pontos = 0; var numQ = 1; myqs=[["Clique na foto 3 ?","img3.gif", "img2.gif","img1.gif","img1a.gif","3"], ["Clique na foto 2 ?","icone.png","icone2.png","certo.png","certo.png","2"], ["Clique na foto 4","icone.png","errado.png","certo.png","certo.png","4"] ]; function loadquestion() { document.getElementById("mylabel").innerHTML= myqs[i][0]; document.getElementById("btn0").src= myqs[i][1]; document.getElementById("btn1").src= myqs[i][2]; document.getElementById("btn2").src= myqs[i][3]; document.getElementById("btn3").src= myqs[i][4]; document.getElementById ("numQ").innerHTML = "Questão " + numQ + " de " + myqs.length; document.getElementById("next").value = "Próximo"; document.getElementById("next").style.backgroundColor = "lightgray"; numQ++; document.getElementById("imgbox1").style.backgroundColor = "white"; document.getElementById("imgbox2").style.backgroundColor = "white"; document.getElementById("imgbox3").style.backgroundColor = "white"; document.getElementById("imgbox4").style.backgroundColor = "white"; document.getElementById("erro").innerHTML = ""; document.getElementById("erro").style.color = ""; } function changequestion(){ i=i+1; loadquestion(); } function backQ(){ loadquestion(); i=i-1 } function checkans(a){ respostas =parseInt(myqs[i][5]); if(respostas==a && respostas==3){ pontos++; document.getElementById ("pontos").innerHTML = "Você acertou " + pontos ; document.getElementById("imgbox3").style.backgroundColor = "#99ff99"; } else if(respostas==a && respostas==2){ pontos++; document.getElementById ("pontos").innerHTML = "Você acertou " + pontos ; document.getElementById("imgbox2").style.backgroundColor = "#99ff99"; } else if(respostas==a && respostas==4){ pontos++; document.getElementById ("pontos").innerHTML = "Você acertou " + pontos ; document.getElementById("imgbox4").style.backgroundColor = "#99ff99"; } else { document.getElementById("erro").innerHTML = "Incorreta"; document.getElementById("erro").style.color = "red"; } } </script> </head> </body> </html>  
    • By acneto.frc
      Boa tarde a todos!
      Estou trabalhando em uma aplicação Node-Express-Html-Bootsrap-Javascript-mysql, etc...
      Arquitetura MVC.
      Tenho um determinado formulário (document) que antes de renderizá-lo faço uma chamada a função sql da model e recebo como retorno um objeto sql (result).
      Ao renderizar o formulário passo o objeto como parâmetro para o html.
      Dentro do htm tenho acesso aos elementos do objeto os quais apresento em uma tabela.
      Depois disso preciso que uma função javascript seja executada mas não sei como fazer para que a função tenha acesso ao objeto.
      Anexo segue uma imagem como as fases de execução do programa
      Abraços a todos e obrigado!

    • By granderodeo
      Bom dia, criei um sistema de login, com redefinição de senha por email. O sistema está funcionando direitinho, envia o link para redefinir para o email, e do email vou para a página para trocar a senha, efetuo a troca da senha e atualiza no banco de dados normalmente. Porém quando vou fazer o login da "login ou senha incorretos". Mais quando eu me cadastro no site e efetuo o login ele realiza o login, mais quando redefino a senha não consigo mais fazer o login. Não sei o que está acontencendo, ALGUÉM TEM UM SISTEMA ou alguma página de ajuda para criar uma página para redefinir a senha. Obrigado!
    • By ivanjrx
      estou tentando montar um projeto em php+html pra um projeto para faculdade em Arduíno, infelizmente entendo quase nada de php.
      o problema:
      <html> <head> <title>LED ON/OFF</title> </head> <body> <p align="center"> <font size="8"> <b><a href="led.php?state=1">ON</a></b> / <b><a href="led.php?state=0">OFF</a></b></font> </p> </body> </html> <html> <head> <title>Arduino Controlled Based PHP</title> </head> <body> <?php echo "<p>Control Page</p><p>"; $port = fopen("COM7", "w+"); sleep(0); ?> <br> <form action="index.php" method="POST"> <input type="hidden" name="turn" value="on" /> <input type="Submit" value="on"> </form> <form action="index.php" method="POST"> <input type="hidden" name="turn" value="off" /> <input type="Submit" value="off"> </form> <?php if ($_POST['turn']=="on") { echo "Turned on"; fwrite($port, "n"); } if ($_POST['turn']=="off") { echo "Turned off"; fwrite($port, "f"); } fclose($port); ?> </body> </html>  
×

Important Information

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