Very basic form text field update event

JavaScript
1

back to basics.

i have 3 form elements:

<form name="mainform" id="mainform">

<select name="title" id="title">
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
</select><br />

First name <input type="text" name="firstname" id="firstname" /><br />

Last name <input type="text" name="lastname" id="lastname"/><br />



Passenger name <input type="text" name="paxname" id="paxname" />

</form>

when user chooses a TITLE from title drop down this should update paxname with the chosen value and a space

when the user types a FIRST NAME into the first name textbox this should update the paxname with the value and a space

when the user types a LAST NAME into the last name textbox this should update the paxname with the value

therefore at the end of the process the paxname will have the full name of the person in order with spaces in between. also i would like the first name and last name values to be changed to proper case ie John Smith once placed into paxname

the update process does not have to be instantaneous, it can perhaps update the paxname textbox when the focus is gone from the field in question, dont mind how it works as long as it updates.

thanks, hopefully this is quite straightforward. also i would prefer a small bit of JS which i can add to the form element rather than a function if possible

2

It is quite straight-forward. You can use the form’s onkeypress event (and possible the onchange event for edge-cases) to update the paxname field according to your requirements.

3

could you please show me how it is done?

4

This is quite straight forward, however you would have to deploy some functions to support cross browser event binding and with the number of events you want to listen I think it’s simplified by deploying a library that does the work for you (I’m quite fond of jQuery).


String.prototype.ucfirst = function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
};

function populate() {
    $('#paxname').val(
               $('#title').val() + ' ' +
               $('#firstname').val().ucfirst() + ' ' +
               $('#lastname').val().ucfirst()
    );    
}
    
$('input,select','#mainform').bind('change keyup blur focus',populate);

Here it is in action: JS Fiddle

The first function does your uppercase transformation, the second populates your ‘paxname’ field, and the 3rd uses a jQuery method for binding events to trigger the function to update the paxname field.

To write this in native javascript takes a fair bit longer and the only reason I would go down that path is if you need to learn how its done, or to save page bandwidth (or cpu cycles if this page is intended for mobile devices). I would also avoid writing inline javascript, either in html attributes like ‘onclick="javascript: … "’ or inline <script> tags. It is more maintainable if your javascript is made as unobtrusive as possible.

5

Indeed. The other chap has shown you using jQuery, which shortens things quite a bit, at the expense of needing the large jQuery library attached.

Here’s how it might be done without jQuery, and using just native JavaScript.

What do we need to know to begin with. The unique identifier for the form, the field elements of the form that we’ll be monitoring, changes to the values (for initial casing), and info about what we’ll be updating, and how.


var config = {
    form: 'mainform',
    fields: ['title', 'firstname', 'lastname'],
    values: function (value, fieldname) {
        return value.charAt(0).toUpperCase() + value.substr(1);
    },
    update: {
        field: 'paxname',
        func: function (values) {
            return values.join(' ');
        }
    }
};

Now all we need to do is to set up the form so that the event monitoring and updating occurs.


function formUpdate(config) {
    function performUpdate() {
        var values = [],
            value = '',
            i;
        for (i = 0; i < config.fields.length; i += 1) {
            value = form.elements[config.fields[i]].value;
            values[i] = config.values(value, config.fields[i]);
        }
        form.elements[config.update.field].value = config.update.func(values);
    }
    var form = document.getElementById(config.form);
    form.onkeyup = performUpdate;
    form.onchange = performUpdate;
}

formUpdate(config);

Put the script at the end of the body, just before the </body> tag, and that should do the job just nicely.

6

hi thanks a lot for that, works great.

one thing though. if the user enters the values in capital letters, the script does not convert the value to proper case, it stays as capital. can this be altered to change to proper case ie. John Smith regardless of whether the user enters john smith or JOHN SMITH

7

Yes, you can use instead:
value.substr(1).toLowerCase()