HTML Input Value Trimming using jQuery

Introduction

Now-a-days, input field is the most widely used feature of a website or web application. Input fields are used for getting user inputs. Sometimes, we want to trim the unnecessary spaces before or after the inputs to save space or make the input value more precise. In this example, I am going to show how to trim all the input field values using jQuery.

Background

In a web application or website, there can be so many input fields. Maybe sometimes, the users will just copy paste some inputs from somewhere else. In that case, the probability of unnecessary spaces in the input values is very high. If these input values are supposed to be stored in a database, then we don't want to waste our valuable server storage by those unnecessary spaces with the input values. Putting a warning message like "Please recheck for unnecessary spaces in your inputs" isn't a solution at all. But the following example will trim all the input values by just calling a single function.

Using the Code

Here, I'm going to explain the blocks of code.

<label>Name:</label>
<input type="text" value="      Masudul Haque" />
<br>

<label>Location:</label>
<input type="text" value="      Dhaka, Bangladesh     " />
<br>

<label>Profession:</label>
<input type="text" value="      Web Developer     " />
<br>

<br>
<button id="trimmer">Trim</button>

Suppose this is a web application which will allow the users to insert some information about them. We have three input fields for getting the name, location and profession of the users. In the value attribute of the input fields, I've preset some values with unnecessary spaces. Suppose we've to save these values in a database. Our job is to trim the unnecessary spaces before we store the values in the database.

function trimming(x){

      var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;

      var res = (x + "").replace(rtrim, "");
        
      return res;
}

The first thing we need to know is how to trim unnecessary spaces of a string. For the time being, forget about the input fields. Just imagine you have a single string with unnecessary spaces before and after the string. I've written a function named trimming(x) which will take a string x as parameter and return a trimmed string. We use a regex pattern rtrim to replace the unnecessary spaces from x and then we return the new string. Here our trimming function is done. Our next step is to use this function on every input field.

function trim(){
    
     var len = $( "input" ).length; /* to determine how many input tags available on the page */
    
     for(var x=0; x<len; x++){
        
         var str = $( "input:eq( "+x+" )" ).val(); /* getting the value of xth input tag */
        
         var newRes = trimming(str);
        
         $( "input:eq( "+x+" )" ).val(newRes); /* setting the trimmed value in the xth input tag */        
    }
}

Now our job is to get all the values from the input fields and put them into our previous trimming function. Let's write a void function trim. In this function, we need to loop through all the input fields values. So we determine len, the number of input tags and write a for loop size of len. Inside the loop, we'll get the value of the xth input and pass it into our previous trimming function. Then, our trimming function will trim the value and return it. We'll save the new value into a variable and replace the new value of the xth input tag. So our trim function is also done. If we call the trim function now, it'll trim all the input values and set the values in the same place. Now, we need to create a handler.

$("#trimmer").click(function(){ 
   trim();        
});    

We call the trim function when the trim button is clicked. May be in real projects, we'll trim it before we click the submit or next button.

Click here to check the demo.