DEV'S

JQuery Mobile Forms - Additional Data-role Attribute Values

data-role fieldcontain -> Groups Lable and Input field for better usage of Tablet/Desktop/Mobile Views

<fieldset> -> HTML5 tag, especially useful for control group elements such as Checkbox and radio button. Fieldset groups those input tags so that control could be grouped.

<legend> HTML tag useful for defining lable for control group elements such as radio, checkbox

For radio button the name attribute should be same for the given fieldset elements so it could maintain / toggle between single choice

data-role data-mini -> A slightly smaller version of JQuery mobile UI components.

myaccount.html

<div data-role="page" id="myaccount">
    <div data-role="header" data-position="fixed">
        <a href="#" data-rel="back" data-icon="back" data-iconpos="notext" >Back</a>
        <h1>My Account</h1>
    </div>
    <div data-role="main" class="ui-content">
        <div data-role="fieldcontain">
            <label for="fullname">Name</label>
            <input type="text" name="fullname" id="fullname" placeholder="Enter full name" />
        </div>
        <div data-role="fieldcontain">
            <label for="email">Email</label>
            <input type="email" name="email" id="email" placeholder="Enter email address" />
        </div>
        <div data-role="fieldcontain">
            <label for="password">Password</label>
            <input type="password" name="password" id="password" placeholder="Enter a password" />
        </div>
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup" >
                <legend>Gender</legend>
                <input type="radio" name="genderselection" id="genderfemale" checked />
                <label for="genderfemale">Female</label>
                <input type="radio" name="genderselection" id="gendermale" />
                <label for="gendermale">Male</label>
                <input type="radio" name="genderselection" id="gendertrans" />
                <label for="gendertrans">Transgender</label>
            </fieldset>
        </div>
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
                <legend>Interest Areas</legend>
                <input type="checkbox" name="travel" id="travel" checked />
                <label for="travel">Travel</label>
                <input type="checkbox" name="sports" id="sports" />
                <label for="sports">Sports</label>
                <input type="checkbox" name="business" id="business" />
                <label for="business">Business</label>
            </fieldset>
        </div>
        <div data-role="fieldcontain">
            <label for="lock">Password Lock</label>
            <select id="lock" name="lock" data-role="slider" data-mini="true">
                <option>ON</option>
                <option selected>OFF</option>
            </select>
        </div>
        <button onclick="saveMyAccount();">Save</button>
    </div>
    <div data-role="footer" data-position="fixed">
        <h2>Copyrights</h2>
    </div>
</div>

index.html

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="js/jquery.mobile-1.4.4.min.css" rel="stylesheet" >
        <script src="js/jquery.min.js" ></script>
        <script src="js/jquery.mobile-1.4.4.min.js"></script>
    </head>
    <body>
        <div data-role="page" id="mainpage" >
            <div data-role="header" data-position="fixed">
                <a href="#mypanel" data-icon="bars" data-iconpos="notext" >Back</a>
                <h1>Shopping List</h1>
            </div>
            <div data-role="main" class="ui-content">
                <ul data-role="listview" id="products" data-inset="true">

                </ul>
            </div>
            <div data-role="footer" data-position="fixed">
                <h2>Copyrights 2014</h2>
            </div>
            <div data-role="panel" id="mypanel" data-theme="b">
                <ul data-role="listview">
                    <li><a href="javascript:loadProductAddPage()">Add Items</a></li>
                    <li><a href="myaccount.html" data-transition="slide">My Account</a></li>
                    <li><a href="">Register</a></li>
                    <li><a href="">About</a></li>
                </ul>
            </div>
        </div>
        <script>
            var items = [];
            var myAccountValues = [];
            loadDataFromStorage();
            $(document).on("pagebeforechange", function(ev, data) {
                if (data.toPage[0].id === "addproductpage") {
                    var item = data.options.item;
                    console.log(item);
                    $("#itemid").val(item.itemid);
                    $("#itemname").val(item.itemname);
                    $("#itemqty").val(item.itemqty);
                    $("#itemdesc").val(item.itemdesc);
                    if (item.itemid === -1) {
                        $("#deletebtn").hide();
                    } else {
                        $("#deletebtn").show();
                    }
                } else if (data.toPage[0].id === "myaccount") {
                    loadMyAccountFromStorage();
                }
            });

            function prepareList() {
                for (var i = 0; i < items.length; i++) {
                    $("#products").append('<li><a href="javascript:loadProductEditPage(' + items[i].itemid + ')">' + items[i].itemname + '</a></li>');
                }
            }

            function findIndex(itemId) {
                for (var i = 0; i < items.length; i++) {
                    if (items[i].itemid === itemId) {
                        return i;
                    }
                }

                return -1;
            }

            function loadDataFromStorage() {
                var store = localStorage.shoppingListExtn;
                if (store) {
                    items = JSON.parse(store);
                    prepareList();
                }

                //localStorage.shoppingListExtn = ""; // to clear storage
            }

            function loadProductAddPage() {
                var obj = {
                    itemid: -1,
                    itemname: "",
                    itemqty: "",
                    itemdate: "",
                    itemdesc: ""
                };
                $.mobile.pageContainer.pagecontainer("change", "additems.html", {item: obj, transition: "slide"});
            }

            function loadProductEditPage(itemId) {
                var i = findIndex(itemId);
                var obj = items[i];
                $.mobile.pageContainer.pagecontainer("change", "additems.html", {item: obj, transition: "slide"});
            }

            function saveItem() {
                var itemIdTxt = $("#itemid").val();
                var itemId = parseFloat(itemIdTxt);
                var itemName = $("#itemname").val();
                var itemQty = $("#itemqty").val();
                var itemDesc = $("#itemdesc").val();
                var itemDate = new Date().toString();

                if (itemId === -1) {
                    //save
                    var newId = Math.random();
                    var objAdd = {
                        itemid: newId,
                        itemname: itemName,
                        itemqty: itemQty,
                        itemdate: itemDate,
                        itemdesc: itemDesc
                    };
                    items.push(objAdd);
                } else {
                    //update
                    var objEdt = {
                        itemid: itemId,
                        itemname: itemName,
                        itemqty: itemQty,
                        itemdate: itemDate,
                        itemdesc: itemDesc
                    };
                    var i = findIndex(itemId);
                    items.splice(i, 1, objEdt);
                }

                localStorage.shoppingListExtn = JSON.stringify(items);
                $("#products").html(""); // clears the list
                prepareList(); // recreate the list
                $("#products").listview("refresh");
                $.mobile.back();

            }

            function deleteItem() {
                var itemIdTxt = $("#itemid").val();
                var itemId = parseFloat(itemIdTxt);
                var i = findIndex(itemId);
                items.splice(i, 1);
                localStorage.shoppingListExtn = JSON.stringify(items);
                $("#products").html(""); // clears the list
                prepareList(); // recreate the list
                $("#products").listview("refresh");
                $.mobile.back();

            }
            function loadMyAccountFromStorage() {
                var myAcc = localStorage.myAccount;
                if (myAcc) {
                    myAccountValues = JSON.parse(myAcc);
                    $("#fullname").val(myAccountValues[0].fullname);
                    $("#email").val(myAccountValues[0].email);
                    $("#password").val(myAccountValues[0].password);

                }
            }

            function saveMyAccount() {
                var fullname = $("#fullname").val();
                var email = $("#email").val();
                var pass = $("#password").val();
                var obj = {
                    fullname: fullname,
                    email: email,
                    password: pass
                };
                myAccountValues = []; //empties the array
                myAccountValues.push(obj);
                localStorage.myAccount = JSON.stringify(myAccountValues);
                $.mobile.back();

            }

        </script>
    </body>
</html>

additems.html

<div data-role="page" id="addproductpage">
    <div data-role="header" data-position="fixed">
        <a href="#" data-rel="back" data-icon="back" data-iconpos="notext">Back</a>
        <h1>Add Item</h1>
        <a href="javascript:deleteItem()" data-icon="delete" id="deletebtn">Delete</a>
    </div>
    <div data-role="main" class="ui-content">
        <div style="padding: 10px">
            <div style="display: none">
                <label for="itemid" >Item ID</label>
                <input id="itemid" placeholder="item id" type="text" readonly>
            </div>
            <label for="itemname">Item name</label>
            <input id="itemname" placeholder="item name" type="text" >

            <label for="itemqty">Item Qty</label>
            <input id="itemqty" placeholder="item qty" type="number" >

            <label for="itemdesc">Item Description</label>
            <textarea rows="5" id="itemdesc">
                
            </textarea>

            <button id="savebtn" onclick="saveItem();">Save</button>
        </div>
    </div>
    <div data-role="footer" data-position="fixed">
        <h1>Copyrights 2014</h1> 
    </div>
</div>

HTML5

2018-11-27 21:35:02
1) Ionic - Angular Videos
2018-06-29 05:46:32
2) Service - Broadcast Receiver
2018-06-28 03:55:43
3) Activity - Bundle - Option Menu - ActionBar
2018-06-27 03:27:57
4) Relative Layout
2018-06-25 03:14:55
5) LinearLayout Calc
2018-02-08 05:14:15
6) PHP HelloWorld
2018-01-19 04:57:25
7) Angular 5 - Material Design - Reactive Form - Continued
2018-01-19 04:06:05
8) Feedback
2018-01-19 02:07:18
9) Angular 5 - Material Design
2018-01-18 03:05:47
10) Angular 5 - Custom Directives,Pipes - Promise And Observables
2018-01-17 22:51:45
11) Angular 5 - Component Interaction
2018-01-17 03:14:26
12) Angular 5 - Registration Form - WebService
2018-01-17 01:46:34
13) Angular 5 - Directives
2018-01-16 23:13:47
14) Angular 5 - Lifecycle Hooks - Routing
2018-01-16 21:36:25
15) CRUD Example - TS - LocalStorage - Delete
2018-01-16 13:34:40
16) Shopping App - Api Calls - JSON
2018-01-16 03:17:09
17) CRUD Example - TS - LocalStorage - View - Add
2018-01-15 23:57:32
18) TypeScript - Part 2
2018-01-15 23:02:07
19) TypeScript - Part 1
2018-01-15 04:46:29
20) TypeScript To JavaScript
2018-01-15 00:48:22
21) First Angular5 App
2016-01-17 23:47:13
22) JQuery Mobile - My Account Page Addon
2016-01-16 02:38:09
23) HTML5 - CSS - JavaScript Exam Preparation
2016-01-14 02:34:08
24) JQuery Validation Plugin - Basics
2016-01-13 02:35:46
25) Final - JQuery Mobile - IndexedDB Addon
2016-01-12 03:23:20
26) JQuery Mobile - IndexedDB Addon
2016-01-11 00:08:42
27) Students Record - JQuery Mobile App
2016-01-09 04:03:04
28) JQuery Mobile PageChange Event
2016-01-08 03:51:55
29) Beginning JQuery Mobile
2016-01-07 03:47:24
30) WebWorker Example
2016-01-06 04:11:18
31) IndexedDB - ObjectStore - Tansaction - Cursor - Part 2
2016-01-05 03:46:35
32) Student Record - IndexedDB Migration
2016-01-04 23:47:55
33) IndexedDB - ObjectStore - Tansaction - Cursor
2016-01-04 04:48:33
34) Single Page Design And Geolocation Example With Ajax
2016-01-03 23:39:19
35) Drag And Drop Example
2016-01-03 01:57:50
36) Beginning Responsive WebDesign Using JQuery
2016-01-03 01:56:17
37) HTML5 Canvas Simple Example
2016-01-03 01:55:11
38) JQuery Object - Context - Function Callbacks
2015-12-29 23:28:49
39) JQuery DOM Manipulation And LocalStorage
2015-11-30 23:50:59
40) JavaScript EventListeners
2015-11-30 04:34:08
41) MultiPage Design
2015-11-28 03:02:52
42) HTML Box Design
2015-07-03 03:09:55
43) KO Custom Component
2015-07-02 23:25:36
44) KO Custom Binding And Template Binding
2015-07-01 23:27:04
45) KO Simplelist
2015-07-01 01:44:40
46) KO Introduction And JQuery Simple List
2015-01-29 00:34:17
47) Canvas - DragDrop - Video - Audio Example
2015-01-28 03:57:05
48) CSS Media Type - IndexedDB WHERE And LIKE Clause
2015-01-27 02:24:12
49) IndexedDB Simple Example
2015-01-24 00:11:32
50) Students Record - JQueryMobile - GeoLocation - Ajax Addon
2015-01-24 00:08:19
51) GeoLocation And Ajax Example
2015-01-21 05:23:32
52) Students Record - JQueryMobile - SessionStorage - Login State
2015-01-19 23:33:29
53) JQueryMobile - Page Change - Popup Addon
2015-01-19 00:21:28
54) JQueryMobile - Data-Role Introduction
2015-01-17 03:22:07
55) Handle PageLinks
2015-01-16 04:28:20
56) Simple HTML5 Calculator
2015-01-16 03:03:45
57) Load External DOM - Ajax In Simple Way
2015-01-16 03:01:48
58) JQuery Document Ready - Placement Of Script Tag
2015-01-13 22:54:25
59) Dynamic Layout Technique Using JQuery
2015-01-13 04:04:19
60) JQuery - Introduction
2015-01-12 23:45:02
61) LocalStorage - CRUD
2015-01-12 00:06:03
62) JSON - LocalStorage Example
2015-01-11 22:47:24
63) JavaScript - Data Persistency Using LocalStorage - SessionStorage
2015-01-10 03:17:01
64) HTML - JavaScript - Dynamic Table
2015-01-10 00:32:26
65) JavaScript Introduction
2015-01-09 04:07:47
66) CSS - Continued
2015-01-08 03:26:39
67) CSS - Margin - Padding - HTML5 Semantic Elements
2015-01-07 22:44:01
68) HTML-CSS Introduction
2014-11-25 14:27:00
69) Angular JS Simple Example
2014-10-16 05:01:39
70) CSS Media Example - Different CSS For Desktop - Tablet - Phone Screen Sizes
2014-10-15 04:20:11
71) Miscellaneous In Addition To Previous Exercises
2014-10-15 04:13:45
72) Some Useful RegEx
2014-10-14 02:57:45
73) Shopping List App Using IndexedDB
2014-10-14 00:04:10
74) IndexedDB Introduction
2014-10-14 00:00:01
75) JavaScript Prototyping
2014-10-11 03:50:47
76) Introduction To Canvas Drawing - Tabs - Popup Warning Dialog
2014-10-11 00:03:50
77) Popup - Validation - Shopping List App Updated
2014-10-10 22:34:42
78) RegEx Pattern For Validation - Shopping List App
2014-10-10 05:12:13
79) Password Lock-Shopping List App
2014-10-09 22:49:34
80) JQuery Shopping - Updated
2014-10-09 05:10:00
81) JQuery Mobile Forms - Save Checkbox - Radio Button Checked States
2014-10-08 22:18:40
82) JQuery Mobile Forms - Additional Data-role Attribute Values
2014-10-08 02:17:48
83) JQuery Shopping List Alternate Approach. JQ Append & Pagechange
2014-10-07 03:02:43
84) JQuery Mobile Page Change Events
2014-10-06 02:19:53
85) JQuery Mobile Data- Attribute Reference
2014-10-06 00:13:01
86) Shopping List Using LocalStorage
2014-10-06 00:10:02
87) JQuery Mobile Introduction
2014-10-06 00:07:40
88) JQuery Page Loading Technique
2014-10-06 00:05:39
89) Mobile Ready Page Extended - Load Multiple Pages Using JQuery
2014-10-06 00:00:27
90) A Mobile First Design Using JQuery - Window-Size
2014-10-05 23:58:01
91) JavaScript Array - Create - Update - Delete
2014-10-05 23:55:43
92) JQuery CSS Capabilities - A Mobile Ready Page
2014-10-05 23:52:42
93) JQuery Introduction - Unit Conversion Using JQuery
2014-10-05 23:49:58
94) JavaScript - DOM Manipulation-Table-Calculator
2014-10-05 23:40:06
95) GeoLocation
2014-10-05 23:37:36
96) Margin And Border Radius
2014-10-05 23:34:06
97) HTML5 Semantic Elements, CSS,SVG Examples
2014-10-05 23:28:45
98) HTML,CSS Selectors

© Vasudev.H / Email: tech3in@live.com