Take part of the value of the field

Question

Take part of the value of the field

Asked 6 years, 8 months ago

Viewed 59 times

1

hello, I need to take part 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 he copies the two values I kind of wanted it like this:

a field that appears [Contratoempresa] present in the field only the first 3 values of the field. example Result: [Contratoempresa] turn up [Conemp]

3 answers

3

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

The first parameter is the initial index that you will take 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>

Correct there,, the junction should be ContratoEmpresa in the element of id=campo3 and ConEmp in the element of id=campo4

– user60252

2018/05/04 at 20:06
I don’t understand @Leocaracciolo. These fields are the inputs of the names Contrato and Empresa, respectively, no? What I understood is that the user wanted the result in the field demo1 was the same as that of demo2. However, regardless of this ambiguity the end result is the same.

– bio

2018/05/04 at 20:10
In its expected result what appears is the existing value and it wants the substring result

– user60252

2018/05/04 at 20:17
1

I think the posted image confused everything. In the code there are the two inputs

– user60252

2018/05/04 at 20:21
Ah!! Now it’s gone! : ) but as I said, the learning was the same.

– bio

2018/05/04 at 20:22

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.

by user60252 · Answer 1 · 2018-05-04T19:56:57+00:00

The method substr(inicio[, quantos]). inicio 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 is 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>

by Sam • **79,597** points · Answer 2 · 2018-05-04T20:29:59+00:00

Besides the method substring of the other answers, one can use match with a regular expression:

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

Just like the substring, the match is a Ecmascript 1 method, therefore 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>