Jump to content
Larry Ullman's Book Forums

Recommended Posts

I need some help with a project. I have a form where a person enters their full name (First Middle Last).

When the full name is entered In this form it will show the length in numbers of the full name. Other sections of the form will show just the middle name and show their Initals. I Think I use the slice method but not sure how to go about applying the code. If anyone can help I would appreciate it.

 

Thanks;

Randy

Share this post


Link to post
Share on other sites

Can you show the code you've used for the form where the user enters his full name - presumably full name is one field and are you assuming the user enters his full name separated by spaces? If so you can use split to split the field on ' ' (space) into an array.

Share this post


Link to post
Share on other sites

i have posted the code below. I am reading in chapter two of the Modern JavaScript book. I don't know about split. I have not read that part.

 

Thanks;

Randy

 

 

 

 

function formatNames(){

'use strict'

var formattedLength;

var formattedMiddle;

var formattedInitials;

var fullName = document.getElementById('fullName').value;

formattedLength = fullName.length;

formattedMiddle = fullName.slice(6,11);

formattedInitials = fullName.charAt(0) + fullName.slice(7,8) + fullName.charAt(11);

document.getElementById('lengthName').value = formattedLength;

document.getElementById('middleName').value = formattedMiddle;

document.getElementById('initials').value = formattedInitials;

return false;

}//Endof formatNames() functions.

 

function init(){

'use strict'

document.getElementById('theForm').onsubmit = formatNames;

}//End of init() function

window.onload = init;

Share this post


Link to post
Share on other sites

rshoe, I whipped up the following script, which will hopefully shed some light on one possible approach to your problem:

 

<!DOCTYPE html>

<html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>JS String methods</title>

 </head>

 <body>

   <form>

     <input type="text">

     <input type="submit" value="Submit">

   </form>

   <div id="output"></div>

   <script>

     document.forms[0].onsubmit = function () {

       var fullStr = this.elements[0].value;

       var fullStrLen = fullStr.length;

       var names = fullStr.split(' ');

       var fName = names[0];

       var mName = names[1];

       var lName = names[2];

       var initials = fName.charAt(0) + mName.charAt(0) + lName.charAt(0);

       document.getElementById('output').innerHTML = 'Full string: ' + fullStr + '<br>Length: ' + fullStrLen + '<br>First name: ' + fName + '<br>Middle name: ' + mName + '<br>Last name: ' + lName + '<br>Initials: ' + initials;

       return false;

     };

   </script>

 </body>

</html>

 

My general approach was to use the split method to split the input string up on its spaces, and then use the charAt method to get the first character of the three names.

 

As a good quick reference for JS String methods, I recommend the following page:

 

http://www.w3schools.com/jsref/jsref_obj_string.asp

 

Please let us know if you have any other questions.

Share this post


Link to post
Share on other sites

I did something similar - however you may want to check that the user has input a middle name

var fullName = document.getElementById('fullName').value;
var names = fullName.split(" ");
var firstName = names[0];
if (names[2]) {
 var lastName = names[2];
 var middleName = names[1];
 }
else {
 var lastName = names[1];
 }

Share this post


Link to post
Share on other sites

Hi

 

As a newbie, I'm not entirely sure what the purpose of this line is:

 

formattedMiddle = fullName.slice(6,11);

 

Presumably you want to extract the middle name from the string, but how do you know that it starts at 6 and is 11 characters? What if there are two middle names?

Share this post


Link to post
Share on other sites

formattedMiddle = fullName.slice(6,11) will return a substring of fullName starting at position 6 and finishing at position 11. I agree with you Max - the code as originally written makes assumptions about what the user will input.

Share this post


Link to post
Share on other sites

Speculating on the splice is a waste of time, so I agree that split is a much better option. You could also check the index of a space, or other marker, and then splice at that point.

 

With all that said, however, I would be careful for people that have a space IN their first or last name:

 

Examples:

Anne Marie

Billy Ray

Anna Beth

Xui Li

Juan Pedro

etc...

 

This could be a full name:

Juan Pedro Gómez Martínez

 

If you insist on only providing one input for a full name, then I would guide your user to separate their first, last and middle names with a comma and then use a split on the comma.

 

Once you get further into the book you'll see ways on how you can show tips to your users on how they should format their input. You can also validate their input to make sure they are following your required format before the submit is processed.

Share this post


Link to post
Share on other sites

oderza, you're absolutely right about how users might have a space in one or more of their names. I thought about addressing that, but again, to keep things simple for demonstration purposes, I omitted that part.

In truth, the best solution is to do what most sites do: have a separate field for the different parts of a person's name. It's the only reliable way to get the different parts of the name properly.

Share this post


Link to post
Share on other sites

Yes - and in Spain you have two surnames, so that Spanish web sites inputs are:

 

Forename:

First surname

Second Surname

 

I can't think of any way of reliably splitting one string into forename(s) and surname(s)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...