Ir para conteúdo
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!!!

Compartilhar este post


Link para o post
Compartilhar em outros 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!!!

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros 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.  

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por JGD
      Supondo que tenho um input name = dataHoraINI...
      Este input tem o  valor/value =  21/03/2019 09:00 
      Chamo a função abaixo pelo <button...:
       
      <button class="btn btn-primary" onclick="popdataJGD('dataHoraINI','pop1',document.getElementById('dataHoraINI').value)"> <i class="glyphicon glyphicon-calendar"></i> </button>  
      São 03 parâmetros: popdataJGD(objeto, div, value).. Sendo o 3º: data + hora.
       
      Observar que passo para a função o 3º parâmentro assim: document.getElementById('dataHoraINI').value
      Como poderia passar este 3º paramentro como string e inline a data e hora ???
       
      Qual diferença entre: 
      document.getElementById('dataHoraINI').value E
      this.value E/Ou ainda.
      var data_hora = "21/03/2019 09:00" Neste caso : popdataJGD(objeto, div, data_hora)... Observar no code acima a questão das aspas simples.
       
      Agradeço qualquer ajuda conceitual
       
    • Por Ruy Hoffmann
      Olá pessoal, boa tarde,
       
      Eu fiz um site, comprarei o domínio e hospedagem provavelmente ainda hoje (alguma sugestão de um bom provedor de domínios?) e já estou providenciando para que o site ficar no ar. Até ai tudo bem. Esse será um site comercial, então fiz as meta tags para melhorar nas buscas, to pesquisando sobre SEO, etc...
       
      Mas em pararelo fiz um OUTRO site completo também, que vai do index até diversas outras páginas, é um módulo administrativo financeiro que só terá acesso por mim e pela minha esposa. Estou pensando em colocar o acesso no mesmo domínio do site acima, algo do tipo a url do site comercial /admin/a_console.php (que é onde eu e minha esposa efetuaremos nosso login).
       
      Minha pergunta é: para este SEGUNDO SITE que vai trabalhar independente do primeiro eu não quero que as páginas dele apareçam nas buscas, nada, nadinha... Como faço isso? Seria algo do tipo uma INTRANET, onde é acessível pela internet, mas só aparece para quem tem a url da página de login. Alguém sabe como faço para NÃO aparecer?
       
      Obrigado,
       
    • Por Incompetech
      Olá a todos. Então.. eu estava praticando um pouco de HTML / CSS e no fim cheguei a um resultado bem legal e simples claro disto aqui:
       
      Eu sei que alguns vão reconhecer isto.. Mas para quem não conhece é algo relacionado ao game MU ONLINE.
      Enfim. Como podem ver eu inventei alguns adicionais que no caso são as características dessa armadura, porém eu gostaria de aplicar um efeito em que esses adicionais apareçam quando eu passar o mouse por cima da imagem da armadura.. como se fosse dentro do game.
      Abaixo vão alguns exemplos:
      Efeito aplicado em um projeto HTML: 

      O mesmo efeito In Game:
       
      Sei que pode parecer algo meio trivial mas gostaria muito de aprender como eu faço para criar algo igual, se puderem me ajudar eu agradeço de coração.
    • Por _badi_
      Preciso de ajuda! Pode parecer uma dúvida besta, mas sou nova nessa área e não estou conseguindo resolver essa questão da facul!
      A questão é:
      1)      Faça o fluxograma e depois faça o código em Javascript de um programa  que lê  3 notas obtidas por um aluno e depois calcule  e imprima a média dos para avaliação, usando  a fórmula abaixo. Imprimir depois o conceito, conforme a tabela abaixo. Use o prompt no javascript e um botão que mostre a média e o conceito depois que do clique no mesmo.
      MA = (Nota1 + Nota2 x 2 + Nota3 x 3 + ME )/7
      Média de Aproveitamento
      Conceito
      10
      A
      7,5 e < 10
      B
      4,0 e < 7,5
      C
      < 4,0
      D
       
      Meu código ficou assim:
      <!DOCTYPE html> <html> <head>      </head> <body> Para calcular sua media e saber seu conceito, clique no botao abaixo: <br> <br> <button onclick='mostra()'>Try it</button> <p id="resp"></p> <br> <br> <script>     function mostra(){         var nota1 = prompt ("Digite a nota 1");         var resp1 = parseInt (nota1);         var nota2 = prompt ("Digite a nota 2");         var resp2 = parseInt (nota2);         var nota3 = prompt ("Digite a nota 3");         var resp3 = parseInt (nota3);         var ME = (resp1 + resp2 + resp3)/3;         var MA = resp1 + (resp2 * 2) + (resp3 * 3) + ME/7;         if (MA=10) {             document.getElementById("resp").innerHTML=("Sua media foi " + ME + " e seu conceito foi A!");         } else if (MA=7.5&&MA<10){             document.getElementById("resp").innerHTML=("Sua media foi " + ME + " e seu conceito foi B!");         } else if (MA=4&&MA<7.5){             document.getElementById("resp").innerHTML=("Sua media foi " + ME + " e seu conceito foi C!");         } else if (MA<4){             document.getElementById("resp").innerHTML=("Sua media foi " + ME + " e seu conceito foi D!");         }         }          </script> </body> </html>  
      Mas sempre volta como conceito A, não importa os valores que coloco :(
      Obrigado!
       
    • Por Eduardo S. B. de Oliveira
      Senhores, preciso de uma ajuda, estou criando um formulário onde o checkbox fique "checked" quando clicar em cima, mas o detalhe e que quando atualizar a pagina o checkbox permaneça marcado. É possível? 
×

Informação importante

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