title: $.getJSON not responding when inside function
body: <p>The $.getJSON jquery function in the validateMdn() function is not working when in te function above. But works well when I have it outside a the function.
  I need it inside the $.getJSON inside a function because I only want the request to get triggered on form submission.</p>
  
  <p>the alert in the function works just fine but also does not work when in the $.getJSON(url, function(returnData) { alert("Hello"); });</p>
  
  <p>Thanks!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;
  function validateMdn(){
  
  var url ="http://www.example.com/Validate.do?mdn=123456789&amp;type=postpaid";
  
  alert('validate function');
  
  $.getJSON(url, function(returnData) {
    alert("Validity is : "+returnData.isValid+"  Balance is: "+returnData.balance);
  
  
  
  });
  
  }
  
  
  
  
  function checkNumber() {
  
  var numb1 = $('[name=ordPhoneNumber]');
  var numb2 = $('[name=ordPhoneNumberConfirm]');
  
  isvalid = numb1.val()=== numb2.val();
  
  if(!isvalid){
  alert('Number  does not match')
  
         }
  
  numb2.closest('.input-wrapper').toggleClass('error',!isvalid);
     return isvalid;
  
  }
  
  
  
  $(function() {
       $('#topup_form').submit( function() {
           return (checkNumber()&amp;&amp;validateMdn());
       });
  });
  
  
  &lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form method="post" name="topup" id="topup" action="https://www.example.com/topup.html"&gt;
      &lt;input type="text" name="ordPhoneNumber" id="ordPhoneNumber" maxlength="12" pattern="phone"  required&gt;
      &lt;small class="error invalid"&gt; Error messgae.  &lt;/small&gt;
  
      &lt;input type="text" name="ordPhoneNumberConfirm" id="ordPhoneNumberConfirm" maxlength="12" pattern="phone" required&gt;
  
      &lt;small class="error invalid"&gt; Error message.  &lt;/small&gt;
       &lt;button type="submit" name="submitbutton" class="button blue right"&gt;Continue&lt;/button&gt;
                  &lt;button type="reset" class="button right"&gt;Clear&lt;/button&gt;
               &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>