jQuery: Text Input Split Tutorial

5
jQuery: Text Input Split Tutorial

This tutorial will show you how to take one input field and split the contents into two hidden fields, which is useful when you have limited space on a form. In my example, I have a field called Name, but I would like the value split into two fields and stored in the database in two different columns First Name and Last Name. Using JavaScript and a little simple trickery, we can make this happen.

To view a working demo, Click here.

  1. Setup the HTML form with the proper ID’s so that the fields can be easily selected with jQuery

    [html]
    <html>
    <head>
    <title>jQuery Split</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    </head>
    <body>
    <form>
    <input name="name" id="name" type="text">
    <input name="first_name" id="first_name" type="text"/>
    <input name="last_name" id="last_name" type="text"/>
    <input type="submit" id="submit">
    </form>
    </body>
    </html>
    [/html]

  2. Get the value of the #name field and set it equal to the var nameVal
    [js]
    var nameVal = $(‘#name’).val()
    [/js]
  3. Assign the length of the #name field to the var nameLength
    [js]
    var nameLength = nameVal.length;
    [/js]
  4. Use the JS split method, to pull out the values contained in var nameVal assign to an array nameSplit
    [js]
    var nameSplit = nameVal.split(" ");
    [/js]
  5. Subtract nameLength from the first item in the array and assign the value to var lastLength
    [js]
    var lastLength = nameLength – nameSplit[0].length;
    [/js]
  6. Assign the length of the first item in the array + 1
    [js]
    var lastNameLength = nameSplit[0].length + 1;
    [/js]
  7. Using the JS slice method, we will slice the nameVal, using the value from lastNameLength
    [js]
    var lastName = nameVal.slice(lastNameLength);
    [/js]
  8. Select the #first_name and #last_name fields and change the values
    [js]
    $(‘#first_name’).val(nameSplit[0]);
    $(‘#last_name’).val(lastName);
    [/js]
  9. Create a click event using jQuery, and place all the proceeding code within this function so that when the submit button is clicked – the new values will be set.
    [js]
    $(document).ready(function() {

    $(‘#submit’).click(function(){

    var nameVal = $(‘#name’).val()
    var nameLength = nameVal.length;
    var nameSplit = nameVal.split(" ");
    var lastLength = nameLength – nameSplit[0].length;
    var lastNameLength = nameSplit[0].length + 1;
    var lastName = nameVal.slice(lastNameLength);

    $(‘#first_name’).val(nameSplit[0]);
    $(‘#last_name’).val(lastName);

    return false;
    });

    });
    [/js]

  1. Line 08 of your code is never referenced and does not look needed. But regardless, couldn't you have just done the following?

    01 $(document).ready(function() {
    02
    03 $('#submit').click(function(){
    04
    05 var nameVal = $('#name').val()
    06 var nameSplit = nameVal.split(" ");
    07
    08 $('#first_name').val(nameSplit[0]);
    09 $('#last_name').val(nameSplit[1]);
    10
    11 return false;
    12 });
    13
    14});

  2. thank you for posting this great article. how could I implement this during a jquery validate plugin process:

    $(document).ready(function($) {
    $("#subscribe-form").validate({
    rules: {
    name: "required",
    email: {
    required: true,
    email: true
    }
    },
    messages: {
    name: "Please enter your name",
    email: "Please enter a valid email address",
    },
    submitHandler: function(form) {
    $("button").attr('disabled', 'disabled');
    form.submit();
    }
    });
    });

  3. The jquery for giving split input is something that I have been looking for all over the internet I have been in vain so far until I found this one here. Thank you for sharing this informative post and I hope to hear more updates from you.

LEAVE A REPLY