UI_4PM/forminput.html at master · Sharma-NareshIT/UI_4PM · 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
<!DOCTYPE html>
<html>
    <head>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
    <style>
      #dialog {
          width: 300px;
          height: 300px;
          position: fixed;
          top:10px;
          left:200px;
      }
    </style>
    <script>
      function RegisterClick(){
          document.getElementById("dialog").style.display="block";
          document.getElementById("fieldRegister").style.opacity="0.3";

          document.getElementById("lblName").innerHTML = document.getElementById("txtName").value;
          document.getElementById("lblMfd").innerHTML = document.getElementById("txtMfd").value;
          document.getElementById("lblStock").innerHTML = frmRegister.stock.value;
          document.getElementById("lblShipped").innerHTML = document.getElementById("lstCity").value;
      }
      function OkClick() {
        document.getElementById("dialog").style.display="none";
        document.getElementById("fieldRegister").style.opacity="1.0";
      }
    </script>
    </head>
    <body>
        <div class="container">
            <form name="frmRegister">
            <fieldset id="fieldRegister">
                <legend>Register Product</legend>
                <dl>
                    <dt>Name</dt>
                    <dd><input type="text" id="txtName" class="form-control"></dd>
                    <dt>Manufactured</dt>
                    <dd><input type="date" id="txtMfd" class="form-control"></dd>
                    <dt>Is In Stock</dt>
                    <dd>
                        <input type="radio" name="stock" value="Available"> Yes
                        <input type="radio" name="stock" value="Out of Stock"> No
                    </dd>
                    <dt>Shipped To</dt>
                    <dd>
                        <select class="form-control" id="lstCity">
                            <option>Delhi</option>
                            <option>Hyderabad</option>
                        </select>
                    </dd>
                </dl>
                <input type="button" value="Register" class="btn btn-success" onclick="RegisterClick()">
            </fieldset>
            <div id="dialog" style="display: none;" class="card">
                <div class="card-header">
                    <h3>Product Details</h3>
                </div>
                <div class="card-body">
                    <table class="table table-hover">
                        <tr>
                            <td>Name</td>
                            <td id="lblName"></td>
                        </tr>
                        <tr>
                            <td>Manufactured</td>
                            <td id="lblMfd"></td>
                        </tr>
                        <tr>
                            <td>Is In Stock</td>
                            <td id="lblStock"></td>
                        </tr>
                        <tr>
                            <td>Shipped To</td>
                            <td id="lblShipped"></td>
                        </tr>
                    </table>
                </div>
                <div class="card-body">
                     <input type="button" value="OK" class="btn btn-danger" onclick="OkClick()">
                </div>
            </div>
        </form>
        </div>
    </body>
</html>