JQuery Archives - The Code Developer https://www.thecodedeveloper.com/category/jquery/ The Code Developer is a Programming Blog. Wed, 30 Jan 2019 21:22:27 +0000 en-US hourly 1 https://wordpress.org/?v=6.8.3 How to Get Selected Checkboxes Value Using jQuery https://www.thecodedeveloper.com/get-selected-checkboxes-value-using-jquery/ https://www.thecodedeveloper.com/get-selected-checkboxes-value-using-jquery/#respond Mon, 06 Aug 2018 15:41:50 +0000 https://www.thecodedeveloper.com/?p=3035 Get Selected Checkboxes Value Using JQuery

In this tutorial we will explain how to get selected Checkboxes value Using jQuery. First user need to select one or more checkbox field in a form then we will get all value of checkbox in an array. The jQuery :checked selector can be used with the each() method to retrieve the values of all […]

The post How to Get Selected Checkboxes Value Using jQuery appeared first on The Code Developer.

]]> Get Selected Checkboxes Value Using JQuery

In this tutorial we will explain how to get selected Checkboxes value Using jQuery. First user need to select one or more checkbox field in a form then we will get all value of checkbox in an array.

The jQuery :checked selector can be used with the each() method to retrieve the values of all checkboxes selected in group. jQuery.each() method used here simply iterates over all the checkboxes that are checked.

Live Demo

First include the jQuery library file before the closing </head> tag. 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Creating HTML Form with Checkboxes

This HTML shows a form containing a list of colors with checkbox field.

<form method="POST">
    <h3>Select your favorite colors:</h3>
    <div class="checkbox"><label><input type="checkbox" value="red" name="color"> Red</label></div>
    <div class="checkbox"><label><input type="checkbox" value="orange" name="color"> Orange</label></div>
    <div class="checkbox"><label><input type="checkbox" value="yellow" name="color"> Yellow</label></div>
    <div class="checkbox"><label><input type="checkbox" value="green" name="color"> Green</label></div>
    <div class="checkbox"><label><input type="checkbox" value="blue" name="color"> Blue</label></div>
    <div class="checkbox"><label><input type="checkbox" value="purple" name="color"> Purple</label></div>
    <br>
    <button type="button" class="btn btn-primary">Get Values</button>
</form>

Get Selected Checkboxes Value Using jQuery

Then we write jQuery script to get selected checkbox value in an array using jQuery each(). Using this jQuery function it runs a loop to get the checked value and put it into an array.

<script type="text/javascript">
    $(document).ready(function() {
        $(".btn").click(function() {
            var colors = [];
            $.each($("input[name='color']:checked"), function() {
                colors.push($(this).val());
            });
            alert("My favourite colors are: " + colors.join(", "));
        });
    });
</script>

Index.html

In this file we contains complete code with jQuery library, jQuery script and HTML form.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Get Selected Checkboxes Value Using jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".btn").click(function() {
            var colors = [];
            $.each($("input[name='color']:checked"), function() {
                colors.push($(this).val());
            });
            alert("My favourite colors are: " + colors.join(", "));
        });
    });
</script>
</head>
<body>
    <form method="POST">
    <h3>Select your favorite colors:</h3>
    <div class="checkbox"><label><input type="checkbox" value="red" name="color"> Red</label></div>
    <div class="checkbox"><label><input type="checkbox" value="orange" name="color"> Orange</label></div>
    <div class="checkbox"><label><input type="checkbox" value="yellow" name="color"> Yellow</label></div>
    <div class="checkbox"><label><input type="checkbox" value="green" name="color"> Green</label></div>
    <div class="checkbox"><label><input type="checkbox" value="blue" name="color"> Blue</label></div>
    <div class="checkbox"><label><input type="checkbox" value="purple" name="color"> Purple</label></div>
    <br>
    <button type="button" class="btn">Get Values</button>
</form>
</body>
</html>

The post How to Get Selected Checkboxes Value Using jQuery appeared first on The Code Developer.

]]> https://www.thecodedeveloper.com/get-selected-checkboxes-value-using-jquery/feed/ 0 Disable Past date time in DateTimePicker jQuery plugin https://www.thecodedeveloper.com/disable-past-date-time/ https://www.thecodedeveloper.com/disable-past-date-time/#comments Sun, 08 Apr 2018 18:53:48 +0000 https://www.thecodedeveloper.com/?p=2703 disable past date time

Nowadays i was working a project and in this project one of the task i am using DateTimePicker jQuery plugin to select date time. According the task requirement I don’t want to allow user to select any past date time, only user can select current or future date time. So Today in this article i […]

The post Disable Past date time in DateTimePicker jQuery plugin appeared first on The Code Developer.

]]> disable past date time

Nowadays i was working a project and in this project one of the task i am using DateTimePicker jQuery plugin to select date time. According the task requirement I don’t want to allow user to select any past date time, only user can select current or future date time. So Today in this article i will explain how to Disable Past date time with DateTimePicker jQuery plugin.

Read Also: How to Install DateTimePicker jQuery plugin

Disable Past date time in DateTimePicker jQuery plugin

First we try to disable Past Date with minDate: 0 option:

//minDate option Example
$('#datetimepicker5').datetimepicker({
	minDate:0, // disable past date
});

Output:

Now i try to disable Past Date and Time with minDate: 0 and minTime: 0 option:

//minDate and minTime option Example
$('#datetimepicker6').datetimepicker({
	minDate: 0,  // disable past date
	minTime: 0, // disable past time
});

Output:

In the above output i have found two issue:

Issue 1: If current time is 2:00 AM, then user can’t select current time to 2:00 AM.

Issue 2: If user select future date then some time disable, e.g if current time is 3:00 AM, user can’t select time to 3:00 AM, 2:00 AM, 1:00 AM. But i want if user select future date then every time should be visible to select.

so here minTime: 0 option did’t work for me.

I wrote below code to fix above issues, in this code if user select today date then pass current time with minTime option and for future date all time will be visible to select.

var checkPastTime = function(inputDateTime) {
    if (typeof(inputDateTime) != "undefined" && inputDateTime !== null) {
        var current = new Date();

        //check past year and month
        if (inputDateTime.getFullYear() < current.getFullYear()) {
            $('#datetimepicker7').datetimepicker('reset');
            alert("Sorry! Past date time not allow.");
        } else if ((inputDateTime.getFullYear() == current.getFullYear()) && (inputDateTime.getMonth() < current.getMonth())) {
            $('#datetimepicker7').datetimepicker('reset');
            alert("Sorry! Past date time not allow.");
        }

        // 'this' is jquery object datetimepicker
        // check input date equal to todate date
        if (inputDateTime.getDate() == current.getDate()) {
            if (inputDateTime.getHours() < current.getHours()) {
                $('#datetimepicker7').datetimepicker('reset');
            }
            this.setOptions({
                minTime: current.getHours() + ':00' //here pass current time hour
            });
        } else {
            this.setOptions({
                minTime: false
            });
        }
    }
};

var currentYear = new Date();
$('#datetimepicker7').datetimepicker({
	format:'Y-m-d H:i',
	minDate : 0,
	yearStart : currentYear.getFullYear(), // Start value for current Year selector
	onChangeDateTime:checkPastTime,
	onShow:checkPastTime
});

I can’t express how happy I am to see my code is working fine.

The post Disable Past date time in DateTimePicker jQuery plugin appeared first on The Code Developer.

]]> https://www.thecodedeveloper.com/disable-past-date-time/feed/ 15 Add a DateTimePicker jQuery plugin to Input Field https://www.thecodedeveloper.com/add-datetimepicker-jquery-plugin/ https://www.thecodedeveloper.com/add-datetimepicker-jquery-plugin/#comments Wed, 04 Apr 2018 05:53:56 +0000 https://www.thecodedeveloper.com/?p=2713 DateTimePicker jQuery plugin

This Article shows the simplest way to add date time picker functionality to your websites to provide better end user experience. Here we are using DateTimePicker jQuery plugin to add date-time picker to input field, this article will help you lot for that. This plugin is very simple and easy to implement and provides various […]

The post Add a DateTimePicker jQuery plugin to Input Field appeared first on The Code Developer.

]]> DateTimePicker jQuery plugin

This Article shows the simplest way to add date time picker functionality to your websites to provide better end user experience. Here we are using DateTimePicker jQuery plugin to add date-time picker to input field, this article will help you lot for that. This plugin is very simple and easy to implement and provides various options to customize your Date Time Picker as per your project requirement.

Live Demo

Setting up DateTimePicker jQuery plugin

First include the jQuery library file before the closing </head> tag.

<!-- this file should add inside the <head></head> tag -->
<script src="js/jquery.min.js"></script>

Now include the js and css files of DateTime Picker jQuery plugin. those files should be add after the </body> tag.

<!-- those files should be add after the </body> tag -->
<link rel="stylesheet" type="text/css" href="css/jquery.datetimepicker.min.css"/>
<script src="js/jquery.datetimepicker.js"></script>

HTML Code

<input id="datetimepicker" type="text" >

JavaScript Code with DatePicker Example

<script type="text/javascript">
    $(document).ready(function() {
        $('#datetimepicker').datetimepicker();
    });
</script>

Output:

TimePicker Example

//TimePicke Example
$('#datetimepicker1').datetimepicker();

Output:

Inline DateTimePicker Example

//Inline DateTimePicker Example
$('#datetimepicker2').datetimepicker({
    format:'Y-m-d H:i',
    inline:true
});

Output:

minDate and maxDate Example

//minDate and maxDate Example
$('#datetimepicker3').datetimepicker({
     format:'Y-m-d',
     timepicker:false,
     minDate:'-1970/01/02', //yesterday is minimum date
     maxDate:'+1970/01/02' //tomorrow is maximum date
});

Output:

allow particular Times options with TimePicker Example

//allow particular Times options with TimePicker Example
$('#datetimepicker4').datetimepicker({
	datepicker:false,
	allowTimes:[
	  '11:00', '13:00', '15:00', 
	  '16:00', '18:00', '19:00', '20:00'
	]
});

Download Code File

The post Add a DateTimePicker jQuery plugin to Input Field appeared first on The Code Developer.

]]> https://www.thecodedeveloper.com/add-datetimepicker-jquery-plugin/feed/ 10 Move Ball using JQuery Animation https://www.thecodedeveloper.com/move-ball-using-jquery-animation/ https://www.thecodedeveloper.com/move-ball-using-jquery-animation/#respond Sat, 04 Nov 2017 18:38:06 +0000 https://www.thecodedeveloper.com/?p=1936 move Ball

This tutorial we will move ball in left to right and right to left in both direction using jQuery Animation. We use jquery animation’s callback function. jQuery animate() function is used to perform a custom animation of a set of CSS properties. This method allows you to create custom animation only on numeric properties. For […]

The post Move Ball using JQuery Animation appeared first on The Code Developer.

]]> move Ball

This tutorial we will move ball in left to right and right to left in both direction using jQuery Animation. We use jquery animation’s callback function.

jQuery animate() function is used to perform a custom animation of a set of CSS properties. This method allows you to create custom animation only on numeric properties. For example, the properties with numeric values such as width, left, height, opacity can be used with animate() method, but the property like background-color cannot be animated since it has a string value.

Move Ball Using JQuery Animation Demo

CSS Code

 #ballContainer
{
	float: left;
	position: relative;
}

HTML Code

<div id="ballContainer">
<img src="images/ball.png" width="200px" alt="image" />
</div>

jQuery Code

In moveBall() method first we move the div #ballContainer to right, do it by changing the value of property left to 900px inside the animate method, once animation is done call complete: Function(), inside this function move the div #ballContainer to left, do it by changing the value of property left to 10px inside the animate method. After complete second animation call complete: Function() then we call moveBall() method to continue move ball process in both direction.

<script type="text/javascript">

    $(function() {
        moveBall();
    });

    function moveBall() {
        $("#ballContainer:first").animate({
            left: 900
        }, {
            duration: 3000,
            complete: function() {
                $("#ballContainer:first").animate({
                    left: 10
                }, {
                    duration: 3000,
                    complete: function() {
                        moveBall();
                    }
                });
            }
        });
    }

</script>

Index.html
In this file we contains complete code with HTML, CSS and JQuery.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Move Ball using JQuery Animation</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <style type="text/css">
        #ballContainer {
            float: left;
            position: relative;
        }

        .top-buffer {
            margin-top: 50px;
        }
    </style>

    <script type="text/javascript">
        $(function() {
            moveBall();
        });

        function moveBall() {
            $("#ballContainer:first").animate({
                left: 900
            }, {
                duration: 3000,
                complete: function() {
                    $("#ballContainer:first").animate({
                        left: 10
                    }, {
                        duration: 3000,
                        complete: function() {
                            moveBall();
                        }
                    });
                }
            });
        }
    </script>
</head>
<body>
    <div class="container">
        <h2 class="text-center p-3 mb-2 bg-primary text-white">Demo: Move a ball using Jquery</h2>
        <div class="row">
            <div class="col-sm-12 top-buffer">
                <div id="ballContainer">
                    <img src="images/ball.png" width="200px" alt="image" />
                </div>
            </div>
        </div>
    </div>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

Live Demo

The post Move Ball using JQuery Animation appeared first on The Code Developer.

]]> https://www.thecodedeveloper.com/move-ball-using-jquery-animation/feed/ 0