Separate typed words within an input

10

I have a input , where the user types his / her full name from the following code:

<input type="text" id="fullname" name="fullname" title="fullname" maxlength="255" class="input-text fullname onestep" placeholder="Escreva o nome completo" onchange="saveNomeSobrenome($j(this).val())" />

By means of the saveNomeSobrenome() function, I can separate only the last word entered by the user that I will save as last name, but I needed to separate the "rest" that he typed to save as a name. One difficulty I'm also having is to transform this function javascript into jQuery .

Function Code:

function saveNomeSobrenome(string){ 
     var frase = string;
     var palavras = frase.split(" ");
     tamanho = palavras.length;
     sobrenome = palavras[tamanho-1];
     console.log(sobrenome);
}
    
asked by anonymous 31.10.2017 / 19:26

3 answers

8

You can transform JS to a direct event in JQuery with:

$("#fullname").change(function(){ 
     var palavras = $(this).val().split(" ");
     tamanho = palavras.length;
     sobrenome = palavras[tamanho-1];
     console.log(sobrenome);
});

So you do not need to create a function and assign it to an event in html.

You should use the split method:

'Paul Steve Panakkal'.split(' '); // Isso retorna ["Paul", "Steve", "Panakkal"]

You can use it this way:

'Paul Steve Panakkal'.split(' ').slice(0, -1).join(' '); // Retorna "Paul Steve"
'Paul Steve Panakkal'.split(' ').slice(-1).join(' '); // Retorna "Panakkal"

So, in common:

var primeiroNome = nomeCompleto.split(' ').slice(0, -1).join(' ');
var Sobrenome = nomeCompleto.split(' ').slice(-1).join(' ');
    
31.10.2017 / 19:42
6

Try the following code. Tested on the fiddle. I tried to leave the most similar to your code but you can reduce it to 2 lines;

Copy the input code as well.

  <input type="text" id="fullname" name="fullname" title="fullname" maxlength="255" class="input-text fullname onestep" placeholder="Escreva o nome completo" onchange="saveNomeSobrenome(this.value);" />
<script>
function saveNomeSobrenome(str){ 
     var frase = str;
     var palavras = frase.split(" ");
     tamanho = palavras.length;
     sobrenome = palavras[palavras.length - 1];
     alert(sobrenome);
}
</script>
    
31.10.2017 / 19:44
5

First thing you need to know is that does not exist Javascript conversion to jQuery, jQuery is JavaScript , so everything you write in jQuery var " ".

What you can do is adapt your code to use the jQuery functions, to follow some pattern determined by the project or for any other reason.

One of the ways to do what is asked in the question, is by using the% method of the array .

By doing a splice() , the last element in the array will be removed and returned. This will make the original array contain exactly the words you need (the rest of the name).

In the example I also removed the event and used a button to trigger the function, because it is easier to test. If you want to change the button back to the splice(-1, 1) event just change this line

$('#bt').on('click', saveNomeSobrenome);

for

$('#fullname').on('change', saveNomeSobrenome);

$('#bt').on('click', saveNomeSobrenome);

function saveNomeSobrenome(){ 
  var input = $('#fullname').val();
  
  const palavras = input.split(" ");
  sobrenome = palavras.splice(-1, 1).join('');
  const resto = palavras.join(' ');
  
  console.log('Sobrenome: ${sobrenome} — Resto do nome: ${resto}');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="text" id="fullname" name="fullname" title="fullname" maxlength="255" class="input-text fullname onestep" placeholder="Escreva o nome completo" />

<button id="bt"> Salvar </button>
    
31.10.2017 / 19:50