1

ola, preciso de pegar parte do valor do input

function exibir(){

 			var elem = document.getElementById("campo3").value; 
 			var sel = document.getElementById("campo4").value;
            
 			 document.getElementById("demo1").value = elem+sel;
 			
 			
 			}
<link href="https://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Nova pagina 1</title>
</head>
<body>
<div class="container">
<div class="panel panel-default" id="panel_dadosdasolicitacao2" >
							
<div class="panel-body">

	<div class="row" >
		<div class="form-group col-md-3">	
        <label> Campos 1 </label>
<input type="text" class="form-control" name="campo3" id="campo3" value="Contrato">
		</div>
	</div>	
	<div class="row">				
	<div class="form-group  col-md-3">	
				<label> Campos 2 </label>			
<input type="text" class="form-control" name="campo4" id="campo4" value="Empresa">

	</div>
	</div>	
	
	<div class="row">			
	<div class="form-group  col-md-3">	
	<label> Junção </label>						
<input type="text" class="form-control" name="demo" id="demo1" readonly>
	</div>
    </div>	
    <div class="row">
    	<div class="form-group  col-md-3">	
	<label> Resultado esperado </label>						
<input type="text" class="form-control" name="demo" id="demo2" value="ConEmp">
	</div>
	</div>
<div class="form-group col-md-3">
<button class="btn btn-dark" onclick="exibir()" id="clicar">Gerar</button>
</div>
	</div>
							
								 
							

</div>

	</div>
</body>

</html>

Nesse exemplo ele copia os dois valores eu queria mais ou menos assim:

um campo que aparece [ContratoEmpresa] apresentar no campo apenas os 3 primeiros valores do campo. exemplo Resultado: [ContratoEmpresa] aparecer [ConEmp]

Resultado Esperado

3 Respostas 3

3

Simples, basta você utilizar substr(0,3). Este método funciona recebendo dois tipos de parâmetros:

  • O primeiro parâmetro é o index inicial que você pegará da sua String, no caso, sendo o primeiro index 0;
  • O segundo é a quantidade de caracteres que você deseja extrair, que seria 3;

Veja no seu código:

function exibir(){

 			var elem = document.getElementById("campo3").value; 
 			var sel = document.getElementById("campo4").value;
        	    
 				var resultado1 = elem + sel;
			var resultado2 = elem.substr(0, 3) + sel.substr(0, 3);

 			document.getElementById("demo1").value = resultado1;
 			document.getElementById("demo2").value = resultado2;
 			
 			}
<link href="https://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Nova pagina 1</title>
</head>
<body>
<div class="container">
<div class="panel panel-default" id="panel_dadosdasolicitacao2" >
							
<div class="panel-body">

	<div class="row" >
		<div class="form-group col-md-3">	
        <label> Campos 1 </label>
<input type="text" class="form-control" name="campo3" id="campo3" value="Contrato">
		</div>
	</div>	
	<div class="row">				
	<div class="form-group  col-md-3">	
				<label> Campos 2 </label>			
<input type="text" class="form-control" name="campo4" id="campo4" value="Empresa">

	</div>
	</div>	
	
	<div class="row">			
	<div class="form-group  col-md-3">	
	<label> Junção </label>						
<input type="text" class="form-control" name="demo" id="demo1" readonly>
	</div>
    </div>	
    <div class="row">
    	<div class="form-group  col-md-3">	
	<label> Resultado esperado </label>						
<input type="text" class="form-control" name="demo" id="demo2">
	</div>
	</div>
<div class="form-group col-md-3">
<button class="btn btn-dark" onclick="exibir()" id="clicar">Gerar</button>
</div>
	</div>
							
								 
							

</div>

	</div>
</body>

</html>

5
  • Corrige ai,, a junção deve ser ContratoEmpresa no elemento de id=campo3 e ConEmp no elemento de id=campo4
    – user60252
    Commented 4/05/2018 às 20:06
  • Não entendi @LeoCaracciolo. Esses campos são os inputs dos nomes Contrato e Empresa, respectivamente, não? O que eu entendi é que o usuário queria que o resultado no campo demo1 fosse igual ao do demo2. Porém, independente dessa ambiguidade o resultado final é o mesmo.
    – bio
    Commented 4/05/2018 às 20:10
  • No seu resultado esperado o que aparece é o value já existente e ele quer o resultado de substring
    – user60252
    Commented 4/05/2018 às 20:17
  • 1
    Acho que a imagem postada confundiu tudo. No código há os dois inputs
    – user60252
    Commented 4/05/2018 às 20:21
  • Ah!! Agora já foi! :) , mas como disse, o aprendizado foi o mesmo.
    – bio
    Commented 4/05/2018 às 20:22
1

O método substr(inicio[, quantos]). inicio um inteiro entre 0 e o comprimento da string, especificando a posição na string do primeiro caractere a ser incluído na substring retornada. O segundo são quantos itens irá retornar à partir do índice informado no primeiro parâmetro

function exibir(){

 var elem = document.getElementById("campo3").value; 
 var sel = document.getElementById("campo4").value;
      
      var res = elem.substring(0, 3);
      var res2 = sel.substring(0, 3);
            
 document.getElementById("demo1").value = elem+sel;
       
 document.getElementById("demo2").value = res+res2;	
 			
 }
<link href="https://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Nova pagina 1</title>
</head>
<body>
<div class="container">
<div class="panel panel-default" id="panel_dadosdasolicitacao2" >
							
<div class="panel-body">

	<div class="row" >
		<div class="form-group col-md-3">	
        <label> Campos 1 </label>
<input type="text" class="form-control" name="campo3" id="campo3" value="Contrato">
		</div>
	</div>	
	<div class="row">				
	<div class="form-group  col-md-3">	
				<label> Campos 2 </label>			
<input type="text" class="form-control" name="campo4" id="campo4" value="Empresa">

	</div>
	</div>	
	
	<div class="row">			
	<div class="form-group  col-md-3">	
	<label> Junção </label>						
<input type="text" class="form-control" name="demo" id="demo1" readonly>
	</div>
    </div>	
    <div class="row">
    	<div class="form-group  col-md-3">	
	<label> Resultado esperado </label>						
<input type="text" class="form-control" name="demo" id="demo2" value="">
	</div>
	</div>
<div class="form-group col-md-3">
<button class="btn btn-dark" onclick="exibir()" id="clicar">Gerar</button>
</div>
	</div>
							
								 
							

</div>

	</div>
</body>

</html>

2
  • @dvd acho que vc está vendo coisas imaginarias kkk
    – user60252
    Commented 4/05/2018 às 20:14
  • Verdade. Juro que vi rss
    – Sam
    Commented 4/05/2018 às 20:15
0

Além do método substring das outras respostas, pode-se usar match com uma expressão regular:

^\w{3} -> pega somente os 3 primeiros caracteres da string

Assim como o substring, o match é um método do ECMAScript 1, portanto também compatível com todos os navegadores.

Exemplo:

function exibir(){
   var elem = document.getElementById("campo3").value; 
   var sel = document.getElementById("campo4").value;
      
   var elem3 = elem.match(/^\w{3}/);
   var sel3 = sel.match(/^\w{3}/);
   
   document.getElementById("demo1").value = elem+sel;
   document.getElementById("demo2").value = elem3+sel3;	
}
<div class="container">
   <div class="panel panel-default" id="panel_dadosdasolicitacao2">
      <div class="panel-body">
         <div class="row">
            <div class="form-group col-md-3">
               <label> Campos 1 </label>
               <input type="text" class="form-control" name="campo3" id="campo3" value="Contrato">
            </div>
         </div>
         <div class="row">
            <div class="form-group col-md-3">
               <label> Campos 2 </label>
               <input type="text" class="form-control" name="campo4" id="campo4" value="Empresa">
            </div>
         </div>
         <div class="row">
            <div class="form-group col-md-3">
               <label> Junção </label>
               <input type="text" class="form-control" name="demo" id="demo1" readonly>
            </div>
         </div>
         <div class="row">
            <div class="form-group col-md-3">
               <label> Resultado esperado </label>
               <input type="text" class="form-control" name="demo" id="demo2" value="">
            </div>
         </div>
         <div class="form-group col-md-3">
            <button class="btn btn-dark" onclick="exibir()" id="clicar">Gerar</button>
         </div>
      </div>
   </div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .