Avoid spaces being submitted in the script using jQuery

When we create any application using textfields it is possible that user may click on the submit button without entering any values in the textfield. We can restrict this easily simply by using if condition and double quotes like.

var name = $("#textfield").val();
if(name == ""){
alert("Please enter text in the text box");
}

But what if user presses spacebar a couple of times in the textfield and submits. This time the above code does not work. It will not alert the message instead it considers it as a value and executes the rest of the script. In this case we will get a null value submitted.

To stop user from entering null values ie spaces and submitting the form. We can trim the value first. That is we will remove the empty spaces. It can be done using jQuery trim statement.

var name = $("#textfield").val();
if($.trim(name) == ""){
alert("Please enter text in the text box");
}

Now the value gets trimmed and null values are avoided.

Read More...

Show remaining characters to be entered in textarea using jQuery

Some websites like Twitter limit number of characters that are typed in textarea. We can also see the remaining number of characters left for typing. This kind of feature can be easily implemented using jQuery.

Create a textarea  with id, cols, rows and maxlength attributes. In this example we will limit number of character to 25. Create a span with id. This span tag shows the number of characters remaining in textarea.

<textarea id="textarea" cols="20" rows="5" maxlength="25"></textarea>
Remaining Characters <span id="remain">25</span>

Now the jQuery part, here we should use .keyup event trigger in jQuery to capture every key release by the user in textarea. Create a new variable max, this is the maximum number of characters we can enter in the textarea. Now use if condition to check the characters entered in the textarea is less than or equal to 25 ie max variable. If condition is true, then subtract the number of characters in the textarea from max. Finally display that value in span tag. Thats it.

$("#textarea").keyup(function(){
var max = 25;
if($(this).val().length <= max)
var let = max - $(this).val().length;
$("#remain").text(let);
});

Lets see the full code

<textarea id="textarea" cols="20" rows="5" maxlength="25"></textarea>
Remaining Characters <span id="remain">25</span>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$("#textarea").keyup(function(){
var max = 25;
if($(this).val().length <= max)
var let = max - $(this).val().length;
$("#remain").text(let);
});
</script>

Read More...

Change the background color of webpage dynamically using jQuery

We can easily change the background color of webpage using post method in jQuery.

Create a input type=”color”, give its name and id. Add style tag and a div tag with id=”preview” to preview the CSS styles that we are using to change the background color.

Color:<input type="color" name="color" id="color">
<style></style>
<div id="preview"></div>

Now the jQuery part, write on change event trigger for the color input. Take the color value in a variable $color. Post the value to php script using post method in jQuery.

Next make sure the style tags does not contain any styles using .empty() in jQuery. Add the styles that we have got from the php script to style tag and also to div tag.

$('#color').on('change', function() { // fires only after clicking OK
var $color = $("#color").val();
$.post("color.php",{color:$color}, function(data){
//console.log(data);
$("style").empty();
$("style").text(data);
$("#preview").text(data);
});
});

Now the PHP script.

<?php
$color = $_POST['color'];

$code = <<<str
html{
	background-color:$color;
}
str;
echo $code;
?>

In the PHP script we are capturing the posted color value in a variable $color. Next we are using heredoc in PHP to write the css styles and finally echo it.

Read More...

Add more text fields dynamically using jQuery

Add more than one text fields with the click of a button in jQuery.

First create a div with id=”more”, inside it create an input field and close the div. Then create a button. When we click this button new text fields must be created on web page.

<div id="more">
<input type="text">
</div>
<button>More input fields</button>

Now jQuery part, write button click event and anonymous function. Now create a new variable $i and add html input tag to it. We want to get more input fields when button is clicked in the div with id=”more”. So append the $i to div. Thats it.

$("button").click(function(){
var $i = "<br><input type='text'>";
$("#more").append($i);
});

Let’s look at the full code

<div id="more">
<input type="text">
</div>
<button>More input fields</button>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$("button").click(function(){
var $i = "<br><input type='text'>";
$("#more").append($i);
});
</script>

Read More...