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 tiagocaus
      Ao desmarcar um checkbox o calculo não está sendo feito da forma correta.

      Não consegui identificar o problema, poderia ajudar?


      Link do código:https://jsfiddle.net/cwsmo4et/


      Obrigado.
    • Por Bruno123
      Olá, estou com uma dúvida na hora  de retornar se o número é primo ou não, poderiam me ajudar por gentileza ? Obrigado !
      <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> <script src="javascript.js"></script> </body> </html> 'use strict' let num = prompt("Insira um número:"); let c = 0; for (i = 1; i <= num; i++) { if (num % i == 0) { c++; } } if (c == 2) { alert ("É PRIMO") } else { alert("NÃO É PRIMO") }  
    • Por ErikaLiy
      Estou começando agora com html e estou criando um site. Gostaria de saber se é possível reutilizar o código html em outras paginas. Por exemplo, todas as páginas do site terão o mesmo menu. Como faço para não precisar ficar colocando o mesmo código em todas as páginas? E caso também eu precise alterar algo, por exemplo incluir ou excluir um botão, eu consiga alterar apenas uma vez e não tenha que fazer isso de página por página.
    • Por user32
      Olá pessoal,
      sempre fui um curioso na programação e agora estou começando entender o javascript.
       
      edit:
      como eu consiguiria fazer a variavel buscar alem de 9... como numeros como 10-20, 20-30 ?
      toda ajuda é bem vinda, desde já agradeço
       
       
      <script type="text/javascript"> function funcao1() { var num1 = Number(document.getElementById("num1").value); var elemResult = document.getElementById("total"); var d90 = /[0-3]/; var d80 = /[4-5]/; var d70 = /[6-9]/; if (d90.test(num1)) { elemResult.innerText = String(num1 * "1") + "."; } else if (d80.test(num1)) { elemResult.innerText = String(num1 * "2") + "."; } else if (d70.test(num1)) { elemResult.innerText = String(num1 * "3") + "."; } else { // IE elemResult.innerText = String(num1 * "5") + "."; } } </script>  
×

Informação importante

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