Create a sequence from fields

Asked

Viewed 83 times

1

Hello, I would like to join the values of the fields and add 1 according to the last input value,
Example: inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

javascript

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style type="text/css">
.col-md-3 {
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<meta charset="utf-8">
<title>Documento sem título</title>
</head>

<body>
<div class="row">
  <div class="form-group col-md-1">
    <label>Ano</label>
    <input type="text" class="form-control" id="ano">
  </div>
  <div>+</div>
  <div class="form-group col-md-2">
    <label>Tipo</label>
    <select class="form-control" id="tipo">
      <option value="">Selecione</option>
      <option value="CON_">Contrato</option>
      <option value="BOL_">Boleto</option>
    </select>
  </div>
  <div>+</div>
  <div class="form-group col-md-1">
    <label>Nr</label>
    <input type="text" class="form-control" id="campo">
  </div>
  <div>=</div>
  <div class="form-group col-md-3">
    <label>Resultado</label>
    <input type="text" class="form-control" id="Resultado">
  </div>
</div>
</body>
</html>

javascript html
  • 1

    Can describe better what you want?

1 answer

1


The function leftPad fills the values left of a number, using the totalWidth to define how far it should be filled, and paddingChar to tell which character is used.

function leftPad(value, totalWidth, paddingChar) {
  var length = totalWidth - value.toString().length + 1;
  return Array(length).join(paddingChar || '0') + value;
};


function concatenar(){
 //recuperando os valores dos inputs
 var ano = document.getElementById("ano").value; 
 var tipo = document.getElementById("tipo").value;
 var campo = document.getElementById("campo").value;
 campo= parseInt(campo)+1;
 
 campo = leftPad(campo, 7); 
 
 //formatando o campo do select, 3 primeiros caracteres em maiúsculas concatenada com traço   
 tipo = tipo.substring(0, 3).toUpperCase()+"_";
 //concatenando os valores para apresentar no campo resultado           
 document.getElementById("Resultado").value = ano+tipo+campo;
       
 			
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="form-group col-md-1">
    <label>Ano</label>
    <input type="text" class="form-control" id="ano">
  </div>
  <div>+</div>
  <div class="form-group col-md-2">
    <label>Tipo</label>
    <select class="form-control" id="tipo">
      <option value="">Selecione</option>
      <option value="CON_">Contrato</option>
      <option value="BOL_">Boleto</option>
    </select>
  </div>
  <div>+</div>
  <div class="form-group col-md-1">
    <label>Nr</label>
    <input type="text" value="234" class="form-control" id="campo">
  </div>
  <div>=</div>
  <div class="form-group col-md-3">
    <label>Resultado</label>
    <input type="text" class="form-control" id="Resultado">
  </div>
</div>
<button type="button" onclick="concatenar()">Concatenar</button>

Browser other questions tagged javascript html

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