在POST之前，如何使用Javascript（或Rails）重新格式化表单输入？

Question

I have a field in my form labeled "Name" that will contain both the First & Last name.

Our existing dynamic server (to which the form is being POSTed to), expects two separate fields (first name, last name).

Can I use Javascript to split the user input into two separate variables before the form is posted to the server? How would I do this?

Answer 1

You should not rely on client side parsing whenever possible. If you are sending this form to an app you can't modify, use the Javascript method mentioned above because you have no control over it (but then why not just have a first and last name field). But if you are controller the backend app, perform all your massaging and data validation there.

Javascript should only be used to enhance the UI experience, not perform import data manipulation, it can be both a security hole and a point of failure if use Javascript for these important tasks.

Also, when manipulating names, keep in mind all the different kinds of formats you will get, such as:

John Smith Jr
Dr John Smith
John Smith Esq.
John Smith IV
John A Smith

So be careful, massaging names is very messy business and the public will enter whatever they want, at the very least, add a small label and ask them to only enter "first and last name" and pray for the best.

Answer 2

For me, the reason for having a single field is for form simplicity, which will get higher conversions.

Getting PHP to split name into firstname and lastname, then getting PHP to resubmit the form to another server might be a bit tricky...

Answer 3

You can do something like this:

var yourForm = document.getElementById('yourFormId');
yourform.onsubmit = new function()
{
    var nameBox = document.getElementById('nameBox');
    var fname = document.createElement('INPUT');
    var lname = document.createElement('INPUT');
    fname.type = 'HIDDEN';
    lname.type = 'HIDDEN';
    fname.name = 'fname';
    lname.name = 'lname';

    var tokens = nameBox.value.split(' ');

    // Note there are a million ways to break this parser, demonstration only
    fname.value = tokens[0];
    lname.value = tokens[1];

    yourForm.appendChild(fname);
    yourForm.appendChild(lname);
}

Answer 4

If it needs to be handled on client-side, Use the Javascript split method to parse the name field value. Then append the two names to the form's url or create a couple of hidden fields.

Answer 5

I would process this on the server end to make sure the data that is passed is accurate from what was posted. It's relatively easy programmatically to split the name, but the problem is how do you define your separator. Most would agree to split it wherever there is a white-space character, but what if they enter a three word name such as Don Juan DiMarco ? If you decide to split the name based on whitespace, you'll have to determine how to assign the first and last names.

$arrNames = preg_split('/\s+/', $_POST['name']);

The above will give you (in PHP) an array of values split by white space. Running that on the string Don Juan DiMarco would give you an array like:

Array([0] => "Don", [1] => "Juan", [2] => "DiMarco")

From there you have to determine which ones are the first name, and which are a middle, and which are a last name. It gets even harder if you have 4 or 5 names entered, which is entirely realistic for certain cultures. All of this is guesswork, which is why I would recommend simply adding a Last Name input field on the front-end. This would eliminate all guess work as to which name is the first name and which is the last name.