Dynamic Controls

Creating Dynamic Controls, and get their data to Code-Behind, Asp.Net C#, using JavaScript jQuery.

by Jawad Anwar

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container mt-4">
  <div id="DependentContainer">
    <div id="TextBoxContainer" class="border rounded border-dark p-3 mb-3">
      <div class="border rounded border-dark p-3">
        <p class="lead font-weight-bold bg-light text-center p-1">
          Dependant Details
        </p>
        <div class="form-row">
          <div class="form-group col-md-4">
            <label
                   for="txtDepFirstName0"
                   class="small font-weight-bold">
              First Name</label>
            <input type="text"
                   class="form-control dep-name"
                   id="txtDepFirstName0"
                   name="DependentFName"
                   placeholder="First Name" />
            <span id="errorDepFirstName0"
                  class="form-text text-danger small"></span>
          </div>
          <div class="form-group col-md-4">
            <label
                   for="txtDepMiddleName0"
                   class="small font-weight-bold">
              Middle Name</label>
            <input type="text"
                   class="form-control"
                   id="txtDepMiddleName0"
                   name="DependentMName"
                   placeholder="Middle Name" />
            <span id="errorDepMiddleName0"
                  class="form-text text-danger"></span>
          </div>
          <div class="form-group col-md-4">
            <label
                   for="txtDepLastName0"
                   class="small font-weight-bold">
              Last Name</label>
            <input type="text"
                   class="form-control"
                  ...

JavaScript

var counter = 0;
var regexDoB = new RegExp('([0-9][1-2])/([0-2][0-9]|[3][0-1])/((19|20)[0-9]{2})');

$("#btAdd").on('click', function (e) {
  e.preventDefault();

  $('#errorDepFirstName' + counter).html("");
  $('#errorDepLastName' + counter).html("");
  $('#errorDepDateOfBirth' + counter).html("");
  $('#errorDepGender' + counter).html("");
  $('#errorDepRelationship' + counter).html("");

  if ($('#txtDepFirstName' + counter).val() == '') {
    $('#errorDepFirstName' + counter).html("Please provide Dependent's First Name");
    $('#txtDepFirstName' + counter).focus();
    return false;
  }
  else if ($('#txtDepLastName' + counter).val() == '') {
    $('#errorDepLastName' + counter).html("Please provide Dependent's Last Name");
    $('#txtDepLastName' + counter).focus();
    return false;
  }
  else if ($('#txtDepDateOfBirth' + counter).val() == '') {
    $('#errorDepDateOfBirth' + counter).html("Please provide Dependent's Date of Birth");
    $('#txtDepDateOfBirth' + counter).focus();
    return false;
  }
  else if (!regexDoB.test($('#txtDepDateOfBirth' + counter).val())) {
    $('#errorDepDateOfBirth' + counter).html("Invalid Dependent's Date of Birth");
    $('#txtDepDateOfBirth' + counter).focus();
    return false;
  }
  else if ($('#ddDepGender' + counter).val() == -1) {
    $('#errorDepGender' + counter).html("Please select Dependent's Gender");
    $('#ddDepGender' + counter).focus();
    return false;
  }
  else if ($('#ddDepRelationship' + counter).val() == -1) {
    $('#errorDepRelationship' + counter).html("Please select relation with Dependent");
    $('#ddDepRelationship' + counter).focus();
    return false;
  }
  else if ($('#ddDepRelationship' + counter).val() == 'CH' && getAge($('#txtDepDateOfBirth' + counter).val()) > 25) {
    $('#errorDepDateOfBirth' + counter).html("Child Dependent's must be age 25 or younger");
    $('#txtDepDateOfBirth' + counter).focus();
    return false;
  }
  else {
    var div = GetDynamicTextBox();
   ...