rshoe Posted May 17, 2012 Share Posted May 17, 2012 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 Link to comment Share on other sites More sharing options...
margaux Posted May 17, 2012 Share Posted May 17, 2012 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. Link to comment Share on other sites More sharing options...
rshoe Posted May 17, 2012 Author Share Posted May 17, 2012 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; Link to comment Share on other sites More sharing options...
HartleySan Posted May 18, 2012 Share Posted May 18, 2012 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. Link to comment Share on other sites More sharing options...
margaux Posted May 18, 2012 Share Posted May 18, 2012 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]; } Link to comment Share on other sites More sharing options...
HartleySan Posted May 18, 2012 Share Posted May 18, 2012 Good point, margaux. A little validation goes a long way. I just wanted to provide a simple template from which rshoe would hopefully get some ideas. Link to comment Share on other sites More sharing options...
Max Posted May 19, 2012 Share Posted May 19, 2012 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? Link to comment Share on other sites More sharing options...
margaux Posted May 19, 2012 Share Posted May 19, 2012 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. Link to comment Share on other sites More sharing options...
oderza Posted May 19, 2012 Share Posted May 19, 2012 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. Link to comment Share on other sites More sharing options...
HartleySan Posted May 20, 2012 Share Posted May 20, 2012 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. Link to comment Share on other sites More sharing options...
Max Posted May 21, 2012 Share Posted May 21, 2012 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) Link to comment Share on other sites More sharing options...
HartleySan Posted May 21, 2012 Share Posted May 21, 2012 Exactly, Max. Thank you very much for your input. Link to comment Share on other sites More sharing options...
Recommended Posts