2 INPUT in 1 field only

Question

I have a form that is provided by the bank to generate a banking bill.

I need to split the "name" field in two in my html form.

I need to get the NAME of the client and also the NUMBER of his process.

Example: Field 1: "Name of the So-and-so Student" Field 2: "Case number 999999999"

The result should be sent to the bank by the following input:

<input size="25" maxlength="50" name="nomeSacado" type="text" />

The result should be sent as follows: "Student Name So-and-so Process Number 999999999". All in the same input "So-and-so".

This should be papaya with sugar, but not for me. rsrs

Anyone can help?

Thank you in advance. Rafael

Answer 1

Javascript Puro.

function Concatena()
{
  //atribui a variável nome o valor do input cujo id = nome
  var nome = document.getElementById('nome').value;
  //atribui a variável numProcesso o valor do input cujo id = numProcesso
  var numProcesso = document.getElementById('numProcesso').value; 
  //concatena as duas variaveis separadas por espaço e joga no value do input cujo id = nomeSacado
  document.getElementById('nomeSacado').value=nome+ " " + numProcesso;
}

<input type='text' id='nome' value='Nome do Aluno Fulano de Tal' size="28"/>
<input type='text' id='numProcesso' value='Processo numero 999999999' size="27"/>
<input type='text' id='nomeSacado' name='nomeSacado' size="58" onclick='Concatena();' placeholder="Clique aqui para concatenar"/>

How do we make this field run Hidden without the user needing to click anything to concatenate?

• To run Hidden simply change the type text <input type='text' ... for Hidden <input type='hidden' ....
• Without having to click anything to concatenate we can create a function with immediate execution (IIFE) (function(){})();

_{IIFE means "Immediately-Invoked Function Expression", or we can call it an immediate function. As its name says, it is a Javascript function executed as soon as defined.}

I am not going in the following example to set the input as Hidden or remove the size="58" so that the result of the implementation of the code can be observed.

(function() { 
   //atribui a variável nome o valor do input cujo id = nome
  var nome = document.getElementById('nome').value;
  //atribui a variável numProcesso o valor do input cujo id = numProcesso
  var numProcesso = document.getElementById('numProcesso').value; 
  //concatena as duas variaveis separadas por espaço e joga no value do input cujo id = nomeSacado
  document.getElementById('nomeSacado').value=nome+ " " + numProcesso;
  
}());

<input type='text' id='nome' value='Nome do Aluno Fulano de Tal' size="28"/>
<input type='text' id='numProcesso' value='Processo numero 999999999' size="27"/>
<input type='text' id='nomeSacado' name='nomeSacado' size="58">

If there is a need for correction in the fields, then do so:

Use the event onKeyup which is triggered when the key is dropped.

function Concatena() { 
   //atribui a variável nome o valor do input cujo id = nome
  var nome = document.getElementById('nome').value;
  //atribui a variável numProcesso o valor do input cujo id = numProcesso
  var numProcesso = document.getElementById('numProcesso').value; 
  //concatena as duas variaveis separadas por espaço e joga no value do input cujo id = nomeSacado
  document.getElementById('nomeSacado').value=nome+ " " + numProcesso;
  
}Concatena();

<input type='text' id='nome' value='Nome do Aluno Fulano de Tal' size="28" onKeyup='Concatena();'>
<input type='text' id='numProcesso' value='Processo numero 999999999' size="27" onKeyup='Concatena();'>
<input type='text' id='nomeSacado' name='nomeSacado' size="58">

Javascript must be after HTML

Answer 2

You can do with javascript or concatenate the two fields in your backend in case I am doing with javascript using jquery and an Hidden input that will receive the concatenated value:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<form action="[your_action]" method="post" id="form">
    <input name="nome" type="text" id="nome">
    <input name="processo" type="text" id="processo">
    <input name="nomeSacado" type="hidden" id="nomeSacado">
    <button type="submit">Enviar</button>
</form>

<script>
    $('#form').on('submit', function (e) {
        var nome = $('#nome').val();
        var processo = $('#nome').val();
        $('#nomeSacado').val(nome + ' ' + processo);
    })
</script>