{"id":38299,"date":"2024-03-07T16:42:39","date_gmt":"2024-03-07T11:42:39","guid":{"rendered":"https:\/\/www.royalclinicdubai.com\/?page_id=38299"},"modified":"2024-03-09T14:54:23","modified_gmt":"2024-03-09T09:54:23","slug":"dental-appliances-calculator","status":"publish","type":"page","link":"https:\/\/www.royalclinicdubai.com\/en-ae\/dental-appliances-calculator\/","title":{"rendered":"DENTAL APPLIANCES CALCULATOR"},"content":{"rendered":"<!-- MultiStep Form -->\n<form id=\"regForm\" action=\"\/csurgery-send.php\">\n\n\n<!-- Step 1 -->\n<div class=\"tab\"><h3>DENTAL IMPLANTS CALCULATOR<\/h3>\n<div class=\"form-group\">\n    <label for=\"service\">SELECT A SERVICE:<\/label>\n    <select name=\"service\" class=\"form-control\" id=\"sel1\">\n      <option>Overlapping Teeth<\/option>\n      <option>Teeth Grinding<\/option>\n      <option>Teeth Straightening<\/option>\n      <option>Night Guard <\/option>\n      <option>Sports Guards<\/option>\n    <\/select>\n<\/div>\n\n  <div class=\"form-group\">\n    <label for=\"dental_implants\">STANDARD DENTAL IMPLANTS:<\/label>\n    <select name=\"dental_implants\" class=\"form-control\" id=\"sel1\">\n      <option>Single Dental Implant<\/option>\n      <option>Single Dental Implant with 2 Teeth<\/option>\n      <option>Two Implants Supporting 3 Teeth<\/option>\n      <option>Two Implants Supporting 4 Teeth<\/option>\n    <\/select>\n  <\/div>\n  <div class=\"form-group\">\n    <label for=\"implants1\">Number of Implants:<\/label>\n    <select name=\"implants1\" class=\"form-control\" id=\"sel1\">\n      <option>1<\/option>\n      <option>2<\/option>\n      <option>3<\/option>\n      <option>4<\/option>\n      <option>5<\/option>\n      <option>5<\/option>\n      <option>6<\/option>\n      <option>7<\/option>\n      <option>8<\/option>\n      <option>9<\/option>\n      <option>10<\/option>\n    <\/select>\n  <\/div>\n  <div class=\"form-group\">\n    <label for=\"adv_implants\">ADVANCED DENTAL IMPLANTS<\/label>\n    <select name=\"adv_implants\" class=\"form-control\" id=\"sel1\">\n      <option>Upper Removable Implant Denture<\/option>\n      <option>Lower Removable Implant Denture<\/option>\n      <option>Lower Fixed Implant Denture<\/option>\n      <option>Full Fixed Upper Arch - Permanent Teeth & Implants<\/option>\n      <option>Lower Fixed Upper Arch - Permanent Teeth & Implants<\/option>\n      \n    <\/select>\n  <\/div>\n\n   <div class=\"form-group\">\n    <label for=\"implants2\">Number of Implants:<\/label>\n    <select name=\"implants2\" class=\"form-control\" id=\"sel1\">\n      <option>1<\/option>\n      <option>2<\/option>\n      <option>3<\/option>\n      <option>4<\/option>\n      <option>5<\/option>\n      <option>5<\/option>\n      <option>6<\/option>\n      <option>7<\/option>\n      <option>8<\/option>\n      <option>9<\/option>\n      <option>10<\/option>\n    <\/select>\n  <\/div>\n<\/div>\n\n\n  <!-- Step 2 -->\n  <div class=\"tab\"><h3>Contact Info<\/h3>\n    <div class=\"form-group\">\n      <label for=\"name\">Name:<\/label>\n      <input type=\"text\" name=\"name\" class=\"form-control\" required>\n    <\/div>\n    <div class=\"form-group\">\n      <label for=\"phone\">Phone Number:<\/label>\n      <input type=\"tel\" name=\"phone\" class=\"form-control\" required>\n    <\/div>\n    <div class=\"form-group\">\n      <label for=\"message\">Message:<\/label>\n      <textarea name=\"message\" class=\"form-control\"><\/textarea>\n    <\/div>\n  <\/div>\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  <\/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\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":8,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"tags":[],"class_list":["post-38299","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.royalclinicdubai.com\/en-ae\/wp-json\/wp\/v2\/pages\/38299","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.royalclinicdubai.com\/en-ae\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.royalclinicdubai.com\/en-ae\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.royalclinicdubai.com\/en-ae\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.royalclinicdubai.com\/en-ae\/wp-json\/wp\/v2\/comments?post=38299"}],"version-history":[{"count":0,"href":"https:\/\/www.royalclinicdubai.com\/en-ae\/wp-json\/wp\/v2\/pages\/38299\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.royalclinicdubai.com\/en-ae\/wp-json\/wp\/v2\/media?parent=38299"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.royalclinicdubai.com\/en-ae\/wp-json\/wp\/v2\/tags?post=38299"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}