Ir para conteúdo
wellingtonmelo

Pegar dados de uma div e colocar como value de um input

Recommended Posts

Olá pessoal, beleza?

 

Entendo bem de HTML, CSS, Bootstrap, mas funções dinâmicas que necessitam de Javascript, Jquary etc, eu não sei nada.

 

Consegui um script e estou testando, mas o resultado é exibido em uma DIV, e preciso que esse resultado seja exibido em um input, para que o programador possa pegar esse resultado e jogar no banco.

 

Olha 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>    ">

 

Alguém pode me ajudar? Estou muito preocupado, estourou o prazo e apareceu isso para fazer por fora do projeto.

 

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

Para atribuir valores a inputs é da mesma forma que pega.


Ao inves de innerHTML, use value

 

document.querySelector(".num1").value =  resultado;

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
31 minutos atrás, Williams Duarte disse:

Para atribuir valores a inputs é da mesma forma que pega.


Ao inves de innerHTML, use value

 


document.querySelector(".num1").value =  resultado;

 

 

Muito obrigado por sua dica Williams!

 

Eu realmente sou leigo quando se trata de javascript, por gentileza você poderia me dizer como usar o

document.querySelector(".num1").value =  resultado;

dentro do meu código? como montar o input para exibir o resultado dentro do value?

 

Obrigado demais por sua ajuda!

Compartilhar este post


Link para o post
Compartilhar em outros sites
8 horas atrás, wellingtonmelo disse:

<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").value = resultado;
} 

</script>

A unica coisa que muda é de 

innerHTML 

para 

value

O restante continua igual!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Alterei só o value, mas não funcionou, visualmente não alterou nada, porém o resultado não é mais exibido ao clicar no botão.

 

Estou testando fazendo aqui: http://spaflex.com.br/index.php?p=produto&amp;id=200043&amp;site=ad49f8e1bf4d27941b6051d14376304d4

 

Um detalhe, no meu dominio funciona, pode testar clicando ai, mas quando coloco no jsfiddle.net não funciona, olha por favor: http://jsfiddle.net/wellingtonmelo/dwbz4x5s/9/

No jsfiddle esta do jeito que esta exibindo no site agora, sem o .value.

 

Tentei usar:

<input type="text" class="resultado">

mas não funcionou! Preciso muito desse resultado dentro do input.

 

Obrigado por sua ajuda amigo, abraço!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Aqui no Browser Funciona

Mas como se trata de um Ecommerce, use Jquery


No jsfiddle

 

$(function() {

        
        $("button").click(function() {

            var num1 = $(".num1").val();
            var num2 = $(".num2").val();
            var num3 = $(".num3").val();
            var num4 = $(".num4").val();
                
            var resultado = parseInt(num1) - parseInt(num2) - parseInt(num3) - parseInt(num4);
            
            $(".num1").val(resultado);

        });

    });


 



<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>Resultado</button>



<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>


<script>	

	$(function() {

		
		$("button").click(function() {

			var num1 = $(".num1").val();
			var num2 = $(".num2").val();
			var num3 = $(".num3").val();
			var num4 = $(".num4").val();
			    
			var resultado = parseInt(num1) - parseInt(num2) - parseInt(num3) - parseInt(num4);
			
			$(".num1").val(resultado);

		});

	});

</script>

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Forma de uso


 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<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>



</head>
<body>

	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>Resultado</button>


	

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script>	

	$(function() {

		
		$("button").click(function() {

			var num1 = $(".num1").val();
			var num2 = $(".num2").val();
			var num3 = $(".num3").val();
			var num4 = $(".num4").val();
			    
			var resultado = parseInt(num1) - parseInt(num2) - parseInt(num3) - parseInt(num4);
			
			$(".num1").val(resultado);
			$(".resultado").text(resultado);
		 	

		});

	});

</script>
	
</body>
</html>






 

Compartilhar este post


Link para o post
Compartilhar em outros sites

OPA!!!!!

Que maravilha meu amigo, se todos os profissionais você iguais a você, nossa internet seria mais linda! hahaha

 

Funcionou perfeito, tem um ajuste que precisa fazer, que é com relação ao número multiplicar dentro do input class="num1"

 

Se colocar exemplo: 

Tamanho 35/36: 3

Tamanho 37/38: 3

Tamanho 39/40: 3

E clicar no resultado, exibi 9. (faltam 3 pra completar 12 pares.)

 

dai o usuário automaticamente entende que precisa completar com + 3 pares, para fechar os 12 pedidos, entende?

 

Se clicar acrescentar + 3 a qualquer campo exemplo:

Tamanho 35/36: 6

Tamanho 37/38: 3

Tamanho 39/40: 3

E clicar no resultado, o sistema mostra: -9, ou seja, ele passa direto, ne?

 

Precisa mostrar 0, ao invés do -9, ai sim o pedido fica certinho para clicar em "Adicionar ao Carrinho".

 

Consegue me ajudar com mais isso?

 

O HTML eu monto todo, mas as funções dinâmicas me quebram!

 

Olha como ficou: http://spaflex.com.br/index.php?p=produto&amp;id=200043&amp;site=ad49f8e1bf4d27941b6051d14376304d4

 

Obrigado!!!!

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Simples, use uma condição ternaria!

 

resultado = resultado < 0 ? 0 : resultado;

Estou saindo de Viagem, boa sorte na empreitada!

 

<script>	

	$(function() {

		
		$("button").click(function() {

			var num1 = $(".num1").val();
			var num2 = $(".num2").val();
			var num3 = $(".num3").val();
			var num4 = $(".num4").val();
			    
			var  resultado = num1 - num2 - num3 - num4;

			resultado = resultado < 0 ? 0 : resultado;
			
			$(".num1").val(resultado);
			$(".resultado").text(resultado);
		 	

		});

	});

</script>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
1 hora atrás, Williams Duarte disse:

Simples, use uma condição ternaria!

 


resultado = resultado < 0 ? 0 : resultado;

Estou saindo de Viagem, boa sorte na empreitada!

 


<script>	

	$(function() {

		
		$("button").click(function() {

			var num1 = $(".num1").val();
			var num2 = $(".num2").val();
			var num3 = $(".num3").val();
			var num4 = $(".num4").val();
			    
			var  resultado = num1 - num2 - num3 - num4;

			resultado = resultado < 0 ? 0 : resultado;
			
			$(".num1").val(resultado);
			$(".resultado").text(resultado);
		 	

		});

	});

</script>

 

 

Muito obrigado amigo, você foi de extrema ajuda, conseguiu tirar um peso da minha cabeça, pensei que não iria conseguir entregar isso. Agora falta muito pouco! Gratidão, boas férias ai, obrigado!

 

Agora falta pouco para finalizar essa função, se alguém poder me ajudar a finaliza-la, serei muito grato!!

 

aqui está o código de como ficou: https://jsfiddle.net/wellingtonmelo/8qkv2tzg/1/

 

Bom, nosso amigo Williams deixou tudo prontinho.

Precisamos agora apenas fazer algum ajuste para não ZERAR o .num1

Quando a soma não é igual a 12, ele exibe o restante, porém ao adicionar a quantidade para somar o total de 12, trava.

 

O ideal é que ao adicionar o valor que somado der o total de 12, a função apenas some o complemento.

 

Exemplo, se o usuário digitar:

Tamanho 35/36: 3

Tamanho 37/38: 3

Tamanho 39/40: 3

 

Vai restar 3.

 

Se o usuário digitar 6 em um dos inputs, a função apenas precisa somar 6 + 3 ao invés de resetar.

 

Algum outro ninja me ajuda ai, por favor!!!!

Obrigado!!!

 

 

 

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 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.