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 Dinho Nunes LC
      <div align="center" id="subtitulo"> Canais Abertos </div> <div class="ui cards"> <div class="card"> <div class="content"> <a href="globo.html" style="display: block; color: black"> <div align="center"> <div> <img class="ui tiny image" id="imagem_card_casa" src="assets/images/Rede_Globo_2014.png"> <div align="center" id = "nome_time_fora"> <b>Globo RJ</b> </div> </div> Onde "globo.html" seria substituído pelo link que esta em uma tabela do banco de dados.
       
      Já fiz a conexão. E tenho a base de dados pronta.
       
      Motivo pelo qual estou buscando ajuda:
       
      Faço manualmente a mudança de cada link (são mais de 300) diariamente para evitar copias de terceiros. Sendo assim poderia usar um CRUD para facilitar a troca dos links direto no banco de dados.
    • By ricardonews
      Olá pessoal eu tenho essa imagem de um login  que vou mostrar aqui, consegui  o css dela , porem não consegui colocar no meu login,  eu vou deixar o login em html,  em css eu estou  dificuldade. Desde já agradeço a todos
       

       então eu o css dela é esse aqui
      *{margin:0; padding:0;} html{ height:100%; background: linear-gradient(rgba(38, 128, 101, 0.9), rgba(52, 177, 140, 0.9)); } .erros, .ok { width:390px; padding:5px; background:rgba(238, 249, 113, 0.9); margin: 20px auto 0 auto; border: 1px solid rgba(222,239,10,0.9); border-radius: 4px; color: #333; } .ok{background: rgba(155,222,143,0.9);border-color: rgba(68, 171, 50, 0.9);color:white;} body{ font-family: "Trebuchet MS", tahoma, arial; } #formulario{ width:500px; margin:40px auto; text-align:center; position:relative; } #formulario fieldset{ background:white; border:0 none; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; box-shadow:0 0 15px 1px rgba(0,0,0, 0.4); padding:20px 30px; box-sizing: border-box; width:80%; margin:0 10%; position:absolute; } #formulario input, #formulario textarea{ padding:10px; border:1px solid rgba(38, 128, 101, 0.9); border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; outline:none; box-sizing: border-box; width:100%; font:14px "Trebuchet MS", tahoma, arial; color:#090; margin-bottom:10px; } #formulario .acao{ width:100px; background:rgba(38, 128, 101, 0.9); color:white; text-transform:uppercase; font-weight:bold; padding:12px 0; float:left; margin-right:5%; } #formulario .acao:hover{background:rgba(52, 177, 140, 0.9); cursor:pointer;} Aqui abaixo é o html que eu não consegui deixar no css do jeito que está na imagem.
      <!doctype html> <html> <?php require_once"config.php"; ?> <head> <title>APRENDIZ DE JS</title> <link href="style.css" rel="stylesheet" type="text/css"> <script src="jquery-3.2.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#but_submit").click(function(){ var username = $("#meu_nome").val().trim(); var password = $("#minha_senha").val().trim(); if( username != "" && password != "" ){ $.ajax({ url:'pesquisar.php', type:'post', data:{username:username,password:password}, success:function(response){ var msg = ""; if(response == 1){ window.location = "home.php"; }else{ msg = "Invalid username and password!"; } $("#message").html(msg); } }); } }); }); </script> </head> <body> <div class="container"> <div id="div_login"> <h1>Login</h1> <div id="message"></div> <div> <input type="text" class="textbox" id="meu_nome" name="meu_nome" placeholder="Username" /> </div> <div> <input type="password" class="textbox" id="minha_senha" name="minha_senha" placeholder="Password"/> </div> <div> <input type="button" value="logar" name="but_submit" id="but_submit" /> </div> </div> </div> </body> </html>  
       
    • By egalauber
      Quero que meus links tenham marcadores e que os marcadores fiquem selecionados juntos com o link. Pra isso, coloquei o LI dentro do A. <a><li>meu link</li></a>
      Só que o link ficou muito grande. Mesmo com o mouse longe do texto, ele já ativa o link. Vejam na imagem.
       

       
      Vejam o código:
       
      CSS
      #links_uteis {
              width:482px;
              height:230px;
              float:right;
              margin-top:20px;
              margin-right:20px;
              font-size:20px;
              list-style-type:disc;
              list-style-position:inside;
          }
      #links_uteis table {
              width:420px;
              margin-left:10px;
          }
      #links_uteis td {
              width:210px;
              padding:5px 10px 5px 10px;
          }
      #links_uteis a:hover {
              text-decoration:underline;
              color:#D90000;
          }
       
       
      HTML
      <div id="links_uteis">
      Links úteis
      <div class="barra_titulo"></div>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td>
          <a href="#" target="_blank"><li>Inmetro</li></a>
          </td>
          <td>
          <a href="#" target="_blank"><li>Seplag</li></a>
          </td>
        </tr>
        <tr>
          <td>
          <a href="#" target="_blank"><li>Ipsemg</li></a>
          </td>
          <td>
          <a href="#" target="_blank"><li>IOF-MG</li></a>
          </td>
        </tr>
        <tr>
          <td>
          <a href="#" target="_blank"><li>ALMG</li></a>
          </td>
          <td>
          <a href="#" target="_blank"><li>MGS</li></a>
          </td>
        </tr>
        <tr>
          <td>
          <a href="#" target="_blank"><li>Portal de serviços</li></a></td>
          <td>
          <a href="#" target="_blank"><li>Portal do servidor</li></a></td>
        </tr>
      </table>

      </div> <!--Fecha a div links_uteis-->
    • By ShibuiFansub
      Boa tarde, tenho 18 anos e decidi criar meu primeiro blog, só por teste mesmo, acabei baixando dois template e acabei gostandos de ambos, tentei fazer uma "fusão" deles, mas meio que não consegui.
      Eu queria colocar o 'estilo de postagem' desse template: http://prntscr.com/o105rw
      Nesse daqui: http://prntscr.com/o108ad
      Download Template 1:  https://drive.google.com/file/d/1mhOCYgbwPIcO14wPwOumemBrCZR5l3fT/view
      Download Template 2:  https://drive.google.com/file/d/1QmohfY7MUZI4PTIQYkjbNRwxxWkfIflD/view
       
    • By odenilson marques
      Ola pessoal,  estou precisando de uma força! segue a situação.
       
      tenho 3 formulário em um projeto, sendo eles:
      form_cad_empresa
      form_cad_atividade
      form_cad_processo
       
      no form_cad_atividade e form_cad_processo tenho uma combobox que lista todas empresas cadastradas no form_cad_empresa, porém no form_cad_atividade e no form_cad_processo também tenho um link que redireciona o usuário para o form_cad_empresa para ele cadastrar a empresa caso não encontre a empresa na combobox do form_cad_atividade e form_cad_processo, porém gostaria que quando terminasse o cadastro do form_cad_empresa este teria que ser redirecionado para o form_cad_atividade ou form_cad_processo, ou seja ele retornaria para formulario que chamou o form_cad_empresa.
       
      Alguém pode me da um norte?
       
×

Important Information

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