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]


5 thoughts on “jQuery: Text Input Split Tutorial”

Bowmanave · September 21, 2011 at 1:34 am

Excellent work. And thank you for sharing.

Rob · November 12, 2011 at 1:42 pm

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});

split · February 2, 2012 at 6:51 am

thx rob for your comment.
It helps me for my problem a lot 😉

gazmcj · April 9, 2013 at 1:55 am

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();
}
});
});

buy marijuana seeds · May 30, 2013 at 4:42 am

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

Your email address will not be published. Required fields are marked *

Related Posts

Web

Angular JS Magazine on Flipboard

I have been working with AngularJS for about a year now, trying to learn as much as I can about this growing framework. It’s been a wild ride and I’m going to post a summary Read more…

GruntJS

My First GruntJS Plugin: Bust My Cache

GruntJS is a JavaScript Task runner that has been around for about 2+ year, at least as far as I can remember. I started playing around with GruntJS which uses Node.js about a year ago, Read more…

Top 5

Top 5 Articles : Week of November 25

During the the week of November 25th, I really started to dive into Angular JS. My top 5 articles of the week are mainly about AngularJS, an MVC framework by Google. #1 : AngularJS WebInspector Read more…