SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    very basic form text field update event

    back to basics.

    i have 3 form elements:

    Code:
    <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. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,719
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by antonyx View Post
    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
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    could you please show me how it is done?

  4. #4
    SitePoint Enthusiast Anthony.Barnes's Avatar
    Join Date
    Aug 2011
    Location
    Canberra, Australia
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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).

    Code JavaScript:
    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. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,719
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by antonyx View Post
    could you please show me how it is done?
    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.

    Code javascript:
    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.

    Code javascript:
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,719
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by antonyx View Post
    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
    Yes, you can use instead:
    value.substr(1).toLowerCase()
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •