{"id":38289,"date":"2024-03-07T16:01:46","date_gmt":"2024-03-07T11:01:46","guid":{"rendered":"https:\/\/www.royalclinicdubai.com\/?page_id=38289"},"modified":"2024-03-07T16:03:16","modified_gmt":"2024-03-07T11:03:16","slug":"cosmetic-dentistry-calculator","status":"publish","type":"page","link":"https:\/\/www.royalclinicdubai.com\/en-ae\/cosmetic-dentistry-calculator\/","title":{"rendered":"Cosmetic Dentistry Calculator"},"content":{"rendered":"<!-- MultiStep Form -->\n<form id=\"regForm\" action=\"\/csurgery-send.php\">\n\n\n<!-- Step 1 -->\n<div class=\"tab\"><h3>COSMETIC DENTISTRY<\/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>Gummy smile<\/option>\n      <option>Hollywood smile<\/option>\n      <option>Teeth polishing<\/option>\n      <option>Digital smile design<\/option>\n      <option>Gum bleeding<\/option>\n      <option>Tooth filling<\/option>\n    <\/select>\n<\/div>\n\n  <div class=\"form-group\">\n    <label for=\"teeth_whitening\">TEETH WHITENING:<\/label>\n    <select name=\"teeth_whitening\" class=\"form-control\" id=\"sel1\">\n      <option>Professional<\/option>\n      \n    <\/select>\n  <\/div>\n  <div class=\"form-group\">\n    <label for=\"session1\">Number of Sessions:<\/label>\n    <select name=\"session1\" 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>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=\"teeth_alignment\">TEETH ALIGNMENT<\/label>\n    <select name=\"teeth_alignment\" class=\"form-control\" id=\"sel1\">\n      <option>K-Clear Professional<\/option>\n      \n    <\/select>\n  <\/div>\n\n  <div class=\"form-group\">\n    <label for=\"session2\">Number of Sessions:<\/label>\n    <select name=\"session2\" 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>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-38289","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.royalclinicdubai.com\/en-ae\/wp-json\/wp\/v2\/pages\/38289","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=38289"}],"version-history":[{"count":0,"href":"https:\/\/www.royalclinicdubai.com\/en-ae\/wp-json\/wp\/v2\/pages\/38289\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.royalclinicdubai.com\/en-ae\/wp-json\/wp\/v2\/media?parent=38289"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.royalclinicdubai.com\/en-ae\/wp-json\/wp\/v2\/tags?post=38289"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}