Ir para conteúdo

Arquivado

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

AleksiaMilas

Estilizando formulário com js

Por , em Javascript

Recommended Posts

AleksiaMilas    0

AleksiaMilas
Postado

olá pessoal,

 

estou tentando criar um formulário dinâmico usando javascript, vide código:

 

<html>
<head>
<title>Teste JQuery</title>
<script src="JQuery.js"></script>
<style>
label{
position: absolute;
margin-top: 15px;
height: 15px;
color: white;
border-radius: 3px 3px 0px 0px;
font-family: arial;
font-size: 13.9px;
text-shadow: 0px 0px 0.5px white;
width: 298px;
margin-left: 15.5px;
}
input{
height: 40px;
margin-top: 35px;
padding-top: 15px;
border-radius: 5px;
border-color: #cccccc;
border-width:1px;
width:300px;
margin-left: 15px;
}
</style>
</head>
<body>
<label class='aparecer'>Bom dia</label>
<input type='text' class='campo' name='dia' placeholder='Dê um alô'>
<label class='aparecer'>Boa noite</label>
<input type='text' class='campo' name='noite' placeholder='Dê um tchau'>
<script>
$(document).ready(function() {
$("input").focusin(function () {
$(".aparecer").animate({top:29},500); //label desce
$(".aparecer").css("background-color","green"); //label fica verde
$(".campo").css("border-color","green");
$(".campo").css("box-shadow","0px","0px","3px", "green");
});
$(".campo").blur(function () {
$(".aparecer").animate({top:10},1); //label volta para o lugar
$(".aparecer").css("background-color","white"); //label fica branca de novo
$(".campo").css("border-color","#cccccc");
$(".campo").css("box-shadow","0px","0px","0px", "white");
});
});
</script>
</body>
</html>

 

como observado acima, eu criei campos com nomes distintos, contudo com a mesma classe. quando executado junto com a jquery, este arquivo, ao clicar em um dos inputs, a borda fica verde e desce tipo uma etiqueta em cima do campo. o problema, é que isso deveria acontecer apenas com o campo em que está o foco. sei que o javascript tem uma função "this" para definir um elemento específico, só que não sei como aplicá-la, e também não sei se consigo utilizar o nome do campo de alguma forma como parâmetro para o evento. queria ideias de como solucionar isso. estou acostumada com php, que por assim dizer deixa você fazer o que quiser e aponta onde está o erro, neste caso, o js me deixa no escuro e não estou familirializada com a sintaxe, caso alguém conheça um laço ou função pra arrumar isso, ou puder me dar uma mão com a lógica... desde já agradeço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Snowden    94

Snowden
Postado 




$('.campo').bind('click focus', function(event)



    {



        $(this).css({



            'border-color': 'green',



            'box-shadow': '0px 0px 3px green'



        })



        .prev('.aparecer')



        .css('background-color', 'green')



        .animate({top: 29}, 500);



    }



).blur(function (event)



    {



        $(this).css({



            'border-color': '#cccccc',



            'box-shadow': '0px 0px 0px white'



        });



        $('.aparecer')



        .css('background-color', 'white')



        .animate({top: 10}, 1);



    }



);






 



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					






					
				
			
			



		

	


	
	

	

	







	

		
			
				Ir para a lista de tópicos
				Javascript
			
		
	

	




	

	

	




						


	

		
	


					

					

	

		
        


	

		
    
			
				
					
					
  • 
				
					
					
  • 

    Conteúdo Similar
    

    
	
      
	
		
    • 
			
      
				


	
		ILR master
	

			
      
			
      
				
      Abrir url na mesma janela
      
				Por 
ILR master
      
				
					
      
						Pessoal, pergunta bem simples. Abaixo tenho o seguinte código:

      


	 

      


	<script>
      
	function alerta()
      
	{
      
	  if (window.confirm("Você realmente quer sair?")) {
      
	    window.open("sair.html");
      
	}
      
	}
      
	</script>

      


	 

      


	Funciona perfeitamente, só que está abrindo em outra janela e quero que abra na mesma janela.

      


	 

      


	Alguém pode me ajudar?

      

					
      
				
			
      
		
      • 
	
		
    • 
			
      
				


	
		Giovanird
	

			
      
			
      
				
      Atualizar pagina PHP que esta dentro de uma div
      
				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>


	 

      

					
      
				
			
      
		
      • 
	
		
    • 
			
      
				


	
		Thiago Duarte
	

			
      
			
      
				
      Drag and Drop para arrastar imagem
      
				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?

      

					
      
				
			
      
		
      • 
	
		
    • 
			
      
				


	
		belann
	

			
      
			
      
				
      Upload de arquivos com javascript
      
				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".

      

					
      
				
			
      
		
      • 
	
		
    • 
			
      
				


	
		joeythai
	

			
      
			
      
				
      Não consigo adicionar um valor de forma dinâmica
      
				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.

			

			

				  Aceito