Does my doctor offer Form

iGene

by Thet Hlaing

HTML

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<form id='doctorOfferForm' action="">
  <h4>
  Does my doctor offer iGene?
  </h4>
  <div>  
  <div>
      <label for="doctorname">Doctor's Name :</label>
      <input id="doctorname" type="text" required/> 
  </div>
  <div>
      <label for="yourname">Your Name :</label>
      <input id="yourname" type="text" required/> 
  </div>
  <div>
  <label for="hospital">Hospital :</label>
      <input id="hospital" type="text" required/> 
  </div>
  <div>
      <label for="email">Email Address :</label>
      <input id="email" type="email" required/> 
  </div>  
  <div>
      <label for="dod">Date of Delivery :</label>
      <input id="dod" type="text" required/> 
  </div>
   <div>
      <label for="phonenumber">Phone Number :</label>
      <input id="phonenumber" type="text" required/> 
  </div>
  <div>
      <input type="submit" id="doctorOfferFormSubmit" value="Find out if my doctor offers iGene!"/>
  </div>
  </div>
</form>

CSS

#doctorOfferForm{background-color:#E6F6F6; border-radius:5px; padding:10px;}
#doctorOfferForm h4{font-weight:normal; font-size:18px; border-bottom:1px solid; color:#555; padding-bottom:5px;}
#doctorOfferForm>div{display:flex;flex-wrap:wrap;}
#doctorOfferForm>div div{width:50%; padding:10px 0px;}
#doctorOfferForm>div div:last-child{width:100%; text-align:center;}
#doctorOfferForm>div label{min-width:120px; display:inline-block;color:#555555;}
#doctorOfferForm input[type="text"]{border-radius:3px; border:1px solid rgba(75,159,156,0.64); width:200px;}
#doctorOfferForm input[type="button"]{background-color:#5bc3bf; border:1px solid rgba(75,159,156,0.64); border-radius:3px; color:#fff; font-size:18px; padding:10px 20px;}
@media screen and (max-width:465px){#doctorOfferForm>div div{width:100%;}}
@media screen and (max-width:350px){#doctorOfferForm input[type="button"]{width:100%;font-size:14px;}}

JavaScript

jQuery(function() {
    jQuery("#dod").datepicker({minDate: 0});
    jQuery("#doctorOfferFormSubmit").click(function(){
    	 var doctorName = jQuery("#doctorname").val();
       var yourname = jQuery("#yourname").val();
       var hospital = jQuery("#hospital").val();
       var email = jQuery("#email").val();
       var dod = jQuery("#dod").val();
       var phonenumber = jQuery("#phonenumber").val();
    });
  });