Take part of the field value

Navigation
1

Hello, I need to get some of the input value 

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>

In this example it copies the two values I wanted more or less like this:

A field that displays [ContractElement] displays only the first 3 field values in the field. example Result: [Contract] appear [ConEmp]

    
asked by anonymous 04.05.2018 / 21:49

3 answers

3

Simple, just use substr (0,3) . This method works by getting two types of parameters:

  • The first parameter is the initial index that you will get from your String, in this case, being the first index 0 ;
  • The second is the amount of characters you want to extract, which would be 3 ;

See in your code: 

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>
    
04.05.2018 / 21:51
1
  

The substr(inicio[, quantos]) method. % with an integer between 0 and the length of the string, specifying the position in the string of the first character to be included in the returned substring. The second are how many items will return from the index entered in the first parameter 

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>
    
04.05.2018 / 21:56
0

In addition to the substring method of other responses, you can use match with a regular expression : 

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

As with substring , match is an ECMAScript 1 method, so it is also compatible with all browsers.

Example: 

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>
    
04.05.2018 / 22:29
Timeout in the Python input function Filtering data in mysql