Bootstrap Snippet Make Payment using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    
             
    <form class="form-horizontal">
    <fieldset>
        <!-- Form Name -->
        <legend>Add Card</legend>
        <!-- Text input-->
        <div class="form-group col-lg-6">
            <label class="col-md-4 control-label" for="textinput">Card Number:</label>  
            <div class="col-md-8">
                    <select type="text" class="form-control multiselect multiselect-icon" role="multiselect">          
                      <option value="0" data-icon="glyphicon-picture" selected="selected">Photos</option>          
                      <option value="1" data-icon="glyphicon-link">Link</option>
                      <option value="2" data-icon="glyphicon-pencil">Edit</option>
                      <option value="3" data-icon="glyphicon-shopping-cart">Cart</option>
                    </select> 
            </div>
        </div>
    </fieldset>
    <fieldset style='background-color: #F0F0F0;padding-top: 25px; margin-bottom:15px;'>
        <div class="form-group ">
            <label class="col-md-2 control-label" for="textinput">Address 1:</label>  
            <div class="col-md-10">
                <input id="Address" name="textinput" type="text" placeholder="Enter Address" class="form-control input-md">
            </div>
        </div>
        <div class="form-group col-lg-6">
            <label class="col-md-4 control-label" for="textinput">City:</label>  
            <div class="col-md-8">
                <input id="City" name="textinput" type="text" placeholder="Enter Card Numbe" class="form-control input-md"> 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.multiselect
{
    width:100% !important;
    text-align:left;
    background-color:#fff;
    border:solid 1px #ccc;
}
.btn-group
{
    width:100% !important;
}
.multiselect-container
{
    width:100% !important;
    text-align:left;
}
.caret
{
        float: right;
    margin-top: 9px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/**
 * bootstrap-multiselect.js
 * https://github.com/davidstutz/bootstrap-multiselect
 *
 * Copyright 2012, 2013 David Stutz
 * 
 * Dual licensed under the BSD-3-Clause and the Apache License, Version 2.0.
 */
!function($) {
    
    "use strict";// jshint ;_;
    if (typeof ko != 'undefined' && ko.bindingHandlers && !ko.bindingHandlers.multiselect) {
        ko.bindingHandlers.multiselect = {
            init : function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {},
            update : function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
                var ms = $(element).data('multiselect');
                if (!ms) {
                    $(element).multiselect(ko.utils.unwrapObservable(valueAccessor()));
                }
                else if (allBindingsAccessor().options && allBindingsAccessor().options().length !== ms.originalOptions.length) {
                    ms.updateOriginalOptions();
                    $(element).multiselect('rebuild');
                }
            }
        };
    }
    function Multiselect(select, options) {
        this.options = this.mergeOptions(options);
        this.$select = $(select);
        
        // Initialization.
        // We have to clone to create a new reference.
        this.originalOptions = this.$select.clone()[0].options;
        this.query = '';
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Make Payment"
Bootstrap 3.3.0 Snippet by Nasir

Related: See More

Questions / Comments:

"Make Payment" Bootstrap 3.3.0 Snippet by Nasir

Related: See More

Questions / Comments:

"Make Payment"
Bootstrap 3.3.0 Snippet by Nasir