UI-Technolgies/switchcase.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
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
        <style>
            #popup {
                display: none;
            }
        </style>
        <script>
          var regExp;
          var countryName;
          var flag;
          var msg;
          function CountryChanged(){
             var txtMobile = document.getElementById("txtMobile");
             var lstCountries = document.getElementById("lstCountries").value;

             switch(lstCountries) {
                 case "US":
                 txtMobile.placeholder = "eg: +001 [8] digits";
                 regExp = /\+001[0-9]{8}/;
                 countryName = lstCountries;
                 flag = "../Images/us.png";
                 msg = "Please use +001 for US ";
                 break;
                 case "UK":
                 txtMobile.placeholder = "eg: +44 [6] digits";
                 regExp = /\+44[0-9]{6}/;
                 countryName = lstCountries;
                 flag = "../Images/uk.png";
                 msg = "Please use +44 for UK ";
                 break;
                 case "India":
                 txtMobile.placeholder = "eg: +91 [10] digits";
                 regExp = /\+91[0-9]{10}/;
                 countryName = lstCountries;
                 flag = "../Images/india.png";
                 msg = "Please use +91 for India ";
                 break;
                 default:
                 txtMobile.placeholder = "Please Select a Country";
             }
          }
          function VerifyClick() {
              document.getElementById("lblName").innerHTML = countryName;
              document.getElementById("lblMsg").innerHTML = msg ;
              document.getElementById("imgFlag").src = flag;

              var txtMobile = document.getElementById("txtMobile").value;
              if(txtMobile.match(regExp)) {
                  document.write("Verified Successfully");
              } else {
                  document.getElementById("popup").style.display ="block";
              }
          }
        </script>
    </head>
    <body>
        <div class="container">
            <fieldset>
                <legend>Verify Mobile Number</legend>
                <div class="form-group">
                    <label>Your Country</label>
                    <div>
                        <select onchange="CountryChanged()" id="lstCountries" class="form-control">
                            <option>Select a Country</option>
                            <option>US</option>
                            <option>UK</option>
                            <option>India</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label>Your Mobile Number</label>
                    <div>
                        <input id="txtMobile" type="text" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <button onclick="VerifyClick()" class="btn btn-success">Verify</button>
                </div>
            </fieldset>
            <div class="card" id="popup">
                <div class="card-header">
                    <h3 id="lblName"></h3>
                </div>
                <div class="card-body">
                    <span id="lblMsg"></span>
                </div>
                <div class="card-footer">
                    <img id="imgFlag">
                </div>
            </div>
        </div>
    </body>
</html>