{"id":1542,"date":"2023-04-28T14:30:53","date_gmt":"2023-04-28T09:30:53","guid":{"rendered":"https:\/\/www.estheticlinicdubai.com\/?page_id=1542"},"modified":"2023-04-28T14:30:53","modified_gmt":"2023-04-28T09:30:53","slug":"graft-calculator","status":"publish","type":"page","link":"https:\/\/www.estheticlinicdubai.com\/en-ae\/graft-calculator\/","title":{"rendered":"Graft Calculator"},"content":{"rendered":"\n\n<form id=\"regForm\" action=\"\/graft-send.php\">\n\n  <!-- One \"tab\" for each step in the form: -->\n  <div class=\"tab\"><h3>How Old Are You?<\/h3>\n    <p><input placeholder=\"Enter your Age & Click Next\" oninput=\"this.className = ''\" name=\"age\"><\/p>\n\t<input type=\"hidden\" name=\"refferer\" value=\"www.estheticlinicdubai.com\/en-ae\/wp-json\/wp\/v2\/pages\/1542\">\n  <\/div>\n  <div class=\"tab\"><h3>How Many Years Have You Been Experiencing Hair Loss?<\/h3>\n    <p><input placeholder=\"Enter Years & Click Next\" oninput=\"this.className = ''\" name=\"years\"><p>\n  <\/div>\n\n<div class=\"tab\"><h3 style=\"padding-bottom: 10px;\">Enter Your Gender<\/h3>\n<p style=\"padding-bottom:10px;\"><input type=\"text\" name=\"gender\" placeholder=\"Male or Female\"><\/p>\n<\/div>\n\n  <div class=\"tab\"><h3 style=\"padding-bottom: 10px;\">Please  Enter Your Hair Loss Type After Checking From Images Given Below & Click Next Button At Bottom<\/h3>\n   <p style=\"padding-bottom: 10px;\"><input type=\"text\" name=\"hairloss\" placeholder=\"Enter Hairloss Type & Click Next\"><\/p>\n\n<div class=\"gt-calc\">\n<ul class=\"nav nav-tabs\" id=\"myTab\" role=\"tablist\">\n  <li class=\"nav-item\">\n    <a class=\"nav-link active\" id=\"home-tab\" data-toggle=\"tab\" href=\"#home\" role=\"tab\" aria-controls=\"home\" aria-selected=\"true\">Male<\/a>\n  <\/li>\n  <li class=\"nav-item\">\n    <a class=\"nav-link\" id=\"profile-tab\" data-toggle=\"tab\" href=\"#profile\" role=\"tab\" aria-controls=\"profile\" aria-selected=\"false\">Female<\/a>\n  <\/li>\n  \n<\/ul>\n\n<div class=\"tab-content\" id=\"myTabContent\">\n  <div class=\"tab-pane fade show active\" id=\"home\" role=\"tabpanel\" aria-labelledby=\"home-tab\">\n  \n  <div class=\"row\">\n  <div class=\"col-lg-2 col-md-3 col-sm-6\">\n  \n      <img decoding=\"async\" src=\"https:\/\/dynamiclinic.com\/wp-content\/uploads\/2020\/04\/type_1.1.jpg\" alt=\"\">\n      <p>Receding Hairline<\/p>\n  <\/div>\n    \n    <div class=\"col-lg-2 col-md-3 col-sm-6 col-xs-6\">\n      \n      <img decoding=\"async\" src=\"https:\/\/dynamiclinic.com\/wp-content\/uploads\/2020\/04\/type_1.2-1.jpg\" alt=\"\">\n      <p>Minimal Receding<\/p>\n    <\/div>\n    <div class=\"col-lg-2 col-md-3 col-sm-6 col-xs-6\">\n      \n      <img decoding=\"async\" src=\"https:\/\/dynamiclinic.com\/wp-content\/uploads\/2020\/04\/type_1.3.jpg\" alt=\"\">\n      <p>Progressed Receding<\/p>\n      <\/div>\n      <div class=\"col-lg-2 col-md-3 col-sm-6 col-xs-6\">\n      \n      <img decoding=\"async\" src=\"https:\/\/dynamiclinic.com\/wp-content\/uploads\/2020\/04\/type_1.4.jpg\" alt=\"\">\n      <p>Horseshoe-Shaped<\/p>\n      <\/div>\n      <div class=\"col-lg-2 col-md-3 col-sm-6\">\n      \n      <img decoding=\"async\" src=\"https:\/\/dynamiclinic.com\/wp-content\/uploads\/2020\/04\/type_1.5.jpg\" alt=\"\">\n      <p>Tonsure<\/p>\n      <\/div>\n      <div class=\"col-lg-2 col-md-3 col-sm-6 col-xs-6\">\n      \n      <img decoding=\"async\" src=\"https:\/\/dynamiclinic.com\/wp-content\/uploads\/2020\/04\/type_1.6-1.jpg\" alt=\"\">\n      <p>Large Tonsure<\/p>\n      <\/div>\n      <div class=\"col-lg-2 col-md-3 col-sm-6 col-xs-6\">\n      <img decoding=\"async\" src=\"https:\/\/dynamiclinic.com\/wp-content\/uploads\/2020\/04\/type_1.7.jpg\" alt=\"\">\n      <p>Sparse Hair<\/p>\n      <\/div>\n      <div class=\"col-lg-2 col-md-3 col-sm-6 col-xs-6\">\n      <img decoding=\"async\" src=\"https:\/\/dynamiclinic.com\/wp-content\/uploads\/2020\/04\/type_1.8-1.jpg\" alt=\"\">\n      <p>Complete Balding<\/p>\n      <\/div>\n      <div class=\"col-lg-2 col-md-3 col-sm-6 col-xs-6\">\n      <img decoding=\"async\" src=\"https:\/\/dynamiclinic.com\/wp-content\/uploads\/2020\/04\/type_1.9.1.jpg\" alt=\"\">\n      <p>Beard hair<\/p>\n      <\/div>\n      \n    <\/div><!--row-->\n\n\n\n\t<\/div><!--TabPane Male-->\n\t\n\t <div class=\"tab-pane fade\" id=\"profile\" role=\"tabpanel\" aria-labelledby=\"profile-tab\">\n       <div class=\"row\">\n  <div class=\"col-lg-2 col-md-3 col-sm-6 col-xs-6\">\n  \n      <img decoding=\"async\" src=\"https:\/\/dynamiclinic.com\/wp-content\/uploads\/2020\/04\/type_2.1-3.jpg\" alt=\"\">\n      <p>Smaller Thinning<\/p>\n  <\/div>\n    \n    <div class=\"col-lg-2 col-md-3 col-sm-6 col-xs-6\">\n      \n      <img decoding=\"async\" src=\"https:\/\/dynamiclinic.com\/wp-content\/uploads\/2020\/04\/type_2.2.jpg\" alt=\"\">\n      <p>Larger Thining<\/p>\n    <\/div>\n    <div class=\"col-lg-2 col-md-3 col-sm-6 col-xs-6\">\n      \n      <img decoding=\"async\" src=\"https:\/\/dynamiclinic.com\/wp-content\/uploads\/2020\/04\/type_2.3.jpg\" alt=\"\">\n      <p>Pronounced Thining<\/p>\n      <\/div>\n      \n      <div class=\"col-lg-2 col-md-3 col-sm-6 col-xs-6\">\n      \n      <img decoding=\"async\" src=\"https:\/\/dynamiclinic.com\/wp-content\/uploads\/2020\/04\/type_2.4.jpg\" alt=\"\">\n      <p>Small Tonsure<\/p>\n      <\/div>\n      <div class=\"col-lg-2 col-md-3 col-sm-6 col-xs-6\">\n      \n      <img decoding=\"async\" src=\"https:\/\/dynamiclinic.com\/wp-content\/uploads\/2020\/04\/type_2.5.jpg\" alt=\"\">\n      <p>Large Tonsure<\/p>\n      <\/div>\n      <div class=\"col-lg-2 col-md-3 col-sm-6 col-xs-6\">\n      <img decoding=\"async\" src=\"https:\/\/dynamiclinic.com\/wp-content\/uploads\/2020\/04\/type_2.6.jpg\" alt=\"\">\n      <p>Frontal Hair-Line Receding<\/p>\n      <\/div>\n      <div class=\"col-lg-2 col-md-3 col-sm-6 col-xs-6\">\n      <img decoding=\"async\" src=\"https:\/\/dynamiclinic.com\/wp-content\/uploads\/2020\/04\/type_1.9.png\" alt=\"\">\n      <p>Eyebrow<\/p>\n      <\/div>\n      <div class=\"col-lg-2 col-md-3 col-sm-6 col-xs-6\">\n      <img decoding=\"async\" src=\"https:\/\/dynamiclinic.com\/wp-content\/uploads\/2020\/04\/type_1.9.png\" alt=\"\">\n      <p>Eyelash<\/p>\n      <\/div>\n      \n    <\/div><!--row-->\n     <\/div><!--TabPane Female-->\n\t \n    <\/div>\n    \n \n  \n<\/div> \n  <\/div>\n\n  <div class=\"tab\"><h3>Contact Info<\/h3>\n    <p><input placeholder=\"Your name...\" oninput=\"this.className = ''\" name=\"fname\" required><\/p>\n    <p><input placeholder=\"Phone...\" oninput=\"this.className = ''\" name=\"mobile\" required><\/p>\n    <p><input placeholder=\"Any Query...\" oninput=\"this.className = ''\" name=\"description\"><\/p>\n  <\/div>\n\n\n\n\n\n\n\n  <div style=\"overflow:auto;\">\n    <div style=\"float:right;\">\n      <button type=\"button\" id=\"prevBtn\" onclick=\"nextPrev(-1)\">Previous<\/button>\n      <button type=\"button\" id=\"nextBtn\" onclick=\"nextPrev(1)\">Next<\/button>\n    <\/div>\n  <\/div>\n  <!-- Circles which indicates the steps of the form: -->\n  <div style=\"text-align:center;margin-top:40px;\">\n    <span class=\"step\"><\/span>\n    <span class=\"step\"><\/span>\n    <span class=\"step\"><\/span>\n    <span class=\"step\"><\/span>\n    <span class=\"step\"><\/span>\n  <\/div>\n<\/form>\n\n<script>\nvar currentTab = 0; \/\/ Current tab is set to be the first tab (0)\nshowTab(currentTab); \/\/ Display the current tab\n\nfunction showTab(n) {\n  \/\/ This function will display the specified tab of the form...\n  var x = document.getElementsByClassName(\"tab\");\n  x[n].style.display = \"block\";\n  \/\/... and fix the Previous\/Next buttons:\n  if (n == 0) {\n    document.getElementById(\"prevBtn\").style.display = \"none\";\n  } else {\n    document.getElementById(\"prevBtn\").style.display = \"inline\";\n  }\n  if (n == (x.length - 1)) {\n    document.getElementById(\"nextBtn\").innerHTML = \"Submit\";\n  } else {\n    document.getElementById(\"nextBtn\").innerHTML = \"Next\";\n  }\n  \/\/... and run a function that will display the correct step indicator:\n  fixStepIndicator(n)\n}\n\nfunction nextPrev(n) {\n  \/\/ This function will figure out which tab to display\n  var x = document.getElementsByClassName(\"tab\");\n  \/\/ Exit the function if any field in the current tab is invalid:\n  if (n == 1 && !validateForm()) return false;\n  \/\/ Hide the current tab:\n  x[currentTab].style.display = \"none\";\n  \/\/ Increase or decrease the current tab by 1:\n  currentTab = currentTab + n;\n  \/\/ if you have reached the end of the form...\n  if (currentTab >= x.length) {\n    \/\/ ... the form gets submitted:\n    document.getElementById(\"regForm\").submit();\n    return false;\n  }\n  \/\/ Otherwise, display the correct tab:\n  showTab(currentTab);\n}\n\nfunction validateForm() {\n  \/\/ This function deals with validation of the form fields\n  var x, y, i, valid = true;\n  x = document.getElementsByClassName(\"tab\");\n  y = x[currentTab].getElementsByTagName(\"input\");\n  \/\/ A loop that checks every input field in the current tab:\n  for (i = 0; i < y.length; i++) {\n    \/\/ If a field is empty...\n    if (y[i].value == \"\") {\n      \/\/ add an \"invalid\" class to the field:\n      y[i].className += \" invalid\";\n      \/\/ and set the current valid status to false\n      valid = false;\n    }\n  }\n  \/\/ If the valid status is true, mark the step as finished and valid:\n  if (valid) {\n    document.getElementsByClassName(\"step\")[currentTab].className += \" finish\";\n  }\n  return valid; \/\/ return the valid status\n}\n\nfunction fixStepIndicator(n) {\n  \/\/ This function removes the \"active\" class of all steps...\n  var i, x = document.getElementsByClassName(\"step\");\n  for (i = 0; i < x.length; i++) {\n    x[i].className = x[i].className.replace(\" active\", \"\");\n  }\n  \/\/... and adds the \"active\" class on the current step:\n  x[n].className += \" active\";\n}\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"tags":[],"class_list":["post-1542","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.estheticlinicdubai.com\/en-ae\/wp-json\/wp\/v2\/pages\/1542","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.estheticlinicdubai.com\/en-ae\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.estheticlinicdubai.com\/en-ae\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.estheticlinicdubai.com\/en-ae\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.estheticlinicdubai.com\/en-ae\/wp-json\/wp\/v2\/comments?post=1542"}],"version-history":[{"count":1,"href":"https:\/\/www.estheticlinicdubai.com\/en-ae\/wp-json\/wp\/v2\/pages\/1542\/revisions"}],"predecessor-version":[{"id":1543,"href":"https:\/\/www.estheticlinicdubai.com\/en-ae\/wp-json\/wp\/v2\/pages\/1542\/revisions\/1543"}],"wp:attachment":[{"href":"https:\/\/www.estheticlinicdubai.com\/en-ae\/wp-json\/wp\/v2\/media?parent=1542"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.estheticlinicdubai.com\/en-ae\/wp-json\/wp\/v2\/tags?post=1542"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}