title: Disable submit button on a form until fields completed
body: <p>I am currently working on a marketing page. It has a form that requires a user to put in their name and their zip code and email address. Once the user does so it will ask them to pick a location close to them for a coupon. The form currently only displays locations if the user fills in their zip code. Otherwise it displays a box telling them to input their zip code. I am struggling trying to get the user to also be required to input an email address as well. I was trying to set my code to display the locations only if both are filled. Here is what I have that I can not get to work.</p>
  
  <pre><code>&lt;form id="sportsclips"&gt;
                      &lt;div id="return-data"&gt;&lt;/div&gt;
                      &lt;input type="text" id="fullname" name="fullname" tabindex="1000" maxlength="35" placeholder="Full Name" /&gt;
                      &lt;input type="text" id="email" name="email" tabindex="2000" maxlength="45" placeholder="Email Address *" /&gt;
                      &lt;input type="text" id="zipcode" name="zipcode" tabindex="4000" maxlength="5" placeholder="Zip Code *" /&gt;                        
  
                      &lt;a href="javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';zipit(document.getElementById('zipcode').value);" class="coupon" &gt;GET MY COUPON&lt;/a&gt;
  
                      &lt;div id="light" class="white_content"&gt;
                      &lt;h1&gt;SELECT A PARTICIPATING LOCATION TO RECEIVE YOUR COUPON&lt;/h1&gt;
                      &lt;div class="col-sm-12" style="height: 35px !important;"&gt;&lt;/div&gt;
  
                     &lt;div class="col-sm-12" style="margin-bottom: 20px !important;"&gt;&lt;a href="javascript:void(0)" class="cls" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none';"&gt;X&lt;/a&gt;&lt;/div&gt;
  
                     &lt;div id="data"&gt;&lt;/div&gt;
  
  
  
                      &lt;/div&gt;
  
                      &lt;/form&gt;
  </code></pre>
  
  <p>The php that produces the results is below:</p>
  
  <pre><code>&lt;?php
  
  if(isset($_POST['zipcode']) &amp;&amp; $_POST['zipcode'] != "" &amp;&amp; $_POST['email'] != "" )
  {
      # vars
      $country     = 'US';
      $apiKey      = 'AIzaSyA39tPZzpT6KxjVEvmSFV_yWdR7kQvL0zU';
      $latitude    = '';
      $longitude   = '';
      $link        = '';
      $sql         = '';
      $result      = '';
      $earthRadius = '';
  
      # connect to the google geocode service
      $file = "https://maps.googleapis.com/maps/api/geocode/xml?address=".$_POST['zipcode'].",".$country."&amp;amp;output=csv&amp;amp;key=".$apiKey."";
  
      # load xml
      $xml = simplexml_load_file($file) or die("url not loading");
  
      # check if status is good
      $status = $xml-&gt;status;
  
      if ($status == "OK") 
      {
              # grab latitude and longitude from zip to match against db
              $latitude = $xml-&gt;result-&gt;geometry-&gt;location-&gt;lat;
              $longitude = $xml-&gt;result-&gt;geometry-&gt;location-&gt;lng; 
  
              # Build the spherical geometry SQL string
              $earthRadius = '3963.0'; // In miles
  
              # db connect if post is true
              $link = mysql_connect('localhost','haircutp_spor7Cl','~=L6QK%%lck-{dZ,Of');
  
              if(!($link))
              {
                  echo "Error Connecting to the Database".mysql_error();
              }
              else 
              {
                  mysql_select_db('haircutp_ca_promo');           
              }
  
              # db call to locations by lat / long
              $sql = "
                  SELECT ROUND(
                          ".$earthRadius." * ACOS(  
                              SIN( ".$latitude."*PI()/180 ) * SIN( latitude*PI()/180 )
                              + COS( ".$latitude."*PI()/180 ) * COS( latitude*PI()/180 )  *  COS( (longitude*PI()/180) - (".$longitude."*PI()/180) )   ) 
                      , 1)
                      AS distance, store_name, postal_address, latitude, longitude, phone, store_id 
                  FROM stores
                  ORDER BY distance ASC LIMIT 3";
  
              # Search the database for the nearest agents
              $result = mysql_query($sql);
  
              # run loop on locations
              while ($row = mysql_fetch_array($result))
              {
                  echo '&lt;div class="col-sm-4 loc"&gt;';
                  echo '&lt;strong&gt;'.$row['store_name'].'&lt;/strong&gt;&lt;br /&gt;';
                  echo ''.$row['postal_address'].'&lt;br /&gt;';
                  echo '&lt;a href="tel:1-'.$row['phone'].'" class="ph"&gt;'.$row['phone'].'&lt;/a&gt;&lt;br /&gt;';
                  echo '&lt;br /&gt;~ '.$row['distance'].' miles ~&lt;br /&gt;&lt;br /&gt;';
                  echo '&lt;input type="button" id="sendcoupon_'.$row['store_id'].'" name="sendcoupon_'.$row['store_id'].'" onclick="spc(\''.$row['store_id'].'\')" tabindex="6000" value="GET COUPON" /&gt;';
                  echo '&lt;/div&gt;';
              }
  
              mysql_close($link);
      }
  }
  else
  {
      # if not zip code
      echo '&lt;div class="col-sm-6 loc"&gt;';
      echo '&lt;strong&gt;You Must Input Your Zip Code and Email Address. Please Try Again!&lt;/strong&gt;&lt;br /&gt;';
      echo '&lt;/div&gt;';  
  }
  
  
  ?&gt;
  </code></pre>