2 INPUT in 1 field only [closed]

-4

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

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

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

Example: Field 1: "Name of Student So-and-so" Field 2: "Process 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 like this: "Name of the Student So-and-so in Process number 999999999". All in the same input "nameSacado".

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

Can anyone help?

Thank you in advance. Rafael

    
asked by anonymous 28.11.2017 / 21:28

2 answers

2

Pure Javascript.

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 having to click anything to concatenate?

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

IIFE stands for Immediately-invoked function expression, or else we can call it an immediate function. As the name says, it is a Javascript function executed as soon as it is defined.

  

I will not go in the following example to set the input as hidden and not to remove the size="58" so that the result of the code execution 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 onKeyup event that 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">
  

The javascript must be after HTML

    
28.11.2017 / 22:58
1

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

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script><formaction="[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>
    
28.11.2017 / 21:43