Javascript

Javascript & Jquery

Hide and show div on dropdown selection

Dropdown 

   <div class="col-md-3">
           <div class="form-group">
                 <label>What was your SSC Marking System ?<span style="color: red">*</span></label>
                   <asp:DropDownList ID="ddlSSCMarkingSystem" runat="server" CssClass="form-control" onchange="showdiv();">
                          <asp:ListItem Value="0">-Select-</asp:ListItem>
                          <asp:ListItem Value="CGPA">CGPA</asp:ListItem>
                          <asp:ListItem Value="Percentage">Percentage</asp:ListItem>
                    </asp:DropDownList>
              </div>
     </div>

Required links

 <link href="../../assets/autocomplete/jquery-1.12-ui.min.css" rel="stylesheet" />
    <script src="../../assets/autocomplete/jquery-1.12-ui.min.js"></script>

Script

 <script>
        $(document).ready(function () {
            showdiv();
        });
    </script>
    <script>
           function showdiv() {
            debugger;
            if ($('[id$=ddlSSCMarkingSystem] option:selected').val() == 'CGPA') {           
                $('[id$=dvPercentage]').hide();
                $('[id$=dvCGPA]').show();         
            } else if ($('[id$=ddlSSCMarkingSystem] option:selected').val() == 'Percentage') {             
                $('[id$=dvPercentage]').show();
                $('[id$=dvCGPA]').hide();          
            } else {
                $('[id$=dvPercentage]').hide();
                $('[id$=dvCGPA]').hide();
            }
        }
    </script>

Fill fullname automatically in full name field from first name ,middel name and last name fields using script

html code

<div class="row">
    <div class="col-md-4">
        <div class="form-group">
        <label>First Name <span style="color: red">*</span> </label>
         <asp:TextBox runat="server" ID="txtFirstName" onblur="Concate();" CssClass="form-control text-capitalize" onkeypress="return IsAlphaNumeric(event);" />        
      </div>
     </div>
   <div class="col-md-4">
         <div class="form-group">
              <label>Middle Name <span style="color: red">*</span><small>(If not, then fill NA)</small> </label>
                   <asp:TextBox runat="server" ID="txtMiddleName" onblur="Concate();" CssClass="form-control text-capitalize" onkeypress="return IsAlphaNumeric(event);" />
                </div>
           </div>
 <div class="col-md-4">
      <div class="form-group">
          <label>Last Name <span style="color: red">*</span></label>
                <asp:TextBox runat="server" ID="txtLastName" onblur="Concate();" CssClass="form-control text-capitalize" onkeypress="return IsAlphaNumeric(event);" />
             </div>
            </div>
        </div>
   <div class="row">
        <div class="col-md-6">
            <div class="form-group">
               <label>Full Name <span style="color: red">*</span></label>
                  <asp:TextBox runat="server" ID="txtFullName" CssClass="form-control disabled" Enabled="false" />         
             </div>
         </div>

Script

 <script>
        function Concate() {
            var FirstName = $('#<%= txtFirstName.ClientID %>').val() == '' ? '' : $('#<%= txtFirstName.ClientID %>').val();
            var MiddleName = $('#<%= txtMiddleName.ClientID %>').val() == '' ? '' : $('#<%= txtMiddleName.ClientID %>').val();
            var LastName = $('#<%= txtLastName.ClientID %>').val() == '' ? '' : $('#<%= txtLastName.ClientID %>').val();
            MiddleName = MiddleName == 'NA' || MiddleName == 'Na' || MiddleName == 'na' ? '' : MiddleName;
            $('#<%= txtFullName.ClientID %>').val(FirstName + ' ' + MiddleName + ' ' + LastName).css('text-transform', 'capitalize');
        }
    </script>

Calculate percentage

html code

<div class="row">
          <div id="dvPercentage" runat="server">
                <div class="col-md-3">
                    <div class="form-group">
                     <label>Total Marks Obtained in All Subjects <span style="color: red">*</span></label>
                     <asp:TextBox runat="server" onchange="CalculateSSCPer();" MaxLength="4" onkeypress="return isNumberKey(event);" ID="txtSSCObtainMarks" CssClass="form-control" />
                     <asp:RequiredFieldValidator ID="RFV1" ValidationGroup="SSCDetails" ErrorMessage="Enter Obtained SSC Marks" Display="Dynamic" ControlToValidate="txtSSCObtainMarks" runat="server" />
                   </div>
             </div>
        <div class="col-md-3">
              <div class="form-group">
                   <label>Total Maximum Marks in All subjects <span style="color: red">*</span></label>
                        <asp:TextBox runat="server" ID="txtTotalMarks" onchange="CalculateSSCPer();" onkeypress="return isNumberKey(event);" MaxLength="4" CssClass="form-control" />
                   <asp:RequiredFieldValidator ID="RFV2" ValidationGroup="SSCDetails" ErrorMessage="Enter SSC Total Marks" Display="Dynamic" ControlToValidate="txtTotalMarks" runat="server" />
              </div>
          </div>
 <div class="col-md-3">
     <div class="form-group">
            <label>Percentage (%) <span style="color: red">*</span></label>
                  <asp:TextBox runat="server" MaxLength="5" onkeypress="return isNumberWithdot(event,this.id);" ID="txtSSCPer" CssClass="form-control" />
                      <asp:RequiredFieldValidator ID="RFV3" ValidationGroup="SSCDetails" ErrorMessage="Enter SSC Percentage" Display="Dynamic" ControlToValidate="txtSSCPer" runat="server" />
                 <asp:RegularExpressionValidator ID="RegularExpressionValidator7" runat="server" ControlToValidate="txtSSCPer" ValidationGroup="SSCDetails" 
                          ErrorMessage="Invalid percentage." Display="Dynamic" ValidationExpression="^(?!0?0\.00$)\d{1,2}\.\d{2}$"></asp:RegularExpressionValidator>
              </div>
           </div>
  </div>

Script

 function CalculateSSCPer() {
            var txtSSCObtainMarks = document.getElementById("<%= txtSSCObtainMarks.ClientID %>").value == "" ? 0 : document.getElementById("<%= txtSSCObtainMarks.ClientID %>").value;
            var txtTotalMarks = document.getElementById("<%= txtTotalMarks.ClientID %>").value == "" ? 0 : document.getElementById("<%= txtTotalMarks.ClientID %>").value;
            if (txtTotalMarks !== NaN && txtTotalMarks) {
                var per = (txtSSCObtainMarks / txtTotalMarks) * 100;
                document.getElementById("<%= txtSSCPer.ClientID %>").value = per.toFixed(2);
            }
        }

Only take alphabets in text field

html code

 <div class="col-md-4">
      <div class="form-group has-feedback">
       <label>Job Position <span style="color: red">*</span></label>
         <asp:TextBox ID="txtJobPosition" onkeypress="return IsAlphaNumeric(event);" MaxLength="15" runat="server" class="form-control"></asp:TextBox>
     </div>
 </div>

Script

        function IsAlphaNumeric(e) {
            if (e.keyCode == 8) {
                return true;
            }
            if (e.keyCode == 44) {
                return true;
            }
            var keyCode = e.keyCode == 0 ? e.charCode : e.keyCode;
            if ((keyCode < 65 || keyCode > 90) && (keyCode < 97 || keyCode > 123) && keyCode != 32)
                return false;
            return true;
        }

Only take numbers in text field

html code

    <div class="col-md-3">
          <div class="form-group has-feedback">
               <label>No.Of Openings <span style="color: red">*</span></label>
                 <asp:TextBox ID="txtOpening" MaxLength="3" onkeypress="return isNumberKey(event);" runat="server" class="form-control"></asp:TextBox>
            </div>
    </div>

Script

        function isNumberKey(evt) {
            if (evt.keyCode == 8) {
                return true;
            }
            var charCode = (evt.which) ? evt.which : event.keyCode
            if (charCode > 31 && (charCode < 48 || charCode > 57))
                return false;

            return true;
        }