title: onclick submit button, check if an input is empty
body: <p>I've searched and tried just about everything and nothing works.  I'm just trying to have this happen:</p>
  
  <p>onclick a submit button --> check to see if a text field is empty --> if it is, alert an error and do not advance to the next page (if not, advance but only if the values are between 0 - 100 numerically.</p>
  
  <p>Here's what I've got right now (other code I've found that works):</p>
  
  <pre><code>&lt;form name="agencytrial"&gt;
      &lt;div class="textcenter"&gt;
          &lt;input name="AgencyRating" id="AgencyField" type="text" value="" autocomplete="off" class="forceNumeric" onchange="handleChange(this)"; /&gt;
          &lt;input class="button" id="FormSubmitButton" type="submit" value="Submit" onclick="checkField()";  /&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  
  &lt;script&gt;
      function handleChange(input) {
          if (input.value &lt; 0) alert("Value should be between 0 - 100");
          if (input.value &gt; 100) alert("Value should be between 0 - 100");
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>The above code works fine, and <em>if</em> someone types something into the field, and <em>if</em> it is not between 0 - 100, then it will alert and error and NOT advance the page.</p>
  
  <p>But <em>if no one types anything</em>, they can just click the submit button and advance the page, and the above code does nothing to stop that.  So I tried to use something like the following (one of many attempts):</p>
  
  <pre><code>&lt;script type = "text/javascript"&gt;
      function checkField(){
          var x = document.getElementById("AgencyField");
          if (var x = ""){
              alert("Value should be between 0 - 100");
              return false;
          }else{
              return true;
          }
  &lt;/script&gt;
  </code></pre>
  
  <p>The above code fails, and they can just click the submit button and advance without typing anything into the field.</p>
  
  <p>Any help would be majorly appreciated!</p>
  
  <p><strong>------------EDIT--------------</strong></p>
  
  <p><strong>Based on everyone's comments, I've rewritten my code and it's very close.  BUT HERE'S WHAT I DON'T GET:</strong></p>
  
  <p><strong>When I input number > 100, it alerts message and DOES NOT ADVANCE.</strong></p>
  
  <p><strong>When I leave it blank, it alerts message and ADVANCES.</strong></p>
  
  <p><strong>Why the difference?</strong></p>
  
  <pre><code>&lt;form name="agencytrial"&gt;
      &lt;div class="textcenter"&gt;
          &lt;input name="AgencyRating" id="AgencyField" type="text" value=""   autocomplete="off" class="forceNumeric" onchange="handleChange(this)"/&gt;
          &lt;input class="button" id="FormSubmitButton" type="submit" value="Submit" onclick="handleChange()"&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  
  &lt;script&gt;
    function handleChange(input){
    var x = document.getElementById("AgencyField").value;
      if (x &lt; 0 || x &gt; 100 || x === "") alert("Value should be between 0 - 100");
      }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>-------EDIT #2--------</strong></p>
  
  <p>Here's all my code below.  I am just using "form onsubmit" and the "onclick" codes now, as the onchange code was not going to stop the  key or the button from being clicked with the form being empty (i.e., never modified).</p>
  
  <p>I've got the alert popping up with either  or the button being clicked, but the page always advances after I close the alert.</p>
  
  <pre><code>&lt;?php
      $compTime = 8;                  // time in seconds to use for 'computer' timing
      if ($text === '') { $text = 'How likely was it that you caused the tone to occur?|Type your response on a scale from 0-100.'; }
      $texts = explode('|', $text);
      $mainText = array_shift($texts);
  ?&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;form onsubmit="return handleChange();"&gt;
      &lt;div class="textcenter"&gt;
          &lt;h3&gt;&lt;?php echo $mainText; ?&gt;&lt;/h3&gt;
          &lt;?php
              foreach ($texts as $t) {
                  echo '&lt;p&gt;' . $t . '&lt;/p&gt;';
              }
          ?&gt;
      &lt;/div&gt;
  
      &lt;div class="textcenter"&gt;
          &lt;input name="AgencyRating" id="AgencyField" type="text" value="" autocomplete="off" class="forceNumeric"/&gt;
          &lt;input class="button" id="FormSubmitButton" type="submit" value="Submit" onclick="return handleChange()"/&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  
  &lt;style type="text/css"&gt;
  img {
      display: block;
      position: relative;
      bottom: -40px;
      left: -21px;
      max-width:520px;
      max-height:520px;
      width: auto;
      height: auto;
  }
  &lt;/style&gt;
  
  &lt;body&gt;
  &lt;img src="/tapa/Experiment/images/scale.jpg"&lt;/img&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  
  &lt;script type="text/javascript"&gt;
  function handleChange(input) {
      var x = document.getElementById("AgencyField").value;
      if (x === "" || x &lt; 0 || x &gt; 100) {
          alert("Value should be between 0 - 100");
          return false;
      }
     return true;
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>*****EDIT*****</p>
  
  <p>I have solved the problem using a new script.  Thanks to everyone and the solutions provided would usually work, but just not in my case for reasons not entirely clear to me but not worth explaining.</p>