Jump to content
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

Share this post


Link to post
Share on other sites

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


Ao inves de innerHTML, use value

 

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

 

Share this post


Link to post
Share on other 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!

Share this post


Link to post
Share on other 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!

Share this post


Link to post
Share on other 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!

Share this post


Link to post
Share on other 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>

 

 

 

Share this post


Link to post
Share on other 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>






 

Share this post


Link to post
Share on other 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!!!!

 

Share this post


Link to post
Share on other 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>

 

Share this post


Link to post
Share on other 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!!!

 

 

 

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 alsimmonsjr
      Olá à todos, gostaria de saber se alguém pode me ajudar a fazer root no meu celular que já coloquei o nome no tópico, se alguém pode me ajudar eu agradeço, desde já agradecido, muito obrigado e tchau.
    • By LRDSILVA3
      Pessoal Boa Tarde ,Tudo certo?
      Estou com um projeto para aprendizagem (já que só tenho conhecimentos de css e html) e upgrade da firma onde trabalho e não estou conseguindo salvar os valores do formulário no banco de dados,a conexão é feita porem salva todos os valores como null.
      <?php
      $servername = "192.168.1.109";
      $database = "cadastrokm";
      $username = "teste";
      $password = "123456";
      // Create connection
      $conn = mysqli_connect($servername, $username, $password, $database);
      // Check connection
      if (!$conn) {
            die("Connection failed: " . mysqli_connect_error());
      }
       
      echo "Connected successfully";
      $funcionarioKm = isset( $_POST['funcionarioKm']); 
          $veiculoKm = isset($_POST['veiculoKm']);
          $kmInicial = isset($_POST['kmInicial']);
          $kmFinal = isset($_POST['kmFinal']);
       
      $sql = "INSERT INTO km (funcionarioKm,veiculoKm,kmInicial,kmFinal) 
          VALUES ('$funcionarioKm','$veiculoKm','$kmInicial',
          '$kmFinal')";
      if (mysqli_query($conn, $sql)) {
            echo "New record created successfully";
      } else {
            echo "Error: " . $sql . "<br>" . mysqli_error($conn);
      }
      mysqli_close($conn);
      ?>
      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

      </head>
      <body>
        
          <div class=container>
      <section>
          <!-- Página de Cadastro de KM -->
          <h1>Cadastro de Km</h1>
          <hr><br><br>
          <form method="post" action="conexao.php">
          <p class="font-weight-bold">Favor Selecione seu Nome:</p>
                <select id="funcionarioKm"  name="funcionarioKm"required autofocus>
                    <option>Motorista</option>
                    <option>Almir</option>
                           <option>Maykon</option>
                                      <option>Jorge</option>    
                                  </select>
      </br></br>
                <p class="font-weight-bold">Favor Selecione o Veiculo:</p>
                <select id="veiculoKm" value="veiculoKm " name="veiculoKm"required>
                    <option>Veiculo</option>
                    <option>L200</option>
                           <option>Strada 01</option>
                                      <option>Strada 02</option>    
                                      <option>Caminhão 01</option>    
                                  </select> 
       </br></br>
                 <label for="litros"><p class="font-weight-bold">Informe a Quilometragem Inicial:</p></label>
              <input type="number" id="kmInicial" name="kmInicial" required/>
      </br></br>
              <label for="litros"><p class="font-weight-bold">Informe a Quilometragem Final:</p></label>
              <input type="number" id="kmFinal" name="kmFinal" required />
      </br></br>
              <input type="submit" value="Salvar"    class="btn btn-primary btn-md">
              <input type="reset" value="Limpar"class="btn btn-primary btn-md" >
              <br><br>
      </form>
      </section>
      </div>
      </body>
      </html>
       

       
       
    • By dev-02
      <b>Dias</b> <span id="dia"></span> - <b>Tempo</b> <span id="hora"></span>:<span id="minuto"></span>:<span id="segundo"></span> var data = 15; var target_date = new Date(`\n October ${data}, 2019`).getTime(); var dias, horas, minutos, segundos; var regressiva = document.getElementById("regressiva"); setInterval(function() { Timer(); }, 1000); function Timer() { var current_date = new Date().getTime(); var segundos_f = (target_date - current_date) / 1000; dias = parseInt(segundos_f / 86400); segundos_f = segundos_f % 86400; horas = parseInt(segundos_f / 3600); segundos_f = segundos_f % 3600; minutos = parseInt(segundos_f / 60); segundos = parseInt(segundos_f % 60); document.getElementById('dia').innerHTML = dias; document.getElementById('hora').innerHTML = horas < 10 ? `0${horas}` : `${horas}`; document.getElementById('minuto').innerHTML = minutos < 10 ? `0${minutos}` : `${minutos}`; document.getElementById('segundo').innerHTML = segundos < 10 ? `0${segundos}` : `${segundos}`; if(horas == 0 && minutos == 0 && segundos == 0) { data = data + 2; } }  
    • By proflupin
      criei uma página que busca alguns dados no BD e retornar em forma de collapse. Como existe um WHILE executando o collapse, ele sempre o executa com o mesmo ID, ou seja, se eu tiver 20 collapse, todos vão ser abertos ao clicar no primeiro.
      A dúvida é, como eu posso criar um novo ID para o collapse a cada loop do While?
      Código:
       
      <?php while($result_inners = mysqli_fetch_object($result_inner)){ ?> <div class="card-footer "> <a class="text-muted" data-toggle="collapse" href="#collapse1" role="button" aria-expanded="false" aria-controls="collapseExample"> <i class="fas fa-comment-alt"></i> <?php if(!empty($result_inners->nome_completo)) echo $result_inners->nome_completo . " respondeu..."; else echo "Aguardando resposta do técnico." ?> </a> <div class="collapse " id="collapse1"> <div class="bg-white mt-2 p-2"> <?php echo nl2br($result_inners->mensagem) ?> </div> <span style="color: #6c757d; float: right;"><?php echo date('d/m/Y H:i', strtotime($result_inners->data_hora)) ?></span> </div> </div> <?php } ?>  
    • By Lucas Trindade
      Boa noite galera!
       
      Estou desenvolvendo um site em Bootstrap e surgiu uma dúvida afinal nunca desenvolvi um layout desta forma.
       
      Na foto anexada os 3 cards estão deslocados para baixo do container e isto faz com que a seção seguinte dos cards fique em cima deles por conta deste deslocamento.
       
      Não sei se fui bem claro mas, como eu arrumaria isso? 
       
      Preciso desenvolver este site para enviar para uma empresa. Alguém poderia me ajudar? Se for necessário envio o arquivo com o site inteiro.Obrigado
×

Important Information

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