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 Soneca_BO
      Boa tarde Pessoal!
       
      Estou a um bom tempo tetando fazer um CRUD em um banco de dados não tradicional e sim do "Cognos tm1",
       
      Estou fazendo uma aplicação WEB e queria usar o Ajax com jquery e javascript(dependendo do caso) para fazer um CRUD
      salvando dados deletando e fazendo as devidas atualizações, mas não estou conseguindo fazer o "PUT" e nem o "DELETE", 
      E não faço ideia de como começar a escrever o código para os métodos informados acima.
       
      Segue código criado para fazer o GET (só conseguir fazer o GET)
      $.ajax({ username: 'admin', password: ' ', url: "http://localhost:8881/api/v1/Cubes('ACO.200.Despesas')/Views('visao')/tm1.Execute?$expand=Cube($select=Name;$expand=Dimensions($select=Name)),Axes($expand=Tuples($expand=Members($select=Name;$expand=Element($select=UniqueName)))),Cells", method: 'POST', headers: { "Authorization": "Basic YWRtaW46", "cache-control": "no-cache", }, contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { console.log(data); }, error: function () { alert("erro"); } });  
       
      Obs.: não sou muito bom em rest e estou buscando aprender mais sobre ele, se alguém poder me ajudar agradeceria muito.
       
      Desde já agradeço alguém que conseguir me da uma força.
       
    • Por Claudia França
      Prezados há dias consegui chegar no fim do projeto e, agora resta apenas corrigir o erro que ocorro no fim da transação. "Atualizar informações de pagamento. "
       Eu tenho aqui a doc. Mas não seu exatamente o que alterar no código para corrigir isso. E preciso de ajuda,
       
      https://www.userede.com.br/desenvolvedores/pt/produto/e-Rede#documentacao-3ds
       
      function updatePaymentAPI($apikey, $secret, $callid, $currencyCode,$total, $subtal){
          $time = time();
          $query_string = "apikey=".$apikey;
          $resource = "payment/info/".$callid;
          $body = "{\"updateInfo\":[{\"payInfo\":{\"reason\":\"ProductionKey Test\",
          \"avsResponseCode\":\"Y\",\"total\":".$total.",\"currencyCode\":\"".$currencyCode."\",
          \"eventStatus\":\"Success\",\"eventType\":\"Authorize\"}},{\"orderInfo\":{\"currencyCode\":\"".$currencyCode."\",
          \"discount\":0,\"eventType\":\"Confirm\",\"giftWrap\":0,\"misc\":0,
          \"reason\":\"Order_placed\",\"shippingHandling\":0,\"subtotal\":".$subtal.",\"tax\":0,\"total\":".$total."}}]}";
          $certificatePath = 'cert.pem';
          $privateKey = 'key_9e082920-8ec4-441a-8cfa-588b0829d326.pem';
          //Hash for x-pay-token
          $token = $time.$resource.$query_string.$body;
          $hashtoken = "xv2:".$time.":".hash_hmac('sha256', $token, $secret); //X-PAY-TOKEN String
          //$url = "https://api.visa.com/wallet-services-web/".$resource."?".$query_string;
          $url = "https://api.visa.com/wallet-services-web/".$resource."?".$query_string;
          updatePaymentLog("=========================================\n\n");
          updatePaymentLog("CallID : ".$callid."\n");
          updatePaymentLog("URL : ".$url."\n\n");
          updatePaymentLog("Update Payment Request Parameters : \n");
          updatePaymentLog($body);
          //Header
          $header = (array("X-PAY-TOKEN: ".$hashtoken, "Accept: application/json", "Content-Type: application/json","X-FRAME-OPTIONS: SAMEORIGIN"));
          $ch = curl_init();
          curl_setopt($ch, CURLOPT_URL, $url);
          curl_setopt($ch, CURLOPT_HTTPHEADER, $header);
          curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "PUT");
          curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
          curl_setopt($ch, CURLOPT_SSLVERSION , 1);
          curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
          curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
          //curl_setopt($ch, CURLOPT_SSLCERT, $certificatePath);
          //curl_setopt($ch, CURLOPT_SSLKEY, $privateKey);
          curl_setopt($ch, CURLOPT_IPRESOLVE, CURL_IPRESOLVE_V4);
          curl_setopt($ch, CURLOPT_POSTFIELDS,$body);
          //getting response from server
          $response = curl_exec($ch);
          if(!$response) {
              die('Error: "' . curl_error($ch) . '" - Code: ' . curl_errno($ch));
          }
          $statusCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
          curl_close($ch);
          $json = "";
          $ret = array(
            'status' =>"",
            'data' => ""
          );
          if($statusCode == 200) { //If success => empty Object.
              $ret['status'] = 'success';
              updatePaymentLog("\nUpdate Payment Info called Successfully...\n");
          }else{ // Return Error Object
              $ret['status'] = 'fail';
              $ret['data'] = $response;
              updatePaymentLog("\nSomething Went Wrong....\n");
              $json = json_decode($response);
              $json = json_encode($json, JSON_PRETTY_PRINT);
          }
          updatePaymentLog("\nStatus Code : " . $statusCode ."\n");
          updatePaymentLog($json);
          updatePaymentLog("\n");
          echo json_encode($ret);
      }
      updatePaymentAPI($visaApiKey, $sharedSecret, $callid, $currencyCode, $total, $subtotal);
      ?>
       
       
       
       
       
    • Por Artes Ussler
      Bom dia
       
      Alguns navegadores sublinham ou trocam a cor dos números de telefones que estão no site.
       
      Como faço para remover isso?
       
      Se alguém puder ajudar, eu fico grato.
    • Por ericknb
      Bom dia Pessoal,
       
      Sou bem leigo no assunto e toda ajuda é bem vinda.
       
      Vamos lá. Possuo um ecommerce, numa parte do site tem um campo de Newsletter. Mas o fundo dele é um cinza e eu gostaria de alterar para uma imagem (uma imagem anexada para mostrar o fundo cinza que quero alterar. 
       
      Segue o código:
       
      <section class="newsletter" data-tray-tst="newsletter_box">
          <h2 class="newsletter-title">
              <i><svg version="1.1" fill="#000" width="30" height="33" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 489.66 343.793" enable-background="new 0 0 489.66 343.793" xml:space="preserve"><g><path d="M489.66,32.781v-1.906c0-7.078-3.215-15.406-8.984-21.176l-0.652-0.656c0,0-0.656,0-0.656-0.652c-1.309-1.313-2.559-1.907-3.867-3.215c-0.652,0-0.652-0.653-1.309-0.653c-1.309-0.656-3.211-1.312-4.52-1.906c-0.656,0-0.656-0.652-1.309-0.652c-1.906-0.656-3.867-1.309-5.773-1.309h-1.309c-1.902,0-4.52-0.656-7.078-0.656H34.742c-2.558,0-5.117,0-7.734,0.656c-0.653,0-1.309,0-1.903,0.653c-1.906,0.656-3.867,0.656-5.117,1.308c-0.656,0-0.656,0.656-1.308,0.656c-1.309,0.653-3.215,1.309-4.524,1.903l-0.652,0.656c-1.309,0.652-2.559,1.902-3.867,2.559L7.73,10.293C3.211,15.41,0.656,21.238,0,27.664v288.524c1.309,8.983,5.77,16.718,12.195,21.179c5.77,3.867,12.848,6.426,21.18,6.426h422.793c1.902,0,4.52,0,6.422-0.655h1.309c1.906-0.653,3.867-0.653,5.117-1.31h0.656c14.156-5.117,19.926-17.371,19.926-28.91V33.375C489.66,33.434,489.66,33.434,489.66,32.781L489.66,32.781z M448.551,23.797L246.168,221.004l-46.281-44.973L41.168,23.738h407.383V23.797z M23.855,307.146V39.859l149.676,143.907L23.855,307.146z M239.742,320.59H45.035l145.867-119.512l46.879,45.629c1.903,1.902,3.867,2.56,5.77,3.211h3.926c1.902-0.651,4.52-1.309,5.77-3.211l44.32-43.069l146.465,116.956H239.742V320.59z M465.863,307.742L315.535,186.324L465.863,39.859V307.742z M465.863,307.742"/></g></svg></i>
              <span>{{ Translation('news') }}</span>
          </h2>
          <form action="{{ links.newsletter }}" method="post" name="newsletter" data-tray-tst="newsletter_form">
              <input name="name" type="text" placeholder="{{ Translation('digitar_nome') }}" required>
              <input name="email" type="email" placeholder="{{ Translation('digitar_email') }}" data-tray-tst="newsletter_email" required>
              <button data-tray-tst="newsletter_cadastrar">{{ Translation('cadastrar') }}</button>
          </form>
      </section><section class="newsletter" data-tray-tst="newsletter_box">
          <h2 class="newsletter-title">
              <i><svg version="1.1" fill="#000" width="30" height="33" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 489.66 343.793" enable-background="new 0 0 489.66 343.793" xml:space="preserve"><g><path d="M489.66,32.781v-1.906c0-7.078-3.215-15.406-8.984-21.176l-0.652-0.656c0,0-0.656,0-0.656-0.652c-1.309-1.313-2.559-1.907-3.867-3.215c-0.652,0-0.652-0.653-1.309-0.653c-1.309-0.656-3.211-1.312-4.52-1.906c-0.656,0-0.656-0.652-1.309-0.652c-1.906-0.656-3.867-1.309-5.773-1.309h-1.309c-1.902,0-4.52-0.656-7.078-0.656H34.742c-2.558,0-5.117,0-7.734,0.656c-0.653,0-1.309,0-1.903,0.653c-1.906,0.656-3.867,0.656-5.117,1.308c-0.656,0-0.656,0.656-1.308,0.656c-1.309,0.653-3.215,1.309-4.524,1.903l-0.652,0.656c-1.309,0.652-2.559,1.902-3.867,2.559L7.73,10.293C3.211,15.41,0.656,21.238,0,27.664v288.524c1.309,8.983,5.77,16.718,12.195,21.179c5.77,3.867,12.848,6.426,21.18,6.426h422.793c1.902,0,4.52,0,6.422-0.655h1.309c1.906-0.653,3.867-0.653,5.117-1.31h0.656c14.156-5.117,19.926-17.371,19.926-28.91V33.375C489.66,33.434,489.66,33.434,489.66,32.781L489.66,32.781z M448.551,23.797L246.168,221.004l-46.281-44.973L41.168,23.738h407.383V23.797z M23.855,307.146V39.859l149.676,143.907L23.855,307.146z M239.742,320.59H45.035l145.867-119.512l46.879,45.629c1.903,1.902,3.867,2.56,5.77,3.211h3.926c1.902-0.651,4.52-1.309,5.77-3.211l44.32-43.069l146.465,116.956H239.742V320.59z M465.863,307.742L315.535,186.324L465.863,39.859V307.742z M465.863,307.742"/></g></svg></i>
              <span>{{ Translation('news') }}</span>
          </h2>
          <form action="{{ links.newsletter }}" method="post" name="newsletter" data-tray-tst="newsletter_form">
              <input name="name" type="text" placeholder="{{ Translation('digitar_nome') }}" required>
              <input name="email" type="email" placeholder="{{ Translation('digitar_email') }}" data-tray-tst="newsletter_email" required>
              <button data-tray-tst="newsletter_cadastrar">{{ Translation('cadastrar') }}</button>
          </form>
      </section>
       
       
      o que eu teria de alterar para inserir a imagem como fundo?
      Grato
       

×

Informação importante

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