How to display forename and surname in separate text inputs?

Question

In a drop down menu, I have each option displayed like below as an example:

scomp23 - Jack Turner

Now with this code below:

var text = $(this).find('option:selected').text();
var split = text.split(' - ');
$('#currentAdminAlias').val( split[0] );     
$('#currentAdminForename').val( split[1] );   
$('#currentAdminSurname').val( split[2] );

What I am trying to do is display scomp23 in #currentAdminAlias text input (this works fine), display Jack in #currentAdminForename text input and display Turner in #currentAdminSurname text input.

The problem I am having is that it displays both forename and surname in the #currentAdminForename text input only.

Now I know why this happens but my question is how can I display the forename and surname in separate text inputs?

See https://stackoverflow.com/questions/1122328/first-name-middle-name-last-name-why-not-full-name — Raedwald, Oct 01 '19 at 10:36
[Assuming that everyone has a forename and surname is incorrect](https://www.kalzumeus.com/2010/06/17/falsehoods-programmers-believe-about-names/). — Raedwald, Oct 01 '19 at 10:36

score 3 · Answer 1 · answered Dec 19 '12 at 00:28

3

        var split = text.split(' ');
        $('#currentAdminAlias').val( split[0] );     
        $('#currentAdminForename').val( split[2] );   
        $('#currentAdminSurname').val( split[3] );

answered Dec 19 '12 at 00:28

Sam Sussman

1,005
8
27

I will accept answer when it lets me. Can I ask a little question. If I have a drop down option which is `scomp22 - Andy Hall` and I have another option which is `John Bailey-Smith`, then can I use the same code above or do I need to change it a bit? – Manixman Dec 19 '12 at 00:31
If you don't always have the same structure for the option text, using data attributes becomes very useful, rather than relying on parsing the option text. See my answer. – SamStephens Dec 19 '12 at 00:37
No you can't. The split on the first one will give you 4 results in the array, but split on the second will give you only 2 entries. If you always have the form [adminAlias] - [First] [Last] OR [First] [Last] then you can do the split on space. Check the length of the array. if the length is 2 then 0 is first and 1 is last. If the length is 4, then admin is 0, first is 2, last is 3. – Sam Sussman Dec 19 '12 at 00:37
I will have to give SamStephens best answer as his answer is more flexible as people with hyphen in their surnames goes in the right text input. But I upvoted your answer – Manixman Dec 19 '12 at 00:48
I still think that you'll be much better off if you can move away from trying to parse the select text entirely, and use data attributes. The text parsing version of my answer still only handles the simplest of inputs, and is inflexible. What happens when you want to add middle names? No problem if you're using data attributes. Javascript code change required if you're using text parsing. – SamStephens Dec 19 '12 at 01:32
Good idea. I answered his question, but you suggested a different and possibly better way. @SamStephens – Sam Sussman Dec 19 '12 at 01:49
The big thing for me is that you're usually better off providing structured data. – SamStephens Dec 19 '12 at 17:42

SamStephens · Accepted Answer · 2013-04-19T16:39:27.447

        var text = $(this).find('option:selected').text();
        var split = text.split(' - ');
        var names = split[1].split(' ');
        $('#currentAdminAlias').val( split[0] );     
        $('#currentAdminForename').val( names[0] );   
        $('#currentAdminSurname').val( names[1] );

Or consider attaching each of the values you want to the option element as an HTML 5 data attribute. Which would give you

        var element = $(this).find('option:selected');
        $('#currentAdminAlias').val(element.data('alias'));
        $('#currentAdminForename').val(element.data('forename'));
        $('#currentAdminSurname').val(element.data('surname'));

With a sample option element looking like

        <option data-alias="scomp23" data-forename="Jack" data-surname="Turner">
          scomp23 - Jack Turner
        </option>

At the moment this application is only dealing with first and last names so it should be fine with your answer — Manixman, Dec 19 '12 at 03:16

How to display forename and surname in separate text inputs?

2 Answers2