UI-Technolgies/formInput.html at master · Sharma-NareshIT/UI-Technolgies · GitHub

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html>
    <head>
            <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
            <style>
              #cardDetails {
                  width:300px;
                  margin: auto;
              }
            </style>
            <script>
                function AddProduct() {
                    document.getElementById("cardDetails").style.display = "Block";
                    document.getElementById("cardAdd").style.display = "none";

                    document.getElementById("lblId").innerHTML =
                    document.getElementById("txtId").value;

                    document.getElementById("lblName").innerHTML =
                    document.getElementById("txtName").value;

                    document.getElementById("lblMfd").innerHTML =
                    document.getElementById("txtMfd").value;

                    var optYes = document.getElementById("optYes");
                    var optNo = document.getElementById("optNo");

                    var stock="";

                    if(optYes.checked) {
                        stock = optYes.value;
                    }

                    if(optNo.checked) {
                        stock = optNo.value;
                    }

                    document.getElementById("lblStock").innerHTML = stock;
                    document.getElementById("lblShipped").innerHTML =
                    document.getElementById("lstCities").value;
                }
                function CloseDetails() {
                    document.getElementById("cardDetails").style.display = "none";
                    document.getElementById("cardAdd").style.display = "block";
                }
            </script>
    </head>
    <body>
        <div class="container">
            <fieldset id="cardAdd">
                <legend>Add Product</legend>
                <div class="form-group">
                    <label>Product Id</label>
                    <div>
                        <input class="form-control" type="number" id="txtId">
                    </div>
                </div>
                <div class="form-group">
                        <label>Name</label>
                        <div>
                            <input class="form-control" type="text" id="txtName">
                        </div>
                </div>
                <div class="form-group">
                        <label>Manufactured</label>
                        <div>
                            <input class="form-control" type="date" id="txtMfd">
                        </div>
                </div>
                <div class="form-group">
                        <label>Is In Stock</label>
                        <div>
                            <input type="radio" name="stock" id="optYes" value="Available"> Yes
                            <input type="radio" name="stock" id="optNo" value="Out of Stock"> No
                        </div>
                </div>
                <div class="form-group">
                        <label>Shipped To</label>
                        <div>
                          <select class="form-control" id="lstCities">
                              <option>Delhi</option>
                              <option>Hyd</option>
                          </select>
                        </div>
                </div>
                <div class="form-group">
                  <button onclick="AddProduct()" class="btn btn-primary">Add Product</button>
                </div>
            </fieldset>
            <br>
            <div style="display: none" id="cardDetails" class="row">
                <div class="card-deck bg-warning">
                    <div class="card">
                        <div class="card-title" id="lblName"></div>
                        <div class="card-body">
                            <dl>
                                <dt>Product Id</dt>
                                <dd id="lblId"></dd>
                                <dt>Manufactured</dt>
                                <dd id="lblMfd"></dd>
                                <dt>Shipped To</dt>
                                <dd id="lblShipped"></dd>
                            </dl>
                        </div>
                        <div id="lblStock" class="card-footer">

                        </div>
                        <div class="text-center">
                            <button onclick="CloseDetails()" class="btn btn-primary">OK</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>