{"id":1546,"date":"2023-04-28T15:34:18","date_gmt":"2023-04-28T10:34:18","guid":{"rendered":"https:\/\/www.estheticlinicdubai.com\/?page_id=1546"},"modified":"2023-04-28T15:34:18","modified_gmt":"2023-04-28T10:34:18","slug":"cosmetic-surgery-cost-calculator","status":"publish","type":"page","link":"https:\/\/www.estheticlinicdubai.com\/en-ae\/cosmetic-surgery-cost-calculator\/","title":{"rendered":"Cosmetic-Surgery Cost Calculator"},"content":{"rendered":"<!-- MultiStep Form -->\n<form id=\"regForm\" action=\"\/csurgery-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\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;\">Select Service<\/h3>\n   <div class=\"form-group\">\n  <label for=\"service\"><\/label>\n  <select name=\"service\" class=\"form-control\" id=\"sel1\">\n    <option>Liposuction<\/option>\n    <option>Facelift<\/option>\n    <option>Rhinoplasty<\/option>\n    <option>Tummy Tuck<\/option>\n    <option>Other<\/option>\n  <\/select>\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    \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":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-1546","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.estheticlinicdubai.com\/en-ae\/wp-json\/wp\/v2\/pages\/1546","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=1546"}],"version-history":[{"count":1,"href":"https:\/\/www.estheticlinicdubai.com\/en-ae\/wp-json\/wp\/v2\/pages\/1546\/revisions"}],"predecessor-version":[{"id":1547,"href":"https:\/\/www.estheticlinicdubai.com\/en-ae\/wp-json\/wp\/v2\/pages\/1546\/revisions\/1547"}],"wp:attachment":[{"href":"https:\/\/www.estheticlinicdubai.com\/en-ae\/wp-json\/wp\/v2\/media?parent=1546"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.estheticlinicdubai.com\/en-ae\/wp-json\/wp\/v2\/tags?post=1546"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}