How do I reformat form input before POST using Javascript (or Rails)?
I have a field in my form labeled "First Name" that will contain both first name and last name.
Our existing dynamic server (to which the form is POSTed) expects two separate fields (first name, last name).
Can I use Javascript to split user input into two separate variables before the form is submitted to the server? How should I do it?
source to share
I would process this on the server to make sure the submitted data is accurate from what was posted. It's relatively easy to programmatically separate the name, but the problem is how you define your separator. Most would agree to split it wherever there is a white space character, but what if they enter a three-digit name like Don Juan DiMarco ? If you choose to split the name based on spaces, you will need to figure out how to assign the first and last name.
$arrNames = preg_split('/\s+/', $_POST['name']);
The above will give you (in PHP) a space-separated array of values. Doing this on Don Juan DiMarco's line will 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 the middle, and which are the last name. It gets even more difficult if you enter 4 or 5 names, which is quite realistic for certain cultures. This is all guesswork, so I would recommend just adding a name input field on the front-end. This will remove all assumptions about which name is the first name and which is the last name.
source to share
You shouldn't rely on client-side parsing whenever possible. If you are submitting this form to an application that you cannot modify, then use the Javascript method above because you have no control over it (but then why not just provide a first and last name field). But if you are the backend application controller, do all your massaging and data validation there.
Javascript should only be used to improve the user interface, not to handle import data, it can be both a security hole and a point of failure if Javascript is used for these important tasks.
Also, when manipulating names, keep in mind all the different formats you get, for example:
John Smith Jr
Dr John Smith
John Smith Esq.
John Smith IV
John A Smith
So be careful, massaging names is a very dirty business and the public enters whatever they want, at least add a little label and ask them to enter only "first and last name" and pray for the best.
source to share
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);
}
source to share
If this needs to be handled on the client side, use the Javascript splitting method to parse the name field value. Then add two names to the form url or create a couple of hidden fields.
source to share