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;
for(var x=0; x<len; x++){
var str = $( "input:eq( "+x+" )" ).val();
var newRes = trimming(str);
$( "input:eq( "+x+" )" ).val(newRes);
}
}
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 x
th 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 x
th 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.