Family Registration System<\/title>\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n\n:root {\n\n--primary-color: #ff9800; \/* Orange *\/\n\n--secondary-color: #e65100; \/* Darker Orange *\/\n\n--accent-color: #4fc3a1;\n\n--light-color: #f8f9fa;\n\n--dark-color: #343a40;\n\n--success-color: #28a745;\n\n--warning-color: #ffc107;\n\n--danger-color: #dc3545;\n\n}\n\n\n\n* {\n\nbox-sizing: border-box;\n\nmargin: 0;\n\npadding: 0;\n\n}\n\n\n\nbody {\n\nfont-family: 'Poppins', sans-serif;\n\nbackground-color: #f5f7fa;\n\ncolor: var(--dark-color);\n\nline-height: 1.6;\n\npadding: 20px;\n\n}\n\n\n\n.container {\n\nmax-width: 1200px;\n\nmargin: 0 auto;\n\n}\n\n\n\nheader {\n\ntext-align: center;\n\nmargin-bottom: 30px;\n\npadding: 20px;\n\nbackground: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n\ncolor: white;\n\nborder-radius: 8px;\n\nbox-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n\n}\n\n\n\nh1, h2, h3 {\n\nmargin-bottom: 15px;\n\n}\n\n\n\n.card {\n\nbackground: white;\n\nborder-radius: 8px;\n\nbox-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n\npadding: 25px;\n\nmargin-bottom: 30px;\n\n}\n\n\n\n.form-group {\n\nmargin-bottom: 20px;\n\n}\n\n\n\nlabel {\n\ndisplay: block;\n\nmargin-bottom: 8px;\n\nfont-weight: 500;\n\ncolor: var(--dark-color);\n\n}\n\n\n\ninput, select, textarea {\n\nwidth: 100%;\n\npadding: 12px;\n\nborder: 1px solid #ddd;\n\nborder-radius: 6px;\n\nfont-family: 'Poppins', sans-serif;\n\nfont-size: 16px;\n\ntransition: border 0.3s;\n\n}\n\n\n\ninput:focus, select:focus, textarea:focus {\n\nborder-color: var(--primary-color);\n\noutline: none;\n\nbox-shadow: 0 0 0 3px rgba(255, 152, 0, 0.2);\n\n}\n\n\n\n.form-row {\n\ndisplay: flex;\n\ngap: 20px;\n\n}\n\n\n\n.form-col {\n\nflex: 1;\n\n}\n\n\n\nbutton {\n\nbackground-color: var(--primary-color);\n\ncolor: white;\n\nborder: none;\n\npadding: 12px 20px;\n\nborder-radius: 6px;\n\ncursor: pointer;\n\nfont-size: 16px;\n\nfont-weight: 500;\n\ntransition: background-color 0.3s;\n\nwidth: 100%;\n\n}\n\n\n\nbutton:hover {\n\nbackground-color: var(--secondary-color);\n\n}\n\n\n\n.btn-secondary {\n\nbackground-color: #6c757d;\n\n}\n\n\n\n.btn-secondary:hover {\n\nbackground-color: #5a6268;\n\n}\n\n\n\n#preview {\n\nwidth: 120px;\n\nheight: 120px;\n\nobject-fit: cover;\n\nborder-radius: 50%;\n\nborder: 3px solid var(--primary-color);\n\ndisplay: none;\n\nmargin-top: 10px;\n\n}\n\n\n\ntable {\n\nwidth: 100%;\n\nborder-collapse: collapse;\n\nmargin-top: 20px;\n\nbox-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n\n}\n\n\n\nth, td {\n\npadding: 12px 15px;\n\ntext-align: left;\n\nborder-bottom: 1px solid #ddd;\n\n}\n\n\n\nth {\n\nbackground-color: var(--primary-color);\n\ncolor: white;\n\nfont-weight: 500;\n\n}\n\n\n\ntr:nth-child(even) {\n\nbackground-color: #f8f9fa;\n\n}\n\n\n\ntr:hover {\n\nbackground-color: #f1f1f1;\n\n}\n\n\n\n.search-box {\n\nmargin-bottom: 30px;\n\ndisplay: flex;\n\ngap: 10px;\n\n}\n\n\n\n.search-box input {\n\nflex: 1;\n\n}\n\n\n\n.search-box button {\n\nwidth: auto;\n\npadding: 12px 25px;\n\n}\n\n\n\n.address-section {\n\ndisplay: flex;\n\ngap: 20px;\n\nmargin-bottom: 20px;\n\n}\n\n\n\n.address-card {\n\nflex: 1;\n\npadding: 15px;\n\nborder: 1px solid #ddd;\n\nborder-radius: 6px;\n\nbackground-color: #f8f9fa;\n\n}\n\n\n\n.address-card h3 {\n\ncolor: var(--primary-color);\n\nmargin-bottom: 15px;\n\npadding-bottom: 10px;\n\nborder-bottom: 1px solid #ddd;\n\n}\n\n\n\n.readonly-field {\n\nbackground-color: #f1f1f1;\n\ncursor: not-allowed;\n\n}\n\n\n\n.required:after {\n\ncontent: \" *\";\n\ncolor: var(--danger-color);\n\n}\n\n\n\n@media (max-width: 768px) {\n\n.form-row, .address-section {\n\nflex-direction: column;\n\ngap: 0;\n\n}\n\n}\n\n<\/style>\n\n<\/head>\n\n\n\n<body>\n\n<div class=\"container\">\n\n<header>\n\n<h1>Family Registration System<\/h1>\n\n<p>Register and manage your family information<\/p>\n\n<\/header>\n\n\n\n<div class=\"card\">\n\n<h2>Search Family<\/h2>\n\n<div class=\"search-box\">\n\n<input type=\"text\" id=\"searchId\" placeholder=\"Enter Family ID to search...\" class=\"form-control\">\n\n<button type=\"button\" id=\"searchBtn\" class=\"btn-secondary\">Search<\/button>\n\n<button type=\"button\" id=\"clearBtn\" class=\"btn-secondary\">Clear<\/button>\n\n<\/div>\n\n<\/div>\n\n\n\n<div class=\"card\">\n\n<h2>Family Registration<\/h2>\n\n<form id=\"familyForm\">\n\n<div class=\"form-group\">\n\n<label for=\"familyId\" class=\"required\">Family Unique ID<\/label>\n\n<input type=\"text\" id=\"familyId\" class=\"readonly-field\" readonly>\n\n<\/div>\n\n\n\n<div class=\"form-group\">\n\n<label for=\"familyHead\" class=\"required\">Name of Family Head<\/label>\n\n<input type=\"text\" id=\"familyHead\" required>\n\n<\/div>\n\n\n\n<div class=\"form-group\">\n\n<label for=\"picture\">Family Head Photo<\/label>\n\n<input type=\"file\" id=\"picture\" accept=\"image\/*\" onchange=\"previewImage(event)\">\n\n<img id=\"preview\">\n\n<\/div>\n\n\n\n<div class=\"form-row\">\n\n<div class=\"form-col\">\n\n<div class=\"form-group\">\n\n<label for=\"fatherName\" class=\"required\">Father’s Name<\/label>\n\n<input type=\"text\" id=\"fatherName\" required>\n\n<\/div>\n\n<\/div>\n\n<div class=\"form-col\">\n\n<div class=\"form-group\">\n\n<label for=\"grandFatherName\" class=\"required\">Grandfather’s Name<\/label>\n\n<input type=\"text\" id=\"grandFatherName\" required>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n\n<div class=\"form-row\">\n\n<div class=\"form-col\">\n\n<div class=\"form-group\">\n\n<label for=\"dob\" class=\"required\">Date of Birth<\/label>\n\n<input type=\"date\" id=\"dob\" required>\n\n<\/div>\n\n<\/div>\n\n<div class=\"form-col\">\n\n<div class=\"form-group\">\n\n<label for=\"gotra\" class=\"required\">Gotra<\/label>\n\n<input type=\"text\" id=\"gotra\" required>\n\n<\/div>\n\n<\/div>\n\n<div class=\"form-col\">\n\n<div class=\"form-group\">\n\n<label for=\"upgotra\">Upgotra<\/label>\n\n<input type=\"text\" id=\"upgotra\">\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n\n<div class=\"address-section\">\n\n<div class=\"address-card\">\n\n<h3>Permanent Address<\/h3>\n\n<div class=\"form-group\">\n\n<label for=\"pincode\" class=\"required\">PIN Code<\/label>\n\n<input type=\"text\" id=\"pincode\" required maxlength=\"6\" minlength=\"6\" onblur=\"fetchLocation('permanent')\">\n\n<\/div>\n\n<div class=\"form-group\">\n\n<label for=\"permanentVillage\">Village\/City<\/label>\n\n<input type=\"text\" id=\"permanentVillage\" class=\"readonly-field\" readonly>\n\n<\/div>\n\n<div class=\"form-group\">\n\n<label for=\"permanentDistrict\">District<\/label>\n\n<input type=\"text\" id=\"permanentDistrict\" class=\"readonly-field\" readonly>\n\n<\/div>\n\n<div class=\"form-group\">\n\n<label for=\"permanentState\">State<\/label>\n\n<input type=\"text\" id=\"permanentState\" class=\"readonly-field\" readonly>\n\n<\/div>\n\n<div class=\"form-group\">\n\n<label for=\"permanentCountry\">Country<\/label>\n\n<input type=\"text\" id=\"permanentCountry\" class=\"readonly-field\" readonly>\n\n<\/div>\n\n<div class=\"form-group\">\n\n<label for=\"permanentAddress\" class=\"required\">Full Address<\/label>\n\n<textarea id=\"permanentAddress\" rows=\"3\" required><\/textarea>\n\n<\/div>\n\n<\/div>\n\n\n\n<div class=\"address-card\">\n\n<h3>Current Address<\/h3>\n\n<div class=\"form-group\">\n\n<label for=\"currentPincode\">PIN Code<\/label>\n\n<input type=\"text\" id=\"currentPincode\" maxlength=\"6\" minlength=\"6\" onblur=\"fetchLocation('current')\">\n\n<\/div>\n\n<div class=\"form-group\">\n\n<label for=\"currentVillage\">Village\/City<\/label>\n\n<input type=\"text\" id=\"currentVillage\" class=\"readonly-field\" readonly>\n\n<\/div>\n\n<div class=\"form-group\">\n\n<label for=\"currentDistrict\">District<\/label>\n\n<input type=\"text\" id=\"currentDistrict\" class=\"readonly-field\" readonly>\n\n<\/div>\n\n<div class=\"form-group\">\n\n<label for=\"currentState\">State<\/label>\n\n<input type=\"text\" id=\"currentState\" class=\"readonly-field\" readonly>\n\n<\/div>\n\n<div class=\"form-group\">\n\n<label for=\"currentCountry\">Country<\/label>\n\n<input type=\"text\" id=\"currentCountry\" class=\"readonly-field\" readonly>\n\n<\/div>\n\n<div class=\"form-group\">\n\n<label for=\"currentAddress\">Full Address<\/label>\n\n<textarea id=\"currentAddress\" rows=\"3\"><\/textarea>\n\n<\/div>\n\n<div class=\"form-group\">\n\n<input type=\"checkbox\" id=\"sameAsPermanent\" onchange=\"copyPermanentAddress()\">\n\n<label for=\"sameAsPermanent\" style=\"display: inline;\">Same as Permanent Address<\/label>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n\n<button type=\"submit\">Save Family Details<\/button>\n\n<\/form>\n\n<\/div>\n\n\n\n<div class=\"card\">\n\n<h2>Family Members<\/h2>\n\n<form id=\"memberForm\">\n\n<div class=\"form-row\">\n\n<div class=\"form-col\">\n\n<div class=\"form-group\">\n\n<label for=\"memberName\" class=\"required\">Name<\/label>\n\n<input type=\"text\" id=\"memberName\" required>\n\n<\/div>\n\n<\/div>\n\n<div class=\"form-col\">\n\n<div class=\"form-group\">\n\n<label for=\"memberFatherName\" class=\"required\">Father’s Name<\/label>\n\n<input type=\"text\" id=\"memberFatherName\" required>\n\n<\/div>\n\n<\/div>\n\n<div class=\"form-col\">\n\n<div class=\"form-group\">\n\n<label for=\"memberMotherName\" class=\"required\">Mother’s Name<\/label>\n\n<input type=\"text\" id=\"memberMotherName\" required>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n\n<div class=\"form-row\">\n\n<div class=\"form-col\">\n\n<div class=\"form-group\">\n\n<label for=\"memberGender\" class=\"required\">Gender<\/label>\n\n<select id=\"memberGender\" required>\n\n<option value=\"\">Select Gender<\/option>\n\n<option value=\"Male\">Male<\/option>\n\n<option value=\"Female\">Female<\/option>\n\n<option value=\"Other\">Other<\/option>\n\n<\/select>\n\n<\/div>\n\n<\/div>\n\n<div class=\"form-col\">\n\n<div class=\"form-group\">\n\n<label for=\"memberDob\" class=\"required\">Date of Birth<\/label>\n\n<input type=\"date\" id=\"memberDob\" required>\n\n<\/div>\n\n<\/div>\n\n<div class=\"form-col\">\n\n<div class=\"form-group\">\n\n<label for=\"memberEducation\">Education<\/label>\n\n<input type=\"text\" id=\"memberEducation\">\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n\n<div class=\"form-row\">\n\n<div class=\"form-col\">\n\n<div class=\"form-group\">\n\n<label for=\"memberOccupation\">Occupation<\/label>\n\n<input type=\"text\" id=\"memberOccupation\">\n\n<\/div>\n\n<\/div>\n\n<div class=\"form-col\">\n\n<div class=\"form-group\">\n\n<label for=\"memberMaritalStatus\">Marital Status<\/label>\n\n<select id=\"memberMaritalStatus\">\n\n<option value=\"\">Select Status<\/option>\n\n<option value=\"Single\">Single<\/option>\n\n<option value=\"Married\">Married<\/option>\n\n<option value=\"Unmarried\">Unmarried<\/option>\n\n<option value=\"Divorced\">Divorced<\/option>\n\n<option value=\"Engaged\">Engaged<\/option>\n\n<option value=\"Separated\">Separated<\/option>\n\n<\/select>\n\n<\/div>\n\n<\/div>\n\n<div class=\"form-col\">\n\n<div class=\"form-group\">\n\n<label for=\"memberSpouseName\">Spouse Name (if applicable)<\/label>\n\n<input type=\"text\" id=\"memberSpouseName\">\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n\n<div class=\"form-row\">\n\n<div class=\"form-col\">\n\n<div class=\"form-group\">\n\n<label for=\"memberFatherInLaw\">Father-in-law Name (if applicable)<\/label>\n\n<input type=\"text\" id=\"memberFatherInLaw\">\n\n<\/div>\n\n<\/div>\n\n<div class=\"form-col\">\n\n<div class=\"form-group\">\n\n<label for=\"memberMotherInLaw\">Mother-in-law Name (if applicable)<\/label>\n\n<input type=\"text\" id=\"memberMotherInLaw\">\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n\n<button type=\"submit\">Add Family Member<\/button>\n\n<\/form>\n\n<\/div>\n\n\n\n<div class=\"card\">\n\n<h2>Registered Family Members<\/h2>\n\n<div class=\"table-responsive\">\n\n<table id=\"memberTable\">\n\n<thead>\n\n<tr>\n\n<th>Name<\/th>\n\n<th>Father<\/th>\n\n<th>Mother<\/th>\n\n<th>Gender<\/th>\n\n<th>DOB<\/th>\n\n<th>Education<\/th>\n\n<th>Occupation<\/th>\n\n<th>Marital Status<\/th>\n\n<th>Spouse<\/th>\n\n<th>Actions<\/th>\n\n<\/tr>\n\n<\/thead>\n\n<tbody><\/tbody>\n\n<\/table>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n\n<script>\n\n\/\/ Generate 16-character alphanumeric family ID\n\nfunction generateFamilyId() {\n\nconst chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';\n\nlet result = 'FAM-';\n\nfor (let i = 0; i < 12; i++) {\n\nresult += chars.charAt(Math.floor(Math.random() * chars.length));\n\n}\n\ndocument.getElementById(\"familyId\").value = result;\n\n}\n\n\n\n\/\/ Preview uploaded image\n\nfunction previewImage(event) {\n\nconst preview = document.getElementById(\"preview\");\n\nconst file = event.target.files[0];\n\nif (file) {\n\npreview.src = URL.createObjectURL(file);\n\npreview.style.display = \"block\";\n\n}\n\n}\n\n\n\n\/\/ Fetch location details from PIN code\n\nasync function fetchLocation(type) {\n\nconst pincode = document.getElementById(type === 'permanent' ? 'pincode' : 'currentPincode').value;\n\n\n\nif (pincode.length !== 6) {\n\nalert(\"PIN Code must be 6 digits\");\n\nreturn;\n\n}\n\n\n\ntry {\n\nconst response = await fetch(`https:\/\/api.postalpincode.in\/pincode\/${pincode}`);\n\nconst data = await response.json();\n\n\n\nif (data[0].Status === \"Success\") {\n\nconst place = data[0].PostOffice[0];\n\ndocument.getElementById(`${type}Village`).value = place.Name;\n\ndocument.getElementById(`${type}District`).value = place.District;\n\ndocument.getElementById(`${type}State`).value = place.State;\n\ndocument.getElementById(`${type}Country`).value = place.Country;\n\n} else {\n\nalert(\"Invalid PIN Code! Please enter a valid Indian PIN Code.\");\n\n}\n\n} catch (error) {\n\nconsole.error(\"Error fetching location data:\", error);\n\nalert(\"Failed to fetch location. Check your internet connection.\");\n\n}\n\n}\n\n\n\n\/\/ Copy permanent address to current address\n\nfunction copyPermanentAddress() {\n\nif (document.getElementById(\"sameAsPermanent\").checked) {\n\ndocument.getElementById(\"currentPincode\").value = document.getElementById(\"pincode\").value;\n\ndocument.getElementById(\"currentVillage\").value = document.getElementById(\"permanentVillage\").value;\n\ndocument.getElementById(\"currentDistrict\").value = document.getElementById(\"permanentDistrict\").value;\n\ndocument.getElementById(\"currentState\").value = document.getElementById(\"permanentState\").value;\n\ndocument.getElementById(\"currentCountry\").value = document.getElementById(\"permanentCountry\").value;\n\ndocument.getElementById(\"currentAddress\").value = document.getElementById(\"permanentAddress\").value;\n\n} else {\n\ndocument.getElementById(\"currentPincode\").value = \"\";\n\ndocument.getElementById(\"currentVillage\").value = \"\";\n\ndocument.getElementById(\"currentDistrict\").value = \"\";\n\ndocument.getElementById(\"currentState\").value = \"\";\n\ndocument.getElementById(\"currentCountry\").value = \"\";\n\ndocument.getElementById(\"currentAddress\").value = \"\";\n\n}\n\n}\n\n\n\n\/\/ Search family by ID\n\ndocument.getElementById(\"searchBtn\").addEventListener(\"click\", function() {\n\nconst familyId = document.getElementById(\"searchId\").value.trim();\n\nif (familyId) {\n\n\/\/ In a real application, you would fetch data from a database here\n\nalert(`Searching for family with ID: ${familyId}\\nThis would fetch data from your database in a real application.`);\n\n\/\/ For demo purposes, we'll just show a message\n\n} else {\n\nalert(\"Please enter a Family ID to search\");\n\n}\n\n});\n\n\n\n\/\/ Clear search\n\ndocument.getElementById(\"clearBtn\").addEventListener(\"click\", function() {\n\ndocument.getElementById(\"searchId\").value = \"\";\n\n});\n\n\n\n\/\/ Form submission handlers\n\ndocument.getElementById(\"familyForm\").addEventListener(\"submit\", function(e) {\n\ne.preventDefault();\n\n\/\/ Data would typically be sent to a server-side script or API for database storage\n\nconst formData = new FormData(e.target);\n\nconst familyData = {};\n\nformData.forEach((value, key) => familyData[key] = value);\n\nconsole.log(\"Family Data:\", familyData); \/\/ Log the data to the console (replace with real data storage)\n\nalert(\"Family details saved successfully! Check console for data.\");\n\n\/\/ In a real application, you would save to a database here\n\n});\n\n\n\ndocument.getElementById(\"memberForm\").addEventListener(\"submit\", function(e) {\n\ne.preventDefault();\n\naddFamilyMember();\n\n});\n\n\n\n\/\/ Add family member to table\n\nfunction addFamilyMember() {\n\nconst table = document.getElementById(\"memberTable\").getElementsByTagName('tbody')[0];\n\nconst row = table.insertRow();\n\n\n\nconst name = document.getElementById(\"memberName\").value;\n\nconst father = document.getElementById(\"memberFatherName\").value;\n\nconst mother = document.getElementById(\"memberMotherName\").value;\n\nconst gender = document.getElementById(\"memberGender\").value;\n\nconst dob = document.getElementById(\"memberDob\").value;\n\nconst education = document.getElementById(\"memberEducation\").value;\n\nconst occupation = document.getElementById(\"memberOccupation\").value;\n\nconst maritalStatus = document.getElementById(\"memberMaritalStatus\").value;\n\nconst spouse = document.getElementById(\"memberSpouseName\").value;\n\n\n\nrow.innerHTML = `\n\n<td>${name}<\/td>\n\n<td>${father}<\/td>\n\n<td>${mother}<\/td>\n\n<td>${gender}<\/td>\n\n<td>${dob}<\/td>\n\n<td>${education}<\/td>\n\n<td>${occupation}<\/td>\n\n<td>${maritalStatus}<\/td>\n\n<td>${spouse}<\/td>\n\n<td>\n\n<button class=\"btn-secondary\" onclick=\"editMember(this)\">Edit<\/button>\n\n<button class=\"btn-secondary\" onclick=\"deleteMember(this)\">Delete<\/button>\n\n<\/td>\n\n`;\n\n\n\n\/\/ Clear the form\n\ndocument.getElementById(\"memberForm\").reset();\n\n}\n\n\n\n\/\/ Edit member\n\nfunction editMember(button) {\n\nconst row = button.parentNode.parentNode;\n\nconst cells = row.cells;\n\n\n\ndocument.getElementById(\"memberName\").value = cells[0].textContent;\n\ndocument.getElementById(\"memberFatherName\").value = cells[1].textContent;\n\ndocument.getElementById(\"memberMotherName\").value = cells[2].textContent;\n\ndocument.getElementById(\"memberGender\").value = cells[3].textContent;\n\ndocument.getElementById(\"memberDob\").value = cells[4].textContent;\n\ndocument.getElementById(\"memberEducation\").value = cells[5].textContent;\n\ndocument.getElementById(\"memberOccupation\").value = cells[6].textContent;\n\ndocument.getElementById(\"memberMaritalStatus\").value = cells[7].textContent;\n\ndocument.getElementById(\"memberSpouseName\").value = cells[8].textContent;\n\n\n\n\/\/ Remove the row\n\nrow.parentNode.removeChild(row);\n\n}\n\n\n\n\/\/ Delete member\n\nfunction deleteMember(button) {\n\nif (confirm(\"Are you sure you want to delete this member?\")) {\n\nconst row = button.parentNode.parentNode;\n\nrow.parentNode.removeChild(row);\n\n}\n\n}\n\n\n\n\/\/ Initialize the form\n\nwindow.onload = function() {\n\ngenerateFamilyId();\n\n};\n\n<\/script>\n\n<\/body>\n\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Family Registration System Family Registration System Register and manage your family information Search Family Search Clear Family Registration Family Unique ID Name of Family Head Family Head Photo Father’s Name Grandfather’s Name Date of Birth Gotra Upgotra Permanent Address PIN Code Village\/City District State Country Full Address Current Address PIN Code Village\/City District State Country…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/full-width.php","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-200","page","type-page","status-publish","hentry"],"featured_image_url":[],"post_author":"JR SONI","assigned_categories":"","_links":{"self":[{"href":"https:\/\/sbssbharath.com\/index.php?rest_route=\/wp\/v2\/pages\/200","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sbssbharath.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sbssbharath.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sbssbharath.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sbssbharath.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=200"}],"version-history":[{"count":20,"href":"https:\/\/sbssbharath.com\/index.php?rest_route=\/wp\/v2\/pages\/200\/revisions"}],"predecessor-version":[{"id":534,"href":"https:\/\/sbssbharath.com\/index.php?rest_route=\/wp\/v2\/pages\/200\/revisions\/534"}],"wp:attachment":[{"href":"https:\/\/sbssbharath.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":200,"date":"2025-03-14T16:46:58","date_gmt":"2025-03-14T16:46:58","guid":{"rendered":"https:\/\/sbssbharath.com\/?page_id=200"},"modified":"2025-08-13T15:23:10","modified_gmt":"2025-08-13T15:23:10","slug":"registration-form","status":"publish","type":"page","link":"https:\/\/sbssbharath.com\/?page_id=200","title":{"rendered":"Registration form"},"content":{"rendered":"\n\n\n\n\n\n\n\n\n\n\nFamily Registration System<\/title>\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n\n:root {\n\n--primary-color: #ff9800; \/* Orange *\/\n\n--secondary-color: #e65100; \/* Darker Orange *\/\n\n--accent-color: #4fc3a1;\n\n--light-color: #f8f9fa;\n\n--dark-color: #343a40;\n\n--success-color: #28a745;\n\n--warning-color: #ffc107;\n\n--danger-color: #dc3545;\n\n}\n\n\n\n* {\n\nbox-sizing: border-box;\n\nmargin: 0;\n\npadding: 0;\n\n}\n\n\n\nbody {\n\nfont-family: 'Poppins', sans-serif;\n\nbackground-color: #f5f7fa;\n\ncolor: var(--dark-color);\n\nline-height: 1.6;\n\npadding: 20px;\n\n}\n\n\n\n.container {\n\nmax-width: 1200px;\n\nmargin: 0 auto;\n\n}\n\n\n\nheader {\n\ntext-align: center;\n\nmargin-bottom: 30px;\n\npadding: 20px;\n\nbackground: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n\ncolor: white;\n\nborder-radius: 8px;\n\nbox-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n\n}\n\n\n\nh1, h2, h3 {\n\nmargin-bottom: 15px;\n\n}\n\n\n\n.card {\n\nbackground: white;\n\nborder-radius: 8px;\n\nbox-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n\npadding: 25px;\n\nmargin-bottom: 30px;\n\n}\n\n\n\n.form-group {\n\nmargin-bottom: 20px;\n\n}\n\n\n\nlabel {\n\ndisplay: block;\n\nmargin-bottom: 8px;\n\nfont-weight: 500;\n\ncolor: var(--dark-color);\n\n}\n\n\n\ninput, select, textarea {\n\nwidth: 100%;\n\npadding: 12px;\n\nborder: 1px solid #ddd;\n\nborder-radius: 6px;\n\nfont-family: 'Poppins', sans-serif;\n\nfont-size: 16px;\n\ntransition: border 0.3s;\n\n}\n\n\n\ninput:focus, select:focus, textarea:focus {\n\nborder-color: var(--primary-color);\n\noutline: none;\n\nbox-shadow: 0 0 0 3px rgba(255, 152, 0, 0.2);\n\n}\n\n\n\n.form-row {\n\ndisplay: flex;\n\ngap: 20px;\n\n}\n\n\n\n.form-col {\n\nflex: 1;\n\n}\n\n\n\nbutton {\n\nbackground-color: var(--primary-color);\n\ncolor: white;\n\nborder: none;\n\npadding: 12px 20px;\n\nborder-radius: 6px;\n\ncursor: pointer;\n\nfont-size: 16px;\n\nfont-weight: 500;\n\ntransition: background-color 0.3s;\n\nwidth: 100%;\n\n}\n\n\n\nbutton:hover {\n\nbackground-color: var(--secondary-color);\n\n}\n\n\n\n.btn-secondary {\n\nbackground-color: #6c757d;\n\n}\n\n\n\n.btn-secondary:hover {\n\nbackground-color: #5a6268;\n\n}\n\n\n\n#preview {\n\nwidth: 120px;\n\nheight: 120px;\n\nobject-fit: cover;\n\nborder-radius: 50%;\n\nborder: 3px solid var(--primary-color);\n\ndisplay: none;\n\nmargin-top: 10px;\n\n}\n\n\n\ntable {\n\nwidth: 100%;\n\nborder-collapse: collapse;\n\nmargin-top: 20px;\n\nbox-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n\n}\n\n\n\nth, td {\n\npadding: 12px 15px;\n\ntext-align: left;\n\nborder-bottom: 1px solid #ddd;\n\n}\n\n\n\nth {\n\nbackground-color: var(--primary-color);\n\ncolor: white;\n\nfont-weight: 500;\n\n}\n\n\n\ntr:nth-child(even) {\n\nbackground-color: #f8f9fa;\n\n}\n\n\n\ntr:hover {\n\nbackground-color: #f1f1f1;\n\n}\n\n\n\n.search-box {\n\nmargin-bottom: 30px;\n\ndisplay: flex;\n\ngap: 10px;\n\n}\n\n\n\n.search-box input {\n\nflex: 1;\n\n}\n\n\n\n.search-box button {\n\nwidth: auto;\n\npadding: 12px 25px;\n\n}\n\n\n\n.address-section {\n\ndisplay: flex;\n\ngap: 20px;\n\nmargin-bottom: 20px;\n\n}\n\n\n\n.address-card {\n\nflex: 1;\n\npadding: 15px;\n\nborder: 1px solid #ddd;\n\nborder-radius: 6px;\n\nbackground-color: #f8f9fa;\n\n}\n\n\n\n.address-card h3 {\n\ncolor: var(--primary-color);\n\nmargin-bottom: 15px;\n\npadding-bottom: 10px;\n\nborder-bottom: 1px solid #ddd;\n\n}\n\n\n\n.readonly-field {\n\nbackground-color: #f1f1f1;\n\ncursor: not-allowed;\n\n}\n\n\n\n.required:after {\n\ncontent: \" *\";\n\ncolor: var(--danger-color);\n\n}\n\n\n\n@media (max-width: 768px) {\n\n.form-row, .address-section {\n\nflex-direction: column;\n\ngap: 0;\n\n}\n\n}\n\n<\/style>\n\n<\/head>\n\n\n\n<body>\n\n<div class=\"container\">\n\n<header>\n\n<h1>Family Registration System<\/h1>\n\n<p>Register and manage your family information<\/p>\n\n<\/header>\n\n\n\n<div class=\"card\">\n\n<h2>Search Family<\/h2>\n\n<div class=\"search-box\">\n\n<input type=\"text\" id=\"searchId\" placeholder=\"Enter Family ID to search...\" class=\"form-control\">\n\n<button type=\"button\" id=\"searchBtn\" class=\"btn-secondary\">Search<\/button>\n\n<button type=\"button\" id=\"clearBtn\" class=\"btn-secondary\">Clear<\/button>\n\n<\/div>\n\n<\/div>\n\n\n\n<div class=\"card\">\n\n<h2>Family Registration<\/h2>\n\n<form id=\"familyForm\">\n\n<div class=\"form-group\">\n\n<label for=\"familyId\" class=\"required\">Family Unique ID<\/label>\n\n<input type=\"text\" id=\"familyId\" class=\"readonly-field\" readonly>\n\n<\/div>\n\n\n\n<div class=\"form-group\">\n\n<label for=\"familyHead\" class=\"required\">Name of Family Head<\/label>\n\n<input type=\"text\" id=\"familyHead\" required>\n\n<\/div>\n\n\n\n<div class=\"form-group\">\n\n<label for=\"picture\">Family Head Photo<\/label>\n\n<input type=\"file\" id=\"picture\" accept=\"image\/*\" onchange=\"previewImage(event)\">\n\n<img id=\"preview\">\n\n<\/div>\n\n\n\n<div class=\"form-row\">\n\n<div class=\"form-col\">\n\n<div class=\"form-group\">\n\n<label for=\"fatherName\" class=\"required\">Father’s Name<\/label>\n\n<input type=\"text\" id=\"fatherName\" required>\n\n<\/div>\n\n<\/div>\n\n<div class=\"form-col\">\n\n<div class=\"form-group\">\n\n<label for=\"grandFatherName\" class=\"required\">Grandfather’s Name<\/label>\n\n<input type=\"text\" id=\"grandFatherName\" required>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n\n<div class=\"form-row\">\n\n<div class=\"form-col\">\n\n<div class=\"form-group\">\n\n<label for=\"dob\" class=\"required\">Date of Birth<\/label>\n\n<input type=\"date\" id=\"dob\" required>\n\n<\/div>\n\n<\/div>\n\n<div class=\"form-col\">\n\n<div class=\"form-group\">\n\n<label for=\"gotra\" class=\"required\">Gotra<\/label>\n\n<input type=\"text\" id=\"gotra\" required>\n\n<\/div>\n\n<\/div>\n\n<div class=\"form-col\">\n\n<div class=\"form-group\">\n\n<label for=\"upgotra\">Upgotra<\/label>\n\n<input type=\"text\" id=\"upgotra\">\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n\n<div class=\"address-section\">\n\n<div class=\"address-card\">\n\n<h3>Permanent Address<\/h3>\n\n<div class=\"form-group\">\n\n<label for=\"pincode\" class=\"required\">PIN Code<\/label>\n\n<input type=\"text\" id=\"pincode\" required maxlength=\"6\" minlength=\"6\" onblur=\"fetchLocation('permanent')\">\n\n<\/div>\n\n<div class=\"form-group\">\n\n<label for=\"permanentVillage\">Village\/City<\/label>\n\n<input type=\"text\" id=\"permanentVillage\" class=\"readonly-field\" readonly>\n\n<\/div>\n\n<div class=\"form-group\">\n\n<label for=\"permanentDistrict\">District<\/label>\n\n<input type=\"text\" id=\"permanentDistrict\" class=\"readonly-field\" readonly>\n\n<\/div>\n\n<div class=\"form-group\">\n\n<label for=\"permanentState\">State<\/label>\n\n<input type=\"text\" id=\"permanentState\" class=\"readonly-field\" readonly>\n\n<\/div>\n\n<div class=\"form-group\">\n\n<label for=\"permanentCountry\">Country<\/label>\n\n<input type=\"text\" id=\"permanentCountry\" class=\"readonly-field\" readonly>\n\n<\/div>\n\n<div class=\"form-group\">\n\n<label for=\"permanentAddress\" class=\"required\">Full Address<\/label>\n\n<textarea id=\"permanentAddress\" rows=\"3\" required><\/textarea>\n\n<\/div>\n\n<\/div>\n\n\n\n<div class=\"address-card\">\n\n<h3>Current Address<\/h3>\n\n<div class=\"form-group\">\n\n<label for=\"currentPincode\">PIN Code<\/label>\n\n<input type=\"text\" id=\"currentPincode\" maxlength=\"6\" minlength=\"6\" onblur=\"fetchLocation('current')\">\n\n<\/div>\n\n<div class=\"form-group\">\n\n<label for=\"currentVillage\">Village\/City<\/label>\n\n<input type=\"text\" id=\"currentVillage\" class=\"readonly-field\" readonly>\n\n<\/div>\n\n<div class=\"form-group\">\n\n<label for=\"currentDistrict\">District<\/label>\n\n<input type=\"text\" id=\"currentDistrict\" class=\"readonly-field\" readonly>\n\n<\/div>\n\n<div class=\"form-group\">\n\n<label for=\"currentState\">State<\/label>\n\n<input type=\"text\" id=\"currentState\" class=\"readonly-field\" readonly>\n\n<\/div>\n\n<div class=\"form-group\">\n\n<label for=\"currentCountry\">Country<\/label>\n\n<input type=\"text\" id=\"currentCountry\" class=\"readonly-field\" readonly>\n\n<\/div>\n\n<div class=\"form-group\">\n\n<label for=\"currentAddress\">Full Address<\/label>\n\n<textarea id=\"currentAddress\" rows=\"3\"><\/textarea>\n\n<\/div>\n\n<div class=\"form-group\">\n\n<input type=\"checkbox\" id=\"sameAsPermanent\" onchange=\"copyPermanentAddress()\">\n\n<label for=\"sameAsPermanent\" style=\"display: inline;\">Same as Permanent Address<\/label>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n\n<button type=\"submit\">Save Family Details<\/button>\n\n<\/form>\n\n<\/div>\n\n\n\n<div class=\"card\">\n\n<h2>Family Members<\/h2>\n\n<form id=\"memberForm\">\n\n<div class=\"form-row\">\n\n<div class=\"form-col\">\n\n<div class=\"form-group\">\n\n<label for=\"memberName\" class=\"required\">Name<\/label>\n\n<input type=\"text\" id=\"memberName\" required>\n\n<\/div>\n\n<\/div>\n\n<div class=\"form-col\">\n\n<div class=\"form-group\">\n\n<label for=\"memberFatherName\" class=\"required\">Father’s Name<\/label>\n\n<input type=\"text\" id=\"memberFatherName\" required>\n\n<\/div>\n\n<\/div>\n\n<div class=\"form-col\">\n\n<div class=\"form-group\">\n\n<label for=\"memberMotherName\" class=\"required\">Mother’s Name<\/label>\n\n<input type=\"text\" id=\"memberMotherName\" required>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n\n<div class=\"form-row\">\n\n<div class=\"form-col\">\n\n<div class=\"form-group\">\n\n<label for=\"memberGender\" class=\"required\">Gender<\/label>\n\n<select id=\"memberGender\" required>\n\n<option value=\"\">Select Gender<\/option>\n\n<option value=\"Male\">Male<\/option>\n\n<option value=\"Female\">Female<\/option>\n\n<option value=\"Other\">Other<\/option>\n\n<\/select>\n\n<\/div>\n\n<\/div>\n\n<div class=\"form-col\">\n\n<div class=\"form-group\">\n\n<label for=\"memberDob\" class=\"required\">Date of Birth<\/label>\n\n<input type=\"date\" id=\"memberDob\" required>\n\n<\/div>\n\n<\/div>\n\n<div class=\"form-col\">\n\n<div class=\"form-group\">\n\n<label for=\"memberEducation\">Education<\/label>\n\n<input type=\"text\" id=\"memberEducation\">\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n\n<div class=\"form-row\">\n\n<div class=\"form-col\">\n\n<div class=\"form-group\">\n\n<label for=\"memberOccupation\">Occupation<\/label>\n\n<input type=\"text\" id=\"memberOccupation\">\n\n<\/div>\n\n<\/div>\n\n<div class=\"form-col\">\n\n<div class=\"form-group\">\n\n<label for=\"memberMaritalStatus\">Marital Status<\/label>\n\n<select id=\"memberMaritalStatus\">\n\n<option value=\"\">Select Status<\/option>\n\n<option value=\"Single\">Single<\/option>\n\n<option value=\"Married\">Married<\/option>\n\n<option value=\"Unmarried\">Unmarried<\/option>\n\n<option value=\"Divorced\">Divorced<\/option>\n\n<option value=\"Engaged\">Engaged<\/option>\n\n<option value=\"Separated\">Separated<\/option>\n\n<\/select>\n\n<\/div>\n\n<\/div>\n\n<div class=\"form-col\">\n\n<div class=\"form-group\">\n\n<label for=\"memberSpouseName\">Spouse Name (if applicable)<\/label>\n\n<input type=\"text\" id=\"memberSpouseName\">\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n\n<div class=\"form-row\">\n\n<div class=\"form-col\">\n\n<div class=\"form-group\">\n\n<label for=\"memberFatherInLaw\">Father-in-law Name (if applicable)<\/label>\n\n<input type=\"text\" id=\"memberFatherInLaw\">\n\n<\/div>\n\n<\/div>\n\n<div class=\"form-col\">\n\n<div class=\"form-group\">\n\n<label for=\"memberMotherInLaw\">Mother-in-law Name (if applicable)<\/label>\n\n<input type=\"text\" id=\"memberMotherInLaw\">\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n\n<button type=\"submit\">Add Family Member<\/button>\n\n<\/form>\n\n<\/div>\n\n\n\n<div class=\"card\">\n\n<h2>Registered Family Members<\/h2>\n\n<div class=\"table-responsive\">\n\n<table id=\"memberTable\">\n\n<thead>\n\n<tr>\n\n<th>Name<\/th>\n\n<th>Father<\/th>\n\n<th>Mother<\/th>\n\n<th>Gender<\/th>\n\n<th>DOB<\/th>\n\n<th>Education<\/th>\n\n<th>Occupation<\/th>\n\n<th>Marital Status<\/th>\n\n<th>Spouse<\/th>\n\n<th>Actions<\/th>\n\n<\/tr>\n\n<\/thead>\n\n<tbody><\/tbody>\n\n<\/table>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n\n<script>\n\n\/\/ Generate 16-character alphanumeric family ID\n\nfunction generateFamilyId() {\n\nconst chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';\n\nlet result = 'FAM-';\n\nfor (let i = 0; i < 12; i++) {\n\nresult += chars.charAt(Math.floor(Math.random() * chars.length));\n\n}\n\ndocument.getElementById(\"familyId\").value = result;\n\n}\n\n\n\n\/\/ Preview uploaded image\n\nfunction previewImage(event) {\n\nconst preview = document.getElementById(\"preview\");\n\nconst file = event.target.files[0];\n\nif (file) {\n\npreview.src = URL.createObjectURL(file);\n\npreview.style.display = \"block\";\n\n}\n\n}\n\n\n\n\/\/ Fetch location details from PIN code\n\nasync function fetchLocation(type) {\n\nconst pincode = document.getElementById(type === 'permanent' ? 'pincode' : 'currentPincode').value;\n\n\n\nif (pincode.length !== 6) {\n\nalert(\"PIN Code must be 6 digits\");\n\nreturn;\n\n}\n\n\n\ntry {\n\nconst response = await fetch(`https:\/\/api.postalpincode.in\/pincode\/${pincode}`);\n\nconst data = await response.json();\n\n\n\nif (data[0].Status === \"Success\") {\n\nconst place = data[0].PostOffice[0];\n\ndocument.getElementById(`${type}Village`).value = place.Name;\n\ndocument.getElementById(`${type}District`).value = place.District;\n\ndocument.getElementById(`${type}State`).value = place.State;\n\ndocument.getElementById(`${type}Country`).value = place.Country;\n\n} else {\n\nalert(\"Invalid PIN Code! Please enter a valid Indian PIN Code.\");\n\n}\n\n} catch (error) {\n\nconsole.error(\"Error fetching location data:\", error);\n\nalert(\"Failed to fetch location. Check your internet connection.\");\n\n}\n\n}\n\n\n\n\/\/ Copy permanent address to current address\n\nfunction copyPermanentAddress() {\n\nif (document.getElementById(\"sameAsPermanent\").checked) {\n\ndocument.getElementById(\"currentPincode\").value = document.getElementById(\"pincode\").value;\n\ndocument.getElementById(\"currentVillage\").value = document.getElementById(\"permanentVillage\").value;\n\ndocument.getElementById(\"currentDistrict\").value = document.getElementById(\"permanentDistrict\").value;\n\ndocument.getElementById(\"currentState\").value = document.getElementById(\"permanentState\").value;\n\ndocument.getElementById(\"currentCountry\").value = document.getElementById(\"permanentCountry\").value;\n\ndocument.getElementById(\"currentAddress\").value = document.getElementById(\"permanentAddress\").value;\n\n} else {\n\ndocument.getElementById(\"currentPincode\").value = \"\";\n\ndocument.getElementById(\"currentVillage\").value = \"\";\n\ndocument.getElementById(\"currentDistrict\").value = \"\";\n\ndocument.getElementById(\"currentState\").value = \"\";\n\ndocument.getElementById(\"currentCountry\").value = \"\";\n\ndocument.getElementById(\"currentAddress\").value = \"\";\n\n}\n\n}\n\n\n\n\/\/ Search family by ID\n\ndocument.getElementById(\"searchBtn\").addEventListener(\"click\", function() {\n\nconst familyId = document.getElementById(\"searchId\").value.trim();\n\nif (familyId) {\n\n\/\/ In a real application, you would fetch data from a database here\n\nalert(`Searching for family with ID: ${familyId}\\nThis would fetch data from your database in a real application.`);\n\n\/\/ For demo purposes, we'll just show a message\n\n} else {\n\nalert(\"Please enter a Family ID to search\");\n\n}\n\n});\n\n\n\n\/\/ Clear search\n\ndocument.getElementById(\"clearBtn\").addEventListener(\"click\", function() {\n\ndocument.getElementById(\"searchId\").value = \"\";\n\n});\n\n\n\n\/\/ Form submission handlers\n\ndocument.getElementById(\"familyForm\").addEventListener(\"submit\", function(e) {\n\ne.preventDefault();\n\n\/\/ Data would typically be sent to a server-side script or API for database storage\n\nconst formData = new FormData(e.target);\n\nconst familyData = {};\n\nformData.forEach((value, key) => familyData[key] = value);\n\nconsole.log(\"Family Data:\", familyData); \/\/ Log the data to the console (replace with real data storage)\n\nalert(\"Family details saved successfully! Check console for data.\");\n\n\/\/ In a real application, you would save to a database here\n\n});\n\n\n\ndocument.getElementById(\"memberForm\").addEventListener(\"submit\", function(e) {\n\ne.preventDefault();\n\naddFamilyMember();\n\n});\n\n\n\n\/\/ Add family member to table\n\nfunction addFamilyMember() {\n\nconst table = document.getElementById(\"memberTable\").getElementsByTagName('tbody')[0];\n\nconst row = table.insertRow();\n\n\n\nconst name = document.getElementById(\"memberName\").value;\n\nconst father = document.getElementById(\"memberFatherName\").value;\n\nconst mother = document.getElementById(\"memberMotherName\").value;\n\nconst gender = document.getElementById(\"memberGender\").value;\n\nconst dob = document.getElementById(\"memberDob\").value;\n\nconst education = document.getElementById(\"memberEducation\").value;\n\nconst occupation = document.getElementById(\"memberOccupation\").value;\n\nconst maritalStatus = document.getElementById(\"memberMaritalStatus\").value;\n\nconst spouse = document.getElementById(\"memberSpouseName\").value;\n\n\n\nrow.innerHTML = `\n\n<td>${name}<\/td>\n\n<td>${father}<\/td>\n\n<td>${mother}<\/td>\n\n<td>${gender}<\/td>\n\n<td>${dob}<\/td>\n\n<td>${education}<\/td>\n\n<td>${occupation}<\/td>\n\n<td>${maritalStatus}<\/td>\n\n<td>${spouse}<\/td>\n\n<td>\n\n<button class=\"btn-secondary\" onclick=\"editMember(this)\">Edit<\/button>\n\n<button class=\"btn-secondary\" onclick=\"deleteMember(this)\">Delete<\/button>\n\n<\/td>\n\n`;\n\n\n\n\/\/ Clear the form\n\ndocument.getElementById(\"memberForm\").reset();\n\n}\n\n\n\n\/\/ Edit member\n\nfunction editMember(button) {\n\nconst row = button.parentNode.parentNode;\n\nconst cells = row.cells;\n\n\n\ndocument.getElementById(\"memberName\").value = cells[0].textContent;\n\ndocument.getElementById(\"memberFatherName\").value = cells[1].textContent;\n\ndocument.getElementById(\"memberMotherName\").value = cells[2].textContent;\n\ndocument.getElementById(\"memberGender\").value = cells[3].textContent;\n\ndocument.getElementById(\"memberDob\").value = cells[4].textContent;\n\ndocument.getElementById(\"memberEducation\").value = cells[5].textContent;\n\ndocument.getElementById(\"memberOccupation\").value = cells[6].textContent;\n\ndocument.getElementById(\"memberMaritalStatus\").value = cells[7].textContent;\n\ndocument.getElementById(\"memberSpouseName\").value = cells[8].textContent;\n\n\n\n\/\/ Remove the row\n\nrow.parentNode.removeChild(row);\n\n}\n\n\n\n\/\/ Delete member\n\nfunction deleteMember(button) {\n\nif (confirm(\"Are you sure you want to delete this member?\")) {\n\nconst row = button.parentNode.parentNode;\n\nrow.parentNode.removeChild(row);\n\n}\n\n}\n\n\n\n\/\/ Initialize the form\n\nwindow.onload = function() {\n\ngenerateFamilyId();\n\n};\n\n<\/script>\n\n<\/body>\n\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Family Registration System Family Registration System Register and manage your family information Search Family Search Clear Family Registration Family Unique ID Name of Family Head Family Head Photo Father’s Name Grandfather’s Name Date of Birth Gotra Upgotra Permanent Address PIN Code Village\/City District State Country Full Address Current Address PIN Code Village\/City District State Country…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/full-width.php","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-200","page","type-page","status-publish","hentry"],"featured_image_url":[],"post_author":"JR SONI","assigned_categories":"","_links":{"self":[{"href":"https:\/\/sbssbharath.com\/index.php?rest_route=\/wp\/v2\/pages\/200","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sbssbharath.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sbssbharath.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sbssbharath.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sbssbharath.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=200"}],"version-history":[{"count":20,"href":"https:\/\/sbssbharath.com\/index.php?rest_route=\/wp\/v2\/pages\/200\/revisions"}],"predecessor-version":[{"id":534,"href":"https:\/\/sbssbharath.com\/index.php?rest_route=\/wp\/v2\/pages\/200\/revisions\/534"}],"wp:attachment":[{"href":"https:\/\/sbssbharath.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}