bootstrap Archives - Codeplaners https://codeplaners.com/tag/bootstrap/ Code Solution Thu, 10 Feb 2022 12:03:23 +0000 en-US hourly 1 https://wordpress.org/?v=6.1.7 https://codeplaners.com/wp-content/uploads/2020/09/cropped-favicon-social-32x32.png bootstrap Archives - Codeplaners https://codeplaners.com/tag/bootstrap/ 32 32 How To Create DataTable In Bootstrap https://codeplaners.com/how-to-create-datatable-in-bootstrap/ https://codeplaners.com/how-to-create-datatable-in-bootstrap/#respond Thu, 10 Feb 2022 12:03:23 +0000 https://codeplaners.com/?p=1399 Hi Dev, Today, i we will show you how to create DataTable in bootstrap. This article will give you simple example of how to create DataTable in bootstrap. you will how to create DataTable in bootstrap. In this article, we will implement a how to create DataTable in bootstrap. So let’s follow few step to … Continue reading "How To Create DataTable In Bootstrap"

The post How To Create DataTable In Bootstrap appeared first on Codeplaners.

]]> Hi Dev,

Today, i we will show you how to create DataTable in bootstrap. This article will give you simple example of how to create DataTable in bootstrap. you will how to create DataTable in bootstrap. In this article, we will implement a how to create DataTable in bootstrap.

So let’s follow few step to create example of how to create DataTable in bootstrap.

How To Create DataTable In Bootstrap

Example

<!DOCTYPE html>
<html>

<head>
	<title> How To Create DataTable In Bootstrap</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" >
	<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css" >
	
</head>

<body>
   
	
    <div class="container" style="padding: 20px 0 0;">
        <table id="example" class="table table-striped table-bordered" style="width:100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>$320,800</td>
                </tr>
                <tr>
                    <td>Garrett Winters</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>63</td>
                    <td>2011/07/25</td>
                    <td>$170,750</td>
                </tr>
                <tr>
                    <td>Ashton Cox</td>
                    <td>Junior Technical Author</td>
                    <td>San Francisco</td>
                    <td>66</td>
                    <td>2009/01/12</td>
                    <td>$86,000</td>
                </tr>
               
            </tbody>
            <tfoot>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </tfoot>
        </table>
    </div>
    
	<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
	<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
	<script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap4.min.js"></script>

	<script>

		$(document).ready(function() {
			$('#example').DataTable();
		} );
	</script>

</body>

</html>

I hope it will assist you…

The post How To Create DataTable In Bootstrap appeared first on Codeplaners.

]]> https://codeplaners.com/how-to-create-datatable-in-bootstrap/feed/ 0 How To Create Multi Step Form in jQuery https://codeplaners.com/how-to-create-multi-step-form-in-jquery/ https://codeplaners.com/how-to-create-multi-step-form-in-jquery/#respond Mon, 16 Aug 2021 00:09:32 +0000 https://codeplaners.com/?p=1240 Hi, Today, i we will show you how to create multi step form in jQuery. This article will give you simple example of how to create multi step form in jQuery. you will learn how to create multi step form in jQuery. So let’s follow few step to create example of how to create multi … Continue reading "How To Create Multi Step Form in jQuery"

The post How To Create Multi Step Form in jQuery appeared first on Codeplaners.

]]> Hi,

Today, i we will show you how to create multi step form in jQuery. This article will give you simple example of how to create multi step form in jQuery. you will learn how to create multi step form in jQuery.

So let’s follow few step to create example of how to create multi step form in jQuery.

how to create multi step form in jQuery

index.html

<!DOCTYPE html>
<html>
<head>
    <title>How To Create Multi Step Form in jQuery</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.min.js"></script>
    <script src="custom.js"></script>
</head>
<body style="background-color: #f6f6f6;">
    <h1 style="margin-top:50px; color: #333;">How To Create Multi Step Form in jQuery</h1>
    <form id="myForm" action="#" method="POST">
        <h1>Registration Form</h1>
        <!-- One "tab" for each step in the form: -->
        <div class="tab">Name:
            <p><input placeholder="First name" name="fname"></p>
            <p><input placeholder="Last name" name="lname"></p>
        </div>
        <div class="tab">Contact Info:
            <p><input placeholder="E-mail" name="email"></p>
            <p><input placeholder="Phone" name="phone"></p>
        </div>
        <div class="tab">Birthday:
            <p><input placeholder="dd" name="date"></p>
            <p><input placeholder="mm" name="month"></p>
            <p><input placeholder="yyyy" name="year"></p>
        </div>
        <div class="tab">Login Info:
            <p><input placeholder="Username" name="username"></p>
            <p><input placeholder="Password" name="password" type="password"></p>
        </div>
        <div style="overflow:auto;">
            <div style="float:right; margin-top: 5px;">
                <button type="button" class="previous">Previous</button>
                <button type="button" class="next">Next</button>
                <button type="button" class="submit">Submit</button>
            </div>
        </div>
        <!-- Circles which indicates the steps of the form: -->
        <div style="text-align:center;margin-top:40px;">
            <span class="step">1</span>
            <span class="step">2</span>
            <span class="step">3</span>
            <span class="step">4</span>
        </div>
    </form>
</body>
<script type="text/javascript">
    $(document).ready(function(){
        $.validator.addMethod('date', function(value, element, param) {
            return (value != 0) && (value <= 31) && (value == parseInt(value, 10));
        }, 'Please enter a valid date!');
        $.validator.addMethod('month', function(value, element, param) {
            return (value != 0) && (value <= 12) && (value == parseInt(value, 10));
        }, 'Please enter a valid month!');
        $.validator.addMethod('year', function(value, element, param) {
            return (value != 0) && (value >= 1900) && (value == parseInt(value, 10));
        }, 'Please enter a valid year not less than 1900!');
        $.validator.addMethod('username', function(value, element, param) {
            var nameRegex = /^[a-zA-Z0-9]+$/;
            return value.match(nameRegex);
        }, 'Only a-z, A-Z, 0-9 characters are allowed');

        var val = {
            // Specify validation rules
            rules: {
                fname: "required",
                email: {
                    required: true,
                    email: true
                },
                phone: {
                    required:true,
                    minlength:10,
                    maxlength:10,
                    digits:true
                },
                date:{
                    date:true,
                    required:true,
                    minlength:2,
                    maxlength:2,
                    digits:true
                },
                month:{
                    month:true,
                    required:true,
                    minlength:2,
                    maxlength:2,
                    digits:true
                },
                year:{
                    year:true,
                    required:true,
                    minlength:4,
                    maxlength:4,
                    digits:true
                },
                username:{
                    username:true,
                    required:true,
                    minlength:4,
                    maxlength:16,
                },
                password:{
                    required:true,
                    minlength:8,
                    maxlength:16,
                }
            },
            // Specify validation error messages
            messages: {
                fname:      "First name is required",
                email: {
                    required:   "Email is required",
                    email:      "Please enter a valid e-mail",
                },
                phone:{
                    required:   "Phone number is requied",
                    minlength:  "Please enter 10 digit mobile number",
                    maxlength:  "Please enter 10 digit mobile number",
                    digits:     "Only numbers are allowed in this field"
                },
                date:{
                    required:   "Date is required",
                    minlength:  "Date should be a 2 digit number, e.i., 01 or 20",
                    maxlength:  "Date should be a 2 digit number, e.i., 01 or 20",
                    digits:     "Date should be a number"
                },
                month:{
                    required:   "Month is required",
                    minlength:  "Month should be a 2 digit number, e.i., 01 or 12",
                    maxlength:  "Month should be a 2 digit number, e.i., 01 or 12",
                    digits:     "Only numbers are allowed in this field"
                },
                year:{
                    required:   "Year is required",
                    minlength:  "Year should be a 4 digit number, e.i., 2018 or 1990",
                    maxlength:  "Year should be a 4 digit number, e.i., 2018 or 1990",
                    digits:     "Only numbers are allowed in this field"
                },
                username:{
                    required:   "Username is required",
                    minlength:  "Username should be minimum 4 characters",
                    maxlength:  "Username should be maximum 16 characters",
                },
                password:{
                    required:   "Password is required",
                    minlength:  "Password should be minimum 8 characters",
                    maxlength:  "Password should be maximum 16 characters",
                }
            }
        }
        $("#myForm").multiStepForm(
        {
            // defaultStep:0,
            beforeSubmit : function(form, submit){
                console.log("called before submiting the form");
                console.log(form);
                console.log(submit);
            },
            validations:val,
        }
        ).navigateTo(0);
    });
</script>
</html>

style.css

<style>
* {
    box-sizing: border-box;
}
.tab{
    display: none;
    width: 100%;
    height: 50%;
    margin: 0px auto;
}
.current{
    display: block;
}

body {
    background-color: #f1f1f1;
}

form {
    background-color: #ffffff;
    margin: 0 auto;
    font-family: Raleway;
    padding: 40px;
    width: 40%;
    min-width: 300px;
}

h1 {
    text-align: center;
}

input {
    padding: 10px;
    width: 100%;
    font-size: 17px;
    font-family: Raleway;
    border: 1px solid #aaaaaa;
}

button {
    background-color: #4CAF50;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    font-size: 17px;
    font-family: Raleway;
    cursor: pointer;
}

button:hover {
    opacity: 0.8;
}

.previous {
    background-color: #bbbbbb;
}

/* form: */
.step {
    height: 30px;
    width: 30px;
    cursor: pointer;
    margin: 0 2px;
    color: #fff;
    background-color: #bbbbbb;
    border: none;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.8;
    padding: 5px
}

.step.active {
    opacity: 1;
    background-color: #69c769;
}

.step.finish {
    background-color: #4CAF50;
}

.error {
    color: #f00;
}
</style>

custom.js

<script>
(function ( $ ) {
    $.fn.multiStepForm = function(args) {
        if(args === null || typeof args !== 'object' || $.isArray(args))
            throw  " : Called with Invalid argument";
            var form = this;
            var tabs = form.find('.tab');
            var steps = form.find('.step');
            steps.each(function(i, e){
                $(e).on('click', function(ev){
                });
            });
            form.navigateTo = function (i) {/*index*/
            /*Mark the current section with the class 'current'*/
            tabs.removeClass('current').eq(i).addClass('current');
            // Show only the navigation buttons that make sense for the current section:
            form.find('.previous').toggle(i > 0);
            atTheEnd = i >= tabs.length - 1;
            form.find('.next').toggle(!atTheEnd);
            // console.log('atTheEnd='+atTheEnd);
            form.find('.submit').toggle(atTheEnd);
            fixStepIndicator(curIndex());
            return form;
        }
        function curIndex() {
            /*Return the current index by looking at which section has the class 'current'*/
            return tabs.index(tabs.filter('.current'));
        }
        function fixStepIndicator(n) {
            steps.each(function(i, e){
                i == n ? $(e).addClass('active') : $(e).removeClass('active');
            });
        }
        /* Previous button is easy, just go back */
        form.find('.previous').click(function() {
            form.navigateTo(curIndex() - 1);
        });

        /* Next button goes forward iff current block validates */
        form.find('.next').click(function() {
            if('validations' in args && typeof args.validations === 'object' && !$.isArray(args.validations)){
                if(!('noValidate' in args) || (typeof args.noValidate === 'boolean' && !args.noValidate)){
                    form.validate(args.validations);
                    if(form.valid() == true){
                        form.navigateTo(curIndex() + 1);
                        return true;
                    }
                    return false;
                }
            }
            form.navigateTo(curIndex() + 1);
        });
        form.find('.submit').on('click', function(e){
            if(typeof args.beforeSubmit !== 'undefined' && typeof args.beforeSubmit !== 'function')
                args.beforeSubmit(form, this);
                /*check if args.submit is set false if not then form.submit is not gonna run, if not set then will run by default*/        
            if(typeof args.submit === 'undefined' || (typeof args.submit === 'boolean' && args.submit)){
                form.submit();
            }
            return form;
        });
        /*By default navigate to the tab 0, if it is being set using defaultStep property*/
        typeof args.defaultStep === 'number' ? form.navigateTo(args.defaultStep) : null;
        form.noValidate = function() {
    
        }
        return form;
    };
}( jQuery ));
</script>

I hope it will assist you…

The post How To Create Multi Step Form in jQuery appeared first on Codeplaners.

]]> https://codeplaners.com/how-to-create-multi-step-form-in-jquery/feed/ 0 PHP 8 Multiple Select Dropdown Example https://codeplaners.com/php-8-multiple-select-dropdown-example/ https://codeplaners.com/php-8-multiple-select-dropdown-example/#respond Tue, 10 Aug 2021 10:51:12 +0000 https://codeplaners.com/?p=1165 Hi Dev, Today, i we will show you php 8 multiple select dropdown example. This article will give you simple example of php 8 multiple select dropdown example. you will learn get php 8 multiple select dropdown example. So let’s follow few step to create example of php 8 multiple select dropdown example. Example: index.php … Continue reading "PHP 8 Multiple Select Dropdown Example"

The post PHP 8 Multiple Select Dropdown Example appeared first on Codeplaners.

]]> Hi Dev,

Today, i we will show you php 8 multiple select dropdown example. This article will give you simple example of php 8 multiple select dropdown example. you will learn get php 8 multiple select dropdown example. So let’s follow few step to create example of php 8 multiple select dropdown example.

PHP 8 Multiple Select Dropdown Example

Example:

index.php

<html lang="en">
<head>
   <meta charset="utf-8">
   <title>php 8 Multiple Select Dropdown Example</title>
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@200&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body{
	background:#f1f1f1;
}
.error{
	color:red;
}
select{
	width: 100%;
	min-height:150px;
}
.main-box{
	border-radius:5px;
	background:#fff;
	padding:15px;
	border:1px solid #f6f6f6;
	box-shadow:2px 2px 5px #ccc;
}
.select-tag{
	background:#48161D;
	color:#fff;
	border-radius:15px;
	display: inline-block;
	font-size:14px;
	padding:3px 15px;
	margin-left:5px;
}
</style>
</head>
<body>
   <div class="container mt-5 pt-5">
    <div class="row">
     <div class="col-md-6 main-box offset-md-3">
    <form action="" method="post" class="mb-3">
       <div class="row">
        <div class="col-md-12 text-center title mb-2">
         <h4>php 8 Multiple Select Dropdown Example</h4>
        </div>
        <div class="col-md-12">
             <select name="lang[]" multiple class="form-control">
                <option value="" disabled selected>Choose option</option>
                <option value="Laravel">Laravel</option>
                <option value="Php">Php</option>
                <option value="Jquery">Jquery</option>
                <option value="Node Js">NodeJs</option>
                <option value="Bootstrap">Bootstrap</option>
             </select>
        </div>
        <div class="col-md-12 text-center mt-4">
             <input type="submit" name="submit" vlaue="Choose options" class="btn btn-success btn-sm">
        </div>
        <div class="col-md-12 text-center mt-2">
          <?php
             if(isset($_POST['submit'])){
               if(!empty($_POST['lang'])) {
                  foreach($_POST['lang'] as $selected){
                    echo '<p class="select-tag mt-3">'.$selected.'</p>';
                  }          
               }else{
                echo '<p class="error alert alert-danger mt-3">Please select any value</p>';
               }
             }
          ?>
        </div>
       </div>
    </form>
     </div>
    </div>
   </div>
</body>
</html>

I hope it will assist you…

The post PHP 8 Multiple Select Dropdown Example appeared first on Codeplaners.

]]> https://codeplaners.com/php-8-multiple-select-dropdown-example/feed/ 0 Bootstrap Input add multiple tags example https://codeplaners.com/bootstrap-input-add-multiple-tags-example/ https://codeplaners.com/bootstrap-input-add-multiple-tags-example/#respond Tue, 10 Aug 2021 10:26:00 +0000 https://codeplaners.com/?p=1161 Hi Dev, Today, i we will show you bootstrap input add multiple tags example. This article will give you simple example of bootstrap input add multiple tags example. you will learn get bootstrap input add multiple tags example. So let’s follow few step to create example of bootstrap input add multiple tags example. bootstrap.min.css bootstrap.min.js … Continue reading "Bootstrap Input add multiple tags example"

The post Bootstrap Input add multiple tags example appeared first on Codeplaners.

]]> Hi Dev,

Today, i we will show you bootstrap input add multiple tags example. This article will give you simple example of bootstrap input add multiple tags example. you will learn get bootstrap input add multiple tags example. So let’s follow few step to create example of bootstrap input add multiple tags example.

Bootstrap Input add multiple tags example

  • bootstrap.min.css
  • bootstrap.min.js
  • jquery.min.js
  • tagmanager.min.css
  • tagmanager.min.js

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Input multiple tags example</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tagmanager/3.0.2/tagmanager.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tagmanager/3.0.2/tagmanager.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <form>
                    <div class="form-group">
                        <label>Name:</label>
                        <input type="text" name="name" class="form-control" >
                    </div>
                    <div class="form-group">
                        <label>Add Tags:</label><br/>
                        <input type="text" name="tags" placeholder="Tags" class="tm-input form-control tm-input-info"/>
                    </div>
                    <div class="form-group">
                        <label>Details:</label>
                        <textarea class="form-control"></textarea>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-success">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(".tm-input").tagsManager();
    </script>
</body>
</html>

I hope it will assist you…

The post Bootstrap Input add multiple tags example appeared first on Codeplaners.

]]> https://codeplaners.com/bootstrap-input-add-multiple-tags-example/feed/ 0 How to Redirect Another Webpage https://codeplaners.com/how-to-redirect-another-webpage/ https://codeplaners.com/how-to-redirect-another-webpage/#respond Thu, 22 Jul 2021 09:12:04 +0000 https://codeplaners.com/?p=1096 Hi, Today, i we will show you how to redirect another webpage. This article will give you simple example of how to redirect another webpage. you will learn how to redirect another webpage. So let’s follow few step to create example of how to redirect another webpage. HTML redirects add your index file : <meta … Continue reading "How to Redirect Another Webpage"

The post How to Redirect Another Webpage appeared first on Codeplaners.

]]> Hi,

Today, i we will show you how to redirect another webpage. This article will give you simple example of how to redirect another webpage. you will learn how to redirect another webpage. So let’s follow few step to create example of how to redirect another webpage.

HTML redirects

add your index file :

<meta http-equiv="refresh" content="0; URL='http://new-website.com'" />

JavaScript redirects

window.location = "http://new-website.com";

window.location.href = "http://new-website.com";
window.location.assign("http://new-website.com");
window.location.replace("http://new-website.com");

The post How to Redirect Another Webpage appeared first on Codeplaners.

]]> https://codeplaners.com/how-to-redirect-another-webpage/feed/ 0 Hide Show Password In Bootstrap https://codeplaners.com/hide-show-password-in-bootstrap/ https://codeplaners.com/hide-show-password-in-bootstrap/#respond Sun, 18 Jul 2021 23:16:20 +0000 https://codeplaners.com/?p=1092 Hi, Today, i we will show you hide show password in bootstrap. This article will give you simple example of hide show password in bootstrap. you will learn hide show password in bootstrap. So let’s follow few step to create example of hide show password in bootstrap. Example index.php <!DOCTYPE html> <html> <head> <title>Hide Show … Continue reading "Hide Show Password In Bootstrap"

The post Hide Show Password In Bootstrap appeared first on Codeplaners.

]]> Hi,

Today, i we will show you hide show password in bootstrap. This article will give you simple example of hide show password in bootstrap. you will learn hide show password in bootstrap. So let’s follow few step to create example of hide show password in bootstrap.

Hide Show Password In Bootstrap

Example

index.php

<!DOCTYPE html>
<html>
<head>
    <title>Hide Show Password In Bootstrap  - Codeplaners.com</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-show-password/1.0.3/bootstrap-show-password.min.js"></script>
</head>
<body>
    <div class="container">
        <form>
            <div class="form-group">
                <label>Username:</label>
                <input type="text" name="username" class="form-control">
            </div>
            <div class="form-group">
                <label>Password:</label>
                <input type="password" id="password" name="password" class="form-control" data-toggle="password">
            </div>
            <div class="form-group">
                <button class="btn btn-success">Submit</button>
            </div>
        </form>
    </div>
    <script type="text/javascript">
        $("#password").password('toggle');
    </script>
</body>
</html>

The post Hide Show Password In Bootstrap appeared first on Codeplaners.

]]> https://codeplaners.com/hide-show-password-in-bootstrap/feed/ 0 Bootstrap 4 Select DropDown With Validation Example https://codeplaners.com/bootstrap-4-select-dropdown-with-validation-example/ https://codeplaners.com/bootstrap-4-select-dropdown-with-validation-example/#respond Fri, 09 Jul 2021 00:32:44 +0000 https://codeplaners.com/?p=1069 Today, i we will show you bootstrap 4 select dropDown with validation example. This article will give you simple example of bootstrap 4 select dropDown with validation example. you will learn bootstrap 4 select dropDown with validation example. So let’s follow few step to create example of bootstrap 4 select dropDown with validation example. Example … Continue reading "Bootstrap 4 Select DropDown With Validation Example"

The post Bootstrap 4 Select DropDown With Validation Example appeared first on Codeplaners.

]]> Today, i we will show you bootstrap 4 select dropDown with validation example. This article will give you simple example of bootstrap 4 select dropDown with validation example. you will learn bootstrap 4 select dropDown with validation example. So let’s follow few step to create example of bootstrap 4 select dropDown with validation example.

Bootstrap 4 Select DropDown With Validation Example

Example

<html>
<head>
    <title>Bootstrap 4 Select DropDown With Validation Example - codeplaners</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2-bootstrap.min.css" />
<body>

<div class="continer">
    <div class="row mt-5 pt-5">
        <div class="col-md-5 text-center offset-md-3 mt-5 pt-5">
            <form id="select2Form" method="post" class="form-horizontal">
                <label><h3>Choose color</h3></label>
                <select name="colors" class="form-control select2-select" multiple data-placeholder="Choose 2-4 colors">
                    <option value="black">Black</option>
                    <option value="blue">Blue</option>
                    <option value="green">Green</option>
                    <option value="orange">Orange</option>
                    <option value="red">Red</option>
                    <option value="yellow">Yellow</option>
                    <option value="white">White</option>
                </select>
                <div class="form-group mt-3">
                    <button type="submit" class="btn btn-success">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>    
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2.min.js"></script>
<script src="https://oss.maxcdn.com/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js"></script>

<script>
$(document).ready(function() {
    $('#select2Form')
        .find('[name="colors"]')
            .select2()
            // Revalidate the color when it is changed
            .change(function(e) {
                $('#select2Form').bootstrapValidator('revalidateField', 'colors');
            })
            .end()
        .find('[name="colors-tags"]')
            .select2({
                // Specify tags
                tags: ['Black', 'Blue', 'Green', 'Orange', 'Red', 'Yellow', 'White']
            })
            // Revalidate the color when it is changed
            .change(function(e) {
                $('#select2Form').bootstrapValidator('revalidateField', 'colors-tags');
            })
            .end()
        .bootstrapValidator({
            excluded: ':disabled',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                colors: {
                    validators: {
                        callback: {
                            message: 'Please choose 2-4 color you like most',
                            callback: function(value, validator) {
                                // Get the selected options
                                var options = validator.getFieldElements('colors').val();
                                return (options != null && options.length >= 2 && options.length <= 4);
                            }
                        }
                    }
                },
                'colors-tags': {
                    validators: {
                        callback: {
                            message: 'Please choose 2-4 color you like most',
                            callback: function(value, validator) {
                                // Get the selected options
                                var options  = validator.getFieldElements('colors-tags').val(),
                                    options2 = options.split(',');

                                return (options2 !== null && options2.length >= 2 && options2.length <= 4);
                            }
                        }
                    }
                }
            }
        });
});
</script>
</html>

The post Bootstrap 4 Select DropDown With Validation Example appeared first on Codeplaners.

]]> https://codeplaners.com/bootstrap-4-select-dropdown-with-validation-example/feed/ 0 How To Add Google Translate in Website https://codeplaners.com/how-to-add-google-translate-in-website/ https://codeplaners.com/how-to-add-google-translate-in-website/#respond Sun, 30 May 2021 08:30:16 +0000 https://codeplaners.com/?p=925 Hi, Today, i we will show you how to add google translate in website. This article will give you simple example of how to add google translate in website. you will learn how to add google translate in website. So let’s follow few step to create example of how to add google translate in website. … Continue reading "How To Add Google Translate in Website"

The post How To Add Google Translate in Website appeared first on Codeplaners.

]]> Hi,

Today, i we will show you how to add google translate in website. This article will give you simple example of how to add google translate in website. you will learn how to add google translate in website. So let’s follow few step to create example of how to add google translate in website.

<div id="google_translate_element"></div>
<script>
	function googleTranslateElementInit() {
	new google.translate.TranslateElement({
	pageLanguage: 'en'
	}, 'google_translate_element');
	}
	jQuery(document).parent.jQuery(".goog-te-banner-frame").hide("show");
</script>
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

The post How To Add Google Translate in Website appeared first on Codeplaners.

]]> https://codeplaners.com/how-to-add-google-translate-in-website/feed/ 0 Disable Ctrl+U In Javascript https://codeplaners.com/disable-ctrlu-in-javascript/ https://codeplaners.com/disable-ctrlu-in-javascript/#respond Sat, 22 May 2021 06:53:35 +0000 https://codeplaners.com/?p=819 Hi, Today, i we will show you disable Ctrl+U in javascript. This article will give you simple example of disable Ctrl+U in javascript. you will learn disable Ctrl+U in javascript. So let’s follow few step to create example of disable Ctrl+U in javascript. Example <!DOCTYPE html> <html> <head> <title>Disable Ctrl+U In Javascript</title> </head> <body> <h1>Disable … Continue reading "Disable Ctrl+U In Javascript"

The post Disable Ctrl+U In Javascript appeared first on Codeplaners.

]]> Hi,

Today, i we will show you disable Ctrl+U in javascript. This article will give you simple example of disable Ctrl+U in javascript. you will learn disable Ctrl+U in javascript. So let’s follow few step to create example of disable Ctrl+U in javascript.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Disable Ctrl+U In Javascript</title>
</head>
<body>
    
<h1>Disable Ctrl+U In Javascript</h1>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" > $(function () { $(this).bind("contextmenu", function (e) { e.preventDefault(); }); }); </script>
<script>
	document.onkeydown = function(e) {
	if (e.ctrlKey &&
		(e.keyCode === 85 )) {
		return false;
	}
};
</script>
    
</body>
</html>

The post Disable Ctrl+U In Javascript appeared first on Codeplaners.

]]> https://codeplaners.com/disable-ctrlu-in-javascript/feed/ 0 Datepicker Disable Saturday Sunday in Bootstrap https://codeplaners.com/datepicker-disable-saturday-sunday-in-bootstrap/ https://codeplaners.com/datepicker-disable-saturday-sunday-in-bootstrap/#respond Tue, 18 May 2021 23:47:30 +0000 https://codeplaners.com/?p=756 Hi, Today, i we will show you datepicker disable saturday sunday in bootstrap. This article will give you simple example of datepicker disable saturday sunday in bootstrap. you will learn datepicker disable saturday sunday in bootstrap. So let’s follow few step to create example of datepicker disable saturday sunday in bootstrap. <!DOCTYPE html> <html> <head> … Continue reading "Datepicker Disable Saturday Sunday in Bootstrap"

The post Datepicker Disable Saturday Sunday in Bootstrap appeared first on Codeplaners.

]]> Hi,

Today, i we will show you datepicker disable saturday sunday in bootstrap. This article will give you simple example of datepicker disable saturday sunday in bootstrap. you will learn datepicker disable saturday sunday in bootstrap. So let’s follow few step to create example of datepicker disable saturday sunday in bootstrap.

Datepicker Disable Saturday Sunday in Bootstrap

<!DOCTYPE html>
<html>
<head>
    <title>Datepicker Disable Saturday Sunday in Bootstrap - codeplaners.com</title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css">
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
   
<div class="container">
    <h1>Datepicker Disable Saturday Sunday in Bootstrap</h1>
    <input type="text" name="date" class="form-control datepicker" autocomplete="off">
</div>
  
</body>
   
<script type="text/javascript">
    $('.datepicker').datepicker({
        daysOfWeekDisabled: [0,6]
    });
</script>
</html>

The post Datepicker Disable Saturday Sunday in Bootstrap appeared first on Codeplaners.

]]> https://codeplaners.com/datepicker-disable-saturday-sunday-in-bootstrap/feed/ 0