Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

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

  • Conteúdo Similar

    • Por Giovanird
      Olá a todos!
      Tenho uma pagina que possui uma DIV onde coloquei uma pagina PHP.
      Uso a função setInterval para atualizar a pagina inclusa dentro da DIV.
      O problema é que ao acessar o site , a DIV só me mostra a pagina inclusa somente quando completo o primeiro minuto.
      Preciso que a pagina inclusa já inicie carregada
       
      Meu código JavaScript e a DIV com a pagina PHP
       
      <script> function atualiza(){ var url = 'direita.php'; $.get(url, function(dataReturn) { $('#direita').html(dataReturn); }); } setInterval("atualiza()",60000); </script> <div> <span id="direita"></span> </div>  
    • Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • Por juliosonic
      Boa noite..
      Estou desenvolvendo um site de https://www.maithunatantra.com.br/ e estou com um duvida sobre o menu de navegação da versão mobile.
      O menu que tem o dropdown "Terapeutas" e "Terapias" quando clico em cima ele expande como deve ser, mas quando clico denovo para recolher os submenus
      nao acontece nada.. segue o trecho do codigo do menu..
      <div class="collapse navbar-collapse" id="navbarsExample09">             <ul class="navbar-nav ml-auto">               <li class="nav-item  active"><a class="nav-link" href="index.html">Home</a></li>               <li class="nav-item  active"><a class="nav-link" href="about-us.html">Quem Somos</a></li>               <li class="nav-item dropdown1">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapeutas</a>                     <ul class="dropdown-menu">                         <li><a class="dropdown-item" href="terapeuta-julio-cezar.html">Julio Cezar</a></li>                         <li><a class="dropdown-item" href="terapeuta-pamela-priscila.html">Pamela Priscila</a></li>                     </ul>                                    </li>               <li class="nav-item dropdown">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapias</a>                     <ul class="dropdown-menu" aria-labelledby="dropdown01">                         <li><a class="dropdown-item" href="o-que-e-reiki.html">O que é Reiki</a></li>                         <li><a class="dropdown-item" href="beneficios-reiki.html">Benefícios do Reiki</a></li>                         <li><a class="dropdown-item" href="principios-reiki.html">Princípios do Reiki</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Reiki em Animais</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Estudos Sobre Reiki</a></li>                         <li><a class="dropdown-item" href="terapia-massagem-tantrica.html">Terapia Tântrica</a></li>                     </ul>               </li>               <li class="nav-item  active"><a class="nav-link" href="blog.html">Blog</a></li>                <li class="nav-item"><a class="nav-link" href="contato.html">Contato</a></li>             </ul>         </div>  
      Massagem Tantrica em Curitiba
      Tantra Curitiba
      Massagem Tântrica
      Tantra
      Julio Darshan

      Obrigado
      Att
      Julio Cezar
       
       
       
    • Por belann
      Olá!
       
      Estou fazendo o upload de arquivos com fetch dessa forma
      fetch(url, {
              method: 'POST',
              headers: {'Content-Type': 'multipart/form-data',},
              body: formData 
          }).catch((error) => (console.log("Problemas com o Upload"), error));
       
      estou usando input type=file
      e criando uma const formData = new FormData(); 
      mas não faz e não dá nenhum erro.
      estou fazendo o upload com a url="http://localhost/dashboard/dados".
    • Por joeythai
      Boa tarde pessoal,
       
      Eu criei um formulário em que tenho 3 interações: evento click, change e uma chamada ajax. No evento on change ("select#removal_table_from" )eu faço uma chamada ajax onde eu passo como parametro o id do item selecionado e construo uma tabela dinamica com o próprio javascript, após isto, tenho um input em que o usuario coloca um valor de percentual para que eu possa preencher em 3 colunas da tabela que foi criada dinamicamente: moto_atualizado, carro_atualizado e caminhao_atualizado, até aí tudo bem, o codigo está fazendo isso, porém, como a tabela é criada dinamicamente eu preciso de alguma forma enviar o arrayData para meu backend mas quando faço o calculo dentro do loop apos resposta do meu ajax, os valores desses 3 campos chegam como null, não sei se é possível fazer o que pretendo ou se é ainda não sei como faz
       
      <code>
           $(document).ready(function (event) {   let arrayData = []; let percentage; let removal_vehicle; let removal_motorcycle; let removal_tuck; let apply_removal = $('#apply_removal');   // apply_removal.on('click', function () { // percentage = $('#percentage').val();   // $('.table-body tr').each(function () {   // let veiculo = $(this).find('.veiculo').text(); // let moto = $(this).find('.moto').text(); // let caminhao = $(this).find('.caminhao').text();   // let removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; // let removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; // let removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   // arrayData.push({ // removal_vehicle, // removal_motorcycle, // removal_tuck // })   // $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); // $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); // $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2)); // }); // });   apply_removal.on('click', function () { percentage = $('#percentage').val();   $('.table-body tr').each(function () {   let veiculo = $(this).find('.veiculo').text(); let moto = $(this).find('.moto').text(); let caminhao = $(this).find('.caminhao').text();   removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   arrayData.push({ removal_vehicle, removal_motorcycle, removal_tuck })   $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2));     console.log('Removal Vehicle:', removal_vehicle); console.log('Removal Motorcycle:', removal_motorcycle); console.log('Removal Truck:', removal_tuck); }); });   $('select#removal_table_from').on('change', function (e) { let table_id = $(this).val(); let action = route('removal.removal-values.show', table_id);   $.ajax({ type: "GET", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },   success: function (data) { $('.table-body').empty();   for (let i = 0; i < data.length; i++) { let carro = parseFloat(data[i].CARRO); let moto = parseFloat(data[i].MOTO); let caminhao = parseFloat(data[i].CAMINHAO); let distancia = data[i].DISTANCIA; let origem = data[i].ORIGEM; let destino = data[i].DESTINO; let localidadeOrigem = data[i].LocalidadeOrigem_ID; let localidadeDestino = data[i].LocalidadeDestino_ID;   let newRow = '<tr class="removal-row">' + '<td class="align-middle">' + '<div class="row">' + '<div class="col-1">' + '<span class="font-weight-bold">Origem</span><br>' + '<span class="origem">' + origem + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Destino</span><br>' + '<span class="destino">' + destino + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">KM</span><br>' + '<span class="km">' + distancia + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Veículo</span><br>' + '<span class="veiculo">' + carro + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Veículo Atualizado</span><br>' + '<input type="text" class="veiculo_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Moto</span><br>' + '<span class="moto">' + moto + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Moto Atualizado</span><br>' + '<input type="text" class="moto_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Caminhão</span><br>' + '<span class="caminhao">' + caminhao + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Caminhão Atualizado</span><br>' + '<input type="text" class="caminhao_atualizado">' + '</div>' + '</div>' + '</div>' + '</td>' + '</tr>';   $('.table-body').append(newRow); //let row = $('.removal-row:last');   // Calcula o valor atualizado e define nos campos diretamente // let veiculo_atualizado = carro + (carro * percentage) / 100; // let moto_atualizado = moto + (moto * percentage) / 100; // let caminhao_atualizado = caminhao + (caminhao * percentage) / 100; // console.log('PORCENTS: ', percentage); //console.log('Veiculo Atualizado:', veiculo_atualizado, 'Moto Atualizado:', moto_atualizado, 'Caminhao Atualizado:', caminhao_atualizado);   // Define os valores diretamente nos campos da nova linha // row.find('.veiculo_atualizado').val(veiculo_atualizado.toFixed(2)); // row.find('.moto_atualizado').val(moto_atualizado.toFixed(2)); // row.find('.caminhao_atualizado').val(caminhao_atualizado.toFixed(2));   arrayData.push({ carro, moto, caminhao, distancia, origem, destino, localidadeOrigem, localidadeDestino, removal_vehicle, removal_motorcycle, removal_tuck }); }   $('#copy_data_table').val(JSON.stringify(arrayData)); }   }); });   //javascript para o formulario de cadastro // $(document).ready(function (event) { $('#uf').change(function () { let code_city = $(this).val(); let deposit = localStorage.getItem('selected_deposit_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city').empty(); $('#deposit').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '<option>'); }   if (data.deposits.length > 0) { for (let i = 0; i < data.deposits.length; i++) { $('#deposit').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '<option>'); } } else { // $('#deposit').prop('disabled', true); // $('#city').prop('disabled', false); }   $('#city').trigger('change'); } });   });   $('#deposit').on('change', function () { depositId = $(this).val(); localStorage.setItem('selected_deposit_id', depositId); });   $('#uf_destiny').change(function () { let code_city = $(this).val(); let depositDestiny = localStorage.getItem('selected_deposit_destiny_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city_destiny').empty(); $('#deposit_destiny').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city_destiny').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '</option>'); }   if (data.deposits.length > 0) { // $('#deposit_destiny').prop('disabled', false); //$('#city_destiny').empty(); // $('#city_destiny').prop('disabled', true); for (let i = 0; i < data.deposits.length; i++) { $('#deposit_destiny').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '</option>'); } } else { // $('#deposit_destiny').prop('disabled', true); // $('#city_destiny').prop('disabled', false); }   $('#city_destiny').trigger('change'); } }); });   $('#deposit_destiny').on('change', function () { let depositDestinyId = $(this).val(); localStorage.setItem('selected_deposit_destiny_id', depositDestinyId); });   }); </code>
×

Informação importante

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