Separate typed words within an input

Asked

Viewed 828 times

10

I have a input, where the user enters his or 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())" />

Through the function saveNomeSobrenome(), I can only separate the last word typed by the user that I will save as last name, but I needed to separate the "rest" that he typed to save as name. One difficulty I’m also having is transforming that function javascript in jQuery.

Function code:

function saveNomeSobrenome(string){ 
     var frase = string;
     var palavras = frase.split(" ");
     tamanho = palavras.length;
     sobrenome = palavras[tamanho-1];
     console.log(sobrenome);
}
javascript jquery

  • Why don’t you just put two input for first and last names? João Pedro da Silva for example would be wrong. The guy’s name is not "João Pedro da". Better to ask the user for a name than to guess.

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 don’t need to create a function and assign it to an event in html.

You must 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(' ');

7

Try the code below. Tested on fiddle. I tried to make it more like your code but I can reduce it to 2 lines;

Copy 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>

5

First thing you need to know is that there is no Javascript to jQuery conversion, jQuery is Javascript, then all you write in jQuery var "turn pure Javascript code".

What you can do is adapt your code to use the functions of jQuery, 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 splice() of array.

Making a splice(-1, 1), the last element of array will be removed and returned. This will cause the array original contains 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 event change 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>
<input type="text" id="fullname" name="fullname" title="fullname" maxlength="255" class="input-text fullname onestep" placeholder="Escreva o nome completo" />

<button id="bt"> Salvar </button>

Browser other questions tagged javascript jquery

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